首先通过navigator.mediaDevices.getUserMedia()请求摄像头权限并显示画面，需在HTTPS或localhost环境下运行；接着利用<canvas>截取视频帧实现拍照并保存为图片；然后通过facingMode控制前后摄像头切换，支持"user"和"environment"模式；最后处理兼容性问题，确保浏览器支持并捕获错误提示用户。
在现代浏览器中，HTML5 提供了 MediaDevices.getUserMedia() API，允许网页直接调用手机或电脑的摄像头和麦克风。只要用户授权，就可以实现拍照、录像、扫码等常见功能。下面是一份完整的指南，教你如何在 HTML5 网页中调用手机摄像头。
1. 请求摄像头权限并显示画面
使用 navigator.mediaDevices.getUserMedia() 方法可以请求访问摄像头。你需要创建一个 <video> 标签来实时显示摄像头画面。
示例代码：
<video id="video" autoplay playsinline></video>
<script>
const video = document.getElementById('video');
<p>async function startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: false // 手机网页通常不需要录音
});
video.srcObject = stream;
} catch (err) {
console.error("无法访问摄像头：", err);
}
}</p><p>startCamera();
</script>
注意：必须在 HTTPS 或本地开发环境（localhost）下运行，否则浏览器会阻止摄像头访问。
立即学习“前端免费学习笔记（深入）”；
2. 拍照并保存图像
通过 <canvas> 可以从视频流中截取当前帧，生成图片。
添加一个拍照按钮和 canvas 元素：
<button id="capture">拍照</button> <canvas id="canvas" style="display:none;"></canvas> <a id="download" style="display:block; text-align:center;">下载照片</a>
JavaScript 实现拍照逻辑：
const captureBtn = document.getElementById('capture');
const canvas = document.getElementById('canvas');
const downloadLink = document.getElementById('download');
const context = canvas.getContext('2d');
<p>captureBtn.addEventListener('click', () => {
// 设置画布尺寸与视频一致
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;</p><p>// 绘制当前帧
context.drawImage(video, 0, 0, canvas.width, canvas.height);</p><p>// 将图像导出为 data URL
const imageData = canvas.toDataURL('image/jpeg');
downloadLink.href = imageData;
downloadLink.download = 'photo.jpg';
downloadLink.textContent = "点击下载照片";
});
3. 控制前后摄像头（手机双摄切换）
在手机上，默认可能打开前置摄像头。你可以通过指定 facingMode 来选择摄像头。
可选值包括：
- "user"：前置摄像头
- "environment"：后置摄像头
示例：
const constraints = {
video: {
facingMode: "environment" // 强制使用后置摄像头
}
};
await navigator.mediaDevices.getUserMedia(constraints);
如果想让用户切换摄像头，可以尝试枚举设备：
async function getCameras() {
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(device => device.kind === 'videoinput');
return videoDevices;
}
然后根据设备 ID 调用特定摄像头。
4. 处理兼容性和错误
不同浏览器和手机系统支持程度略有差异，建议做以下处理：
- 检查 navigator.mediaDevices 是否存在
- 捕获 getUserMedia 的异常（如用户拒绝权限）
- 提示用户使用 Chrome、Safari 或其他现代浏览器
- Safari 需要添加 playsinline 属性防止全屏播放
兼容性判断示例：
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
alert("你的浏览器不支持摄像头调用");
return;
}
基本上就这些。只要遵循规范，在移动端也能流畅调用摄像头实现拍照功能。关键是确保安全上下文（HTTPS）、正确设置媒体约束，并做好用户引导。
