HTML5媒体API与WebRTC协同实现视频会议闭环：HTML5负责媒体呈现（video/audio标签）和基础控制，WebRTC提供实时采集（getUserMedia）、传输（RTCPeerConnection）和连接能力。
HTML5 媒体 API 本身不提供实时通信能力，它和 WebRTC 是协同关系：HTML5 提供媒体呈现与基础容器（如 <video>、<audio>），WebRTC 提供实时采集、连接与传输能力。二者配合，才能完成视频会议的“获取—传输—显示”闭环。
媒体流获取：getUserMedia 是桥梁
HTML5 没有原生接口直接访问摄像头或麦克风，这个功能完全由 WebRTC 的 getUserMedia 提供。它返回一个 MediaStream 对象，这是整个流程的起点：
- 调用
navigator.mediaDevices.getUserMedia({ video: true, audio: true })后，浏览器弹出权限提示，用户授权后才生成可用流； - 该流可直接赋值给
<video>元素的srcObject属性，实现本地预览——这一步依赖 HTML5 的<video>标签能力； - 若需处理音视频轨道（如关闭某一路、切换摄像头），需通过
stream.getVideoTracks()或stream.getAudioTracks()操作，这些是 MediaStream 规范定义的 HTML5 接口，但内容来源完全来自 WebRTC。
媒体呈现：HTML5 标签承担显示职责
WebRTC 不负责渲染，它只提供流数据；真正把画面和声音“画出来”“播出来”的，是 HTML5 原生媒体元素：
-
<video>元素通过srcObject = remoteStream接收远端传来的MediaStream，自动解码并播放； - 支持
play()、pause()、muted、volume等标准控制，无需额外封装； - 结合
<canvas>可对帧进行实时处理（如美颜、贴纸），利用canvas.getContext('2d').drawImage(videoElement, ...)捕获当前画面——这是 HTML5 图形能力对 WebRTC 流的增强。
媒体控制与状态管理：HTML5 事件 + WebRTC 属性
真实会议中需要响应设备状态、网络变化、流中断等，需混合使用两类 API：
立即学习“前端免费学习笔记（深入）”；
- 监听
<video>的onloadedmetadata或onplaying判断是否开始渲染，避免黑屏； - 通过
remoteStream.getVideoTracks()[0].onended捕获对方关闭摄像头事件，再配合videoElement.srcObject = null清理界面； - 用
RTCPeerConnection的iceConnectionState和connectionState判断连接质量，再动态控制<video>的hidden或poster属性提升用户体验。
信令之外的轻量交互：MediaRecorder 与 HTML5 音频分析
除主通话流外，HTML5 提供的补充 API 可拓展会议功能：
-
MediaRecorder（HTML5 标准）可录制MediaStream，用于会议回放或本地存档； -
AudioContext+createMediaStreamSource()支持音量可视化、噪声抑制检测，甚至语音活动检测（VAD）； - 这些能力不参与 P2P 传输，但丰富了前端对媒体流的感知与控制维度，是 WebRTC 无法单独完成的部分。
