JavaScript通过MediaDevices.getUserMedia()获取摄像头权限并获取视频流，需在HTTPS或localhost安全上下文中调用；成功后将MediaStream赋给video.srcObject实时显示；不再使用时应遍历track.stop()释放资源；需捕获NotAllowedError、NotFoundError等错误并提示用户。
JavaScript 通过 MediaDevices.getUserMedia() API 获取用户授权并访问摄像头（和麦克风），这是 Web 实现实时音视频采集的核心接口。关键在于正确请求权限、处理媒体流、绑定到 HTML 元素显示，并妥善管理生命周期。
获取摄像头权限并获取视频流
调用 navigator.mediaDevices.getUserMedia()，传入约束对象指定需要视频（可选音频）。该方法返回 Promise，成功后得到 MediaStream 对象：
- 只启用摄像头：
{ video: true } - 同时启用摄像头和麦克风：
{ video: true, audio: true } - 指定分辨率等高级约束（如
{ video: { width: { ideal: 1280 }, height: { ideal: 720 } } }）
注意：必须在安全上下文（https:// 或 localhost）中运行，否则浏览器会拒绝调用。
将视频流显示在页面上
拿到 MediaStream 后，赋值给 <video></video> 元素的 srcObject 属性即可实时播放：
立即学习“Java免费学习笔记（深入）”；
const video = document.getElementById('myVideo');
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
video.srcObject = stream;
})
.catch(err => {
console.error('访问摄像头失败:', err.name, err.message);
});
无需再用 URL.createObjectURL()（旧写法已废弃），现代浏览器直接支持 srcObject。
停止摄像头（释放资源）
不再需要视频流时，应主动停止所有轨道，避免持续占用摄像头、耗电或影响其他应用：
- 遍历
stream.getTracks()，对每个MediaStreamTrack调用.stop() - 常见做法：
stream.getTracks().forEach(track => track.stop()); - 也可设
video.srcObject = null，但不释放底层设备，推荐显式 stop
例如在组件卸载、切换页面或用户点击“关闭摄像头”时执行。
处理常见错误与兼容性
用户拒绝权限、设备不可用、不支持 HTTPS 等都会触发 Promise reject。常见错误类型包括：
-
NotAllowedError：用户点击了“拒绝”或浏览器自动阻止（如 iframe 无用户手势） -
NotFoundError：未检测到可用摄像头 -
NotReadableError：摄像头被其他程序占用 -
SecurityError：非安全上下文（HTTP 非 localhost）
建议在 catch 中根据 err.name 给出明确提示，并引导用户检查设置或刷新页面。
