JavaScript调用摄像头和麦克风必须满足三条件：HTTPS或localhost安全上下文、用户手势触发、用户明确授权；调用getUserMedia()需错误处理，支持设备选择与权限检测，移动端需注意Safari的playsinline等兼容性限制。
在 JavaScript 中操作摄像头和麦克风，核心是使用 MediaDevices.getUserMedia() API，但它必须满足明确的权限与环境要求，否则会直接失败或被浏览器拦截。
必须满足的基础权限条件
浏览器不会无条件授予音视频访问权限，以下三点缺一不可：
-
页面运行在安全上下文（Secure Context）中：即协议必须是 https:// 或 localhost（含 127.0.0.1）。HTTP 协议下调用
getUserMedia会被静默拒绝（Chrome、Edge 等现代浏览器）。 -
用户主动触发（user gesture）：调用必须发生在用户交互事件内，例如
click、tap、keydown（且有按键输入），不能在页面加载、定时器或异步回调中直接发起。 -
用户明确授权：首次使用时，浏览器会弹出权限提示框，用户必须点击“允许”。若用户点“拒绝”或“阻止”，后续调用会抛出
NotAllowedError；可前往浏览器地址栏点击锁形图标手动重置权限。
基础调用方式与常见配置
正确调用示例（带错误处理）：
async function startCameraAndMic() {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: { width: 1280, height: 720 }, // 启用摄像头，可指定分辨率
audio: true // 启用麦克风
});
const video = document.getElementById('video');
video.srcObject = stream; // 直接赋值给 <video> 元素
} catch (err) {
console.error('获取媒体流失败:', err.name, err.message);
// 常见错误：NotAllowedError（拒绝）、NotFoundError（无设备）、NotReadableError（设备被占用）
}
}
注意：video: true 表示启用默认摄像头；如需更高控制力（如选择特定设备），应先用 navigator.mediaDevices.enumerateDevices() 获取设备列表，再传入 deviceId。
立即学习“Java免费学习笔记（深入）”；
权限状态检测与动态请求
可通过 navigator.permissions.query() 预判当前权限状态，避免重复弹窗或无效调用：
-
{ name: 'camera' }检查摄像头权限 -
{ name: 'microphone' }检查麦克风权限 - 返回状态包括
'granted'、'denied'、'prompt'
但注意：该 API 在非安全上下文或未触发过用户手势时可能返回 undefined 或受限结果，不能完全替代实际调用。
移动端与兼容性注意事项
部分 Android 或 iOS 浏览器存在额外限制：
- iOS Safari 要求
<video></video>元素添加playsinline属性，否则全屏播放无法自动播放音频； - 某些安卓 WebView（如微信内置浏览器）可能不支持
getUserMedia，或仅支持音频； - 旧版浏览器（如 IE）完全不支持，需用
MediaStreamTrack.getSources()（已废弃）等降级方案，但现代项目建议直接忽略 IE。
