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

幻影之瞳 2025-12-19 00:00:00 次阅读

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

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

获取摄像头和麦克风权限

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

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

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

在页面中显示实时画面

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

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

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

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

流中的每个轨道（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。