JavaScript如何操作摄像头与麦克风？-js教程-PHP中文网

JavaScript如何操作摄像头与麦克风？

幻影之瞳

发布： 2025-12-19 18:08:02

原创

907人浏览过

JavaScript通过MediaDevices.getUserMedia()获取音视频流，传入{video:true}、{audio:true}或两者组合的约束对象，返回Promise，成功后将MediaStream赋给video.srcObject即可预览，需设autoplay和muted；可独立控制轨道启停与切换摄像头，权限拒绝时catch捕获错误，且必须HTTPS（localhost除外）。

javascript如何操作摄像头与麦克风？

JavaScript 通过 MediaDevices.getUserMedia() 获取摄像头和麦克风的媒体流，这是现代浏览器支持的标准 API，无需插件或第三方库即可实现音视频采集。

获取摄像头和麦克风权限

调用 navigator.mediaDevices.getUserMedia() 并传入约束对象，指定需要的媒体类型：

只开摄像头：{ video: true }
只开麦克风：{ audio: true }
同时开启：{ video: true, audio: true }

该方法返回 Promise，成功后得到一个 MediaStream 对象，可直接赋给 <video></video> 元素的 srcObject 属性播放画面（注意：不再用 URL.createObjectURL()，已废弃）。

在页面中显示实时画面

将获取到的流绑定到 <video></video> 标签上即可预览：

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

const video = document.getElementById('myVideo');
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
  })
  .catch(err => console.error('访问失败:', err));

登录后复制

确保 <video></video> 设置了 autoplay 和 muted（尤其在自动播放策略严格的浏览器中），否则可能静音或不启动。

AI Sofiya

一款AI驱动的多功能工具

147

查看详情

控制音视频轨道（开启/关闭/切换）

流中的每个轨道（MediaStreamTrack）可独立操作：

关闭摄像头：stream.getVideoTracks()[0].enabled = false
关闭麦克风：stream.getAudioTracks()[0].enabled = false
切换摄像头（如前后置）：getUserMedia({ video: { facingMode: 'user' } }) 或 { facingMode: { exact: 'environment' } }

注意：切换设备需重新调用 getUserMedia，不能仅靠修改约束对象；多次调用前建议先用 stream.getTracks().forEach(track => track.stop()) 释放旧流。

处理权限拒绝与兼容性

用户拒绝授权会触发 Promise 的 catch，错误对象的 name 字段常见值有 "NotAllowedError"（用户拒绝）、"NotFoundError"（无设备）、"NotReadableError"（设备被占用）。

兼容性方面，所有主流现代浏览器均支持 mediaDevices.getUserMedia，但旧版 Safari 需要 navigator.webkitGetUserMedia（已淘汰），建议用标准写法 + 简单降级提示即可。HTTPS 是强制要求（localhost 除外），HTTP 页面无法调用该 API。

以上就是JavaScript如何操作摄像头与麦克风？的详细内容，更多请关注php中文网其它相关文章！