本文介绍如何使用 html5 的 `mediadevices` api 在 浏览器 中安全、兼容地访问移动设备摄像头，包括自动唤起原生相机、枚举所有可用音视频设备，以及处理权限与兼容性问题。
在现代 Web 应用中，无需依赖原生 App 即可直接调用移动设备摄像头——这得益于 HTML5 提供的标准化媒体设备访问能力。核心接口是 navigator.mediaDevices，它属于 MediaDevices API 的一部分，支持跨平台（Android/iOS Chrome/Safari/Firefox）获取摄像头、麦克风等硬件资源。
✅ 基础用法：直接唤起前置 / 后置摄像头
最简洁的方式是使用 getUserMedia()，浏览器会自动触发系统级相机权限请求，并在移动端优先唤起原生相机界面（如 iOS Safari 或 Android Chrome）：
⚠️ 注意事项：iOS Safari 要求：必须添加 playsinline 和 muted 属性，否则可能静音或全屏播放；HTTPS 强制要求：getUserMedia() 在非 HTTPS 环境（如 http://localhost 除外）下将被拒绝；用户手势触发：必须由用户显式操作（如点击按钮）发起，不能在页面加载时自动调用。
? 枚举所有可用媒体设备（含多摄像头识别）
若需向用户展示所有可用摄像头（例如 PC 多摄像头、手机前后双摄），应先调用 enumerateDevices() 并过滤出 kind === ‘videoinput’ 的设备：
async function listCameras() { try { // 需先获得一次权限（否则 enumerateDevices 返回空 label）await navigator.mediaDevices.getUserMedia({ video: true, audio: false}); const devices = await navigator.mediaDevices.enumerateDevices(); const cameras = devices.filter(device => device.kind === 'videoinput'); console.log('检测到摄像头：', cameras.map(c => ({label: c.label || `ID: ${c.deviceId.substring(0, 6)}……`, deviceId: c.deviceId, facing: c.getCapabilities?.().facingMode || 'unknown'}))); return cameras; } catch (err) {console.warn('枚举设备失败（可能未授权）：', err); return [];} } // 调用示例 listCameras().then(cameras => {if (cameras.length> 1) {console.log(` 发现 ${cameras.length} 个摄像头，可提供切换 UI`); } });? 提示：enumerateDevices() 返回的 label 在移动设备上通常为空（出于隐私保护），因此建议结合 getCapabilities().facingMode 判断前后置（如 “environment” / “user”），或通过 deviceId 实现记忆化切换。
? 总结与最佳实践
- ✅ 移动端首选方案：getUserMedia({video: { facingMode: ‘environment’} }) 可直接唤起系统相机，体验接近原生 App；
- ✅ PC 兼容性：配合 enumerateDevices() + 设备选择 UI，支持多摄像头切换；
- ❌ 避免陷阱：不要在无用户交互上下文中调用；不依赖 label 做设备识别；不忽略 HTTPS 要求；
- ? 兼容性参考：Chrome 53+、Firefox 36+、Safari 11+（iOS 11+）、Edge 79+ 均完整支持。
通过合理组合 getUserMedia 与 enumerateDevices，Web 应用即可实现“零安装、即点即拍”的相机功能，真正跨越 Web 与 Native 的体验边界。
