HTML5getUserMedia获取音频视频教程

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《HTML5如何用getUserMedia获取媒体数据》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

getUserMedia调用失败主因是安全上下文限制（仅HTTPS或localhost）、非用户手势触发、constraints配置不当；需用srcObject绑定流，区分错误类型处理权限与设备问题。

getUserMedia 调用失败常见报错和原因

直接调用 MediaDevices.getUserMedia 报 NotAllowedError 或 SecurityError 是最常遇到的问题。根本原因是浏览器强制要求：该 API 只能在安全上下文（https:// 或 localhost）中运行，HTTP 页面会静默拒绝。

• 本地开发时用 http://localhost:8080 可以；但 file:// 协议绝对不行
• 生产环境必须部署在 HTTPS 服务上，哪怕自签名证书也比 HTTP 强
• 部分旧版 Safari（iOS 11 之前）不支持非 HTTPS 域名下的 getUserMedia
• 用户未点击触发（如页面 onload 时自动调用）也会被拦截 —— 必须由用户手势（click、tap）发起

约束对象 constraints 的写法与实际效果差异

constraints 不是可有可无的参数，空对象 {} 在某些浏览器（如 Chrome 90+）可能默认只请求音频，导致视频流为空。明确指定所需轨道才可靠。

• 要视频和音频：{ video: true, audio: true }
• 只要高清视频：{ video: { width: { ideal: 1920 }, height: { ideal: 1080 } } }
• 禁用音频但保留视频：{ video: true, audio: false }（注意不是省略 audio）
• 使用特定摄像头：{ video: { deviceId: 'xxx' } }，需先用 enumerateDevices() 获取有效 deviceId

设备能力超出约束时，浏览器会尽力满足 ideal，但最终分辨率/帧率仍可能降级，不可假设一定返回理想值。

拿到 MediaStream 后怎么正确绑定到

不能直接赋值 src，必须用 URL.createObjectURL() 创建临时对象 URL，否则视频不会播放。

const video = document.querySelector('video');
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    // ✅ 正确：创建对象 URL 并赋给 srcObject（现代推荐）
    video.srcObject = stream;

    // ❌ 错误：src 不接受 MediaStream
    // video.src = stream;

    // ⚠️ 兼容旧版（如 Safari 11）可加 fallback：
    // video.src = URL.createObjectURL(stream);
  })
  .catch(err => console.error('获取媒体流失败:', err));

注意：srcObject 是标准属性，无需再手动调用 play() —— 但若 带 muted 属性且含音频，部分浏览器仍需显式调用 video.play() 才能启动。

权限拒绝或设备被占用时的处理逻辑

用户点“拒绝”或系统提示“设备已被其他应用使用”，getUserMedia 会 reject，但错误类型不同，需区分对待：

• NotAllowedError：用户拒绝权限，或页面非安全上下文
• NotFoundError：找不到匹配的设备（如指定 deviceId 但已拔掉摄像头）
• NotReadableError：设备正被占用（Zoom、Teams、另一个标签页开着摄像头）
• OverconstrainedError：约束条件冲突（如同时要求 4K 分辨率和 60fps，但设备不支持）

真实项目中建议在 catch 中检查 err.name，而不是只打印日志 —— 比如 NotReadableError 可提示“请关闭其他正在使用摄像头的应用”，比泛泛的“获取失败”有用得多。

设备列表动态变化（插拔摄像头、开关麦克风）时，enumerateDevices() 返回结果可能滞后，需结合 devicechange 事件监听并重新枚举。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML5getUserMedia获取音频视频教程》文章吧，也可关注golang学习网公众号了解相关技术文章。