srcObject如何播放用户媒体流？

本文深入剖析了在 HTML `

本文详解在 HTML

本文详解在 HTML `

在 WebRTC 开发中，将用户摄像头视频实时渲染到

• Failed to set the 'srcObject' property... The provided value is not of type '(MediaSourceHandle or MediaStream)'
• GET http://127.0.0.1:5500/[object%20Promise] 404 (Not Found)

这两个错误的根本原因高度一致：误将 navigator.mediaDevices.getUserMedia() 返回的 Promise 对象直接赋值给 video.srcObject（而非等待其解析后的 MediaStream 实例）。

getUserMedia() 是一个异步 API，始终返回 Promise —— 它不是立即可用的流，而是一个“未来才会兑现的承诺”。若直接写 video.srcObject = navigator.mediaDevices.getUserMedia(...)，实际赋值的是 Promise 对象本身，而 srcObject 仅接受 MediaStream 或 MediaSource 类型，故触发第一个 TypeError；若错误地尝试用 video.src = ... 赋值该 Promise，则浏览器会将其 .toString()（即 "[object Promise]"）拼接为 URL，引发第二个 404。

✅ 正确做法是：通过 .then() 链或 await 等待 Promise 解析后，再将获得的 MediaStream 赋给 video.srcObject。

以下为推荐的两种生产就绪写法（均兼容现代浏览器，含错误处理与 DOM 就绪保障）：

✅ 方案一：.then() 链式调用（简洁、无 async/await）

  
  
  


  

    
实时摄像头预览
    
    
正在初始化...
  
  

✅ 方案二：async/await + IIFE（更符合现代 JS 习惯）

// 确保脚本在 DOM 加载完成后执行（推荐加 defer 属性）
document.addEventListener('DOMContentLoaded', async () => {
  const video = document.getElementById('retourUtilisateur');
  const status = document.getElementById('status');

  const constraints = { video: { width: 1280, height: 720 } };

  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    status.textContent = '✅ 摄像头流已成功绑定';
    video.srcObject = stream;
  } catch (err) {
    status.textContent = `❌ 启动失败：${err.message}`;
    console.error(err);
  }
});

? 关键注意事项：

• srcObject 是标准属性：自 Chrome 53、Firefox 50、Safari 11+ 起已广泛支持（MDN 兼容性表），无需回退到 src + URL.createObjectURL()（后者已过时且需手动释放）；
• 避免 video.src = stream：src 属性只接受字符串 URL（如 MP4 地址），对 MediaStream 无效，强行赋值会触发 404；
• 务必添加 autoplay 和 playsinline：尤其在 iOS Safari 中，缺失 playsinline 会导致全屏播放无法自动启动；
• 权限与安全上下文：getUserMedia() 必须在安全上下文（HTTPS 或 localhost）中调用，否则直接拒绝；
• 流释放建议：页面卸载前应调用 stream.getTracks().forEach(track => track.stop()) 避免后台持续采集。

掌握 Promise 的异步本质与 srcObject 的类型契约，是驾驭 WebRTC 媒体流的第一道门槛。以上代码可直接运行于本地服务器（如 VS Code Live Server），无需额外依赖，助你快速构建稳定可靠的音视频应用基础。

以上就是《srcObject如何播放用户媒体流？》的详细内容，更多关于的资料请关注golang学习网公众号！