可直接将 WebRTC 远端 MediaStream 赋值给 video 的 srcObject 属性实现自动渲染，需确保 video 未设置 src 属性；应在 ontrack 事件中获取 event.streams[0] 赋值，并注意自动播放策略限制。
可以直接将 WebRTC 获取的远端媒体流（MediaStream）赋值给 元素的 srcObject 属性，浏览器会自动渲染该流，无需额外编解码或转换。
确保 video 标签已正确声明且未设置 src 属性
srcObject 和 src 互斥——如果 上已有 src 属性（比如本地文件路径或 URL），浏览器会忽略 srcObject。务必清空或不设置 src：
- ✅ 正确写法：
- ❌ 错误写法：
（即使后续赋值srcObject也不会生效）
在获取远端流后，直接赋值给 srcObject
通常在 RTCPeerConnection 的 track 事件或 addstream（已废弃，仅兼容旧版）中拿到远端流。推荐使用现代方式监听 track：
pc.ontrack = (event) => {
const remoteStream = event.streams[0];
const videoEl = document.getElementById('remoteVideo');
videoEl.srcObject = remoteStream; // 直接赋值，一行搞定
};
注意：event.streams 是数组，即使只有一路流也需取 [0]；若需多路流分离（如单独音频/视频），可检查 event.track.kind === 'video' 再过滤。
处理自动播放策略与用户交互限制
现代浏览器要求音视频自动播放必须满足“用户已与页面交互”（如点击、触摸），否则可能静音或暂停。建议：
- 给
添加autoplay muted属性（即使远端有声音，先静音保渲染） - 在用户首次交互（如点击“接听”按钮）后再调用
videoEl.play()，并尝试取消静音 - 监听
play和pause事件，捕获因策略被阻断的情况，并提示用户手动操作
兼容性与降级注意事项
srcObject 在所有主流浏览器（Chrome 53+、Firefox 51+、Safari 11+、Edge 16+）中均已支持，无需 polyfill。但需注意：
- 旧版 Safari（srcObject，需降级使用
URL.createObjectURL(stream)（已不推荐，且该 API 在新规范中已标记为 legacy） - 不要混用
URL.createObjectURL()和srcObject：一旦设了srcObject，再调用createObjectURL赋值src可能导致流重复或内存泄漏 - 流结束（如对方挂断）时，
srcObject会自动停止渲染，无需手动清理，但可主动设为null显式释放：videoEl.srcObject = null
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
