HTML如何调取摄像头_WebRTC媒体设备调用【实战】

需用WebRTC的getUserMedia()实现实时摄像头调用：一、确保HTTPS/localhost环境并检测mediaDevices支持；二、请求video权限并处理拒绝异常；三、将MediaStream赋给带autoplay/muted的video元素；四、用enumerateDevices筛选视频设备并指定deviceId调用；五、监听oninactive事件释放轨道资源。

如果您希望在网页中实时调用用户设备的摄像头并显示视频流，则需要借助 WebRTC 的 getUserMedia() API。以下是实现该功能的具体步骤：

一、检查浏览器兼容性与媒体设备权限

WebRTC 的媒体设备访问能力依赖于现代浏览器对 MediaDevices 接口的支持，并要求页面运行在安全上下文（HTTPS 或 localhost）中。若协议不安全或浏览器不支持，调用将直接失败或触发拒绝提示。

1、确认当前页面使用 HTTPS 协议或运行在 localhost 环境下。

2、在 JavaScript 中检测 navigator.mediaDevices 是否存在且具备 getUserMedia 方法。

立即学习“前端免费学习笔记（深入）”；

3、若不存在，向用户提示 当前浏览器不支持摄像头访问 并终止后续操作。

二、请求摄像头权限并获取视频流

调用 getUserMedia() 时需显式声明所需媒体类型，系统将弹出权限请求对话框；用户拒绝后 Promise 将被拒绝，必须捕获该异常以避免脚本中断。

1、定义约束对象：const constraints = { video: true, audio: false };

2、执行异步调用：navigator.mediaDevices.getUserMedia(constraints)。

3、在 .then() 中接收 MediaStream 对象，并将其赋值给 <video></video> 元素的 srcObject 属性。

4、在 .catch() 中判断错误类型，如 NotAllowedError 表示用户拒绝授权，NotFoundError 表示未检测到可用摄像头。

三、绑定视频流至页面元素并控制播放

获得 MediaStream 后需将其正确绑定至 <video></video> 标签，同时确保自动播放行为生效；部分浏览器要求显式设置 autoplay 和 muted 属性以绕过静音策略限制。

1、在 HTML 中声明一个具有 id="video" 的 <video></video> 标签，并添加 autoplay 与 muted 属性。

2、在 JavaScript 中通过 document.getElementById('video') 获取该元素。

标签： javascript java html 浏览器 usb ai stream