最简前端点对点视频通话需三步：先用getusermedia获取媒体流，再初始化含stun的rtcpeerconnection并addtrack，最后正确交换offer/answer及ice候选；html仅承载video标签，信令须通过websocket等外部通道传输。
怎么用 RTCPeerConnection 建立最简视频通话链路
纯前端实现点对点视频通话，核心不是“写 HTML”，而是正确初始化 RTCPeerConnection 并处理信令交换。HTML 只负责承载 <video></video> 标签和触发媒体获取，真正连接靠 JS 控制。
常见错误是直接在页面加载后调用 createOffer()，但此时本地流还没就绪，导致 offer 里没有 media section，对方收到后无法协商成功。
- 必须等
navigator.mediaDevices.getUserMedia({ video: true, audio: true })成功后再创建RTCPeerConnection实例 -
RTCPeerConnection初始化时要传入 STUN/TURN 服务器配置，至少填一个 STUN（如{ urls: "stun:stun.l.google.com:19302" }），否则内网穿透失败 - 拿到本地流后，立刻用
pc.addStream(localStream)（旧 API）或pc.addTrack(track, stream)（新 API）加入轨道，否则 offer 不含媒体描述
为什么 ontrack 事件不触发，但 onaddstream 能收到流
这是 WebRTC API 迭代导致的兼容性断层。Chrome 72+、Firefox 66+ 已完全废弃 onaddstream，只触发 ontrack；但若你用的是老教程代码，可能混用了两种监听方式，造成逻辑错乱。
关键区别在于：
onaddstream 是绑定到整个 MediaStream，而 ontrack 是按轨道（MediaStreamTrack）触发，且必须在 setRemoteDescription 后才生效。
- 不要同时写
pc.onaddstream = ...和pc.ontrack = ...，优先用ontrack -
ontrack回调中拿到的event.track需手动添加到MediaStream，再赋给远端<video></video>的srcObject，例如：remoteVideo.srcObject = new MediaStream([event.track]) - 如果用
RTCPeerConnection构造时没传iceServers，ontrack永远不会触发——因为连接卡在 ICE 状态
信令怎么传？用 localStorage 模拟只能本机测试
WebRTC 本身不负责信令传输，offer/answer/candidate 都得靠外部通道（WebSocket、HTTP、甚至二维码）送达对方。很多人用 localStorage 或 console.log 手动复制粘贴，这只能验证单机双标签流程，一上真实网络就失效。
最小可行信令方案就是起一个轻量 WebSocket 服务（比如用 Node.js + ws 库），两个客户端连同一个 ws 地址，通过房间 ID 匹配收发消息。
- offer 发出后必须立即调用
pc.setLocalDescription(offer)，否则后续 candidate 无法生成 - 收到 remoteDescription 后，必须先
setRemoteDescription，再处理 candidate，顺序颠倒会导致 ICE 失败 - candidate 是分批到达的，需用
pc.addIceCandidate(candidate)逐个添加，不能攒够再批量处理
移动端视频黑屏但有声音？检查 playsinline 和自动播放策略
iOS Safari 和部分安卓浏览器默认禁止 <video></video> 自动播放视频画面（仅允许静音播放），即使你已调用 play()，也可能只出声不出像。
这不是 WebRTC 协议问题，是浏览器策略限制，必须从 HTML 层面破除。
-
<video></video>标签必须带playsinline、webkit-playsinline、muted（首次播放需静音）、autoplay属性 - 首次播放必须由用户手势（如点击按钮）触发，不能 onload 自动调用
play()，否则被静音拦截 - 某些安卓 WebView（如微信内置）会彻底禁用
getUserMedia，需检测navigator.mediaDevices是否存在，不存在则提示“请用 Chrome 或 Safari 打开”
RTCPeerConnection 的后台限制——切到后台几秒后连接大概率断开，这不是 bug，是系统设计。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
