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。
以上就是JavaScript如何操作摄像头与麦克风？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543939.html
微信扫一扫 
支付宝扫一扫 
