应直接使用 video.srcObject = stream 绑定 MediaStream,这是 HTML5 推荐标准;错误赋值 src 会静默失败;动态切换流或设为 null 可自动释放资源,无需 revokeObjectURL。

可以直接将获取到的 MediaStream 对象(如来自 navigator.mediaDevices.getUserMedia() 或 WebRTC 远端流)赋值给 <video></video> 元素的 srcObject 属性,无需经过 URL.createObjectURL() 转换,这是 HTML5 规范推荐的标准做法。
确保使用 srcObject 而非 src
srcObject 是原生支持 MediaStream 的属性,而 src 只接受字符串 URL(如 blob URL 或网络地址)。若错误地把 MediaStream 赋给 src,视频将无法播放且无报错提示。
- ✅ 正确:
video.srcObject = stream; - ❌ 错误:
video.src = stream;(会静默失败) - ⚠️ 已弃用但兼容:
video.src = URL.createObjectURL(stream);(需手动 revoke,不推荐)
基本绑定流程(以本地摄像头为例)
只需三步:获取流 → 获取 video 元素 → 赋值 srcObject。注意需在用户交互(如点击)后调用 getUserMedia,避免被浏览器拦截。
- 监听按钮点击,调用
navigator.mediaDevices.getUserMedia({ video: true }) - 成功后得到
MediaStream实例(含 video track) - 直接赋值:
document.getElementById('myVideo').srcObject = stream;
处理流变更与清理
srcObject 支持动态切换,也支持设为 null 来停止播放并释放资源。
立即学习“前端免费学习笔记(深入)”;
- 切换流:
video.srcObject = newStream;(旧流自动停止解码) - 停止播放:
video.srcObject = null;(推荐方式,比 revoke URL 更简洁) - 无需手动调用
URL.revokeObjectURL()—— 使用 srcObject 时没有生成 blob URL
兼容性与注意事项
现代浏览器(Chrome 53+、Firefox 51+、Edge 17+、Safari 11+)均支持 srcObject。旧版 Safari(≤10)或 IE 不支持,需降级使用 createObjectURL。
- 可做简单判断:
if ('srcObject' in video) { video.srcObject = stream; } else { video.src = URL.createObjectURL(stream); } - 设置
autoplay和muted属性有助于自动播放(尤其移动端或音频流) - 流为空(如无可用摄像头)时,
srcObject设为null或未赋值,video 显示黑屏,不会报错



















