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(),已废弃)。
在页面中显示实时画面
将获取到的流绑定到 标签上即可预览:
立即学习“Java免费学习笔记(深入)”;
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。










