html5的标签是webrtc远端音视频流的标准渲染容器，需通过srcobject属性绑定mediastream对象实现自动解码渲染，配合autoplay、playsinline等属性确保兼容性与自动播放。
HTML5 的 <video></video> 标签本身不直接支持 WebRTC，但它作为 WebRTC 音视频流的**标准渲染容器**，是远端画面显示的关键环节。核心逻辑是：通过 JavaScript 获取远端媒体流（MediaStream），再将其赋给 <video></video> 元素的 srcObject 属性。
1. 创建并配置 video 元素用于远端渲染
确保 <video></video> 标签具备基础属性，便于控制和调试：
- 添加
id（如id="remote-video"）方便 JS 获取元素 - 设置
autoplay和playsinline（iOS 必需）以自动播放远端流 - 可选加
muted（远端音频是否静音不影响视频渲染） - 建议设置
width/height或用 CSS 控制尺寸，避免默认拉伸失真
示例 HTML：
2. 将远端 MediaStream 赋给 video.srcObject
WebRTC 连接建立后（如 peerConnection.ontrack 触发），会收到远端流。此时只需一行关键代码：
注意要点：
-
event.streams[0]是远端传来的MediaStream对象（可能含多轨，通常取第一个） - 必须使用
srcObject（不是过时的src+URL.createObjectURL()） - 赋值后浏览器自动解码并渲染，无需手动 play()（因有
autoplay） - 若需动态切换流（如多路通话），直接重新赋值即可，旧流自动释放
3. 处理常见异常与兼容性
远端画面不显示？优先检查以下几项：
-
权限与连接状态：确认本地已获摄像头/麦克风权限，且
peerConnection状态为connected或connected -
ontrack 是否触发：远端需调用
addTrack()或addStream()（后者已废弃，推荐 track 方式） -
浏览器兼容性：所有现代浏览器均支持
srcObject，但 IE 完全不支持 WebRTC，无需适配 -
静音策略：部分浏览器（如 Chrome）要求用户交互后才允许播放带音频的视频；若远端流含音频且未静音，可加
muted属性规避
4. 进阶：多路远端流与轨道选择
若一个连接中接收多个远端流（如会议场景），可为每个流分配独立 <video></video> 元素：
- 监听
peerConnection.ontrack，根据event.track.kind（"video"或"audio"）过滤视频轨道 - 用
new MediaStream([track])构造仅含该视频轨道的流，再赋给对应<video></video> - 支持动态关闭某路视频：
track.enabled = false，画面自动黑屏（不中断连接）
示例片段：
pc.ontrack = (event) => {if (event.track.kind === 'video') {
const videoEl = document.getElementById('remote-video-1');
videoEl.srcObject = new MediaStream([event.track]);
}
};
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
