HTML5网页如何调用手机摄像头 HTML5网页获取用户媒体的完整指南 苏承栈 2026-09-24 • 👁 0人浏览过 首先通过navigator.mediaDevices.getUserMedia()请求摄像头权限并显示画面，需在HTTPS或localhost环境下运行；接着利用截取视频帧实现拍照并保存为图片；然后通过facingMode控制前后摄像头切换，支持"user"和"environment"模式；最后处理兼容性问题，确保浏览器支持并捕获错误提示用户。 在现代 浏览器 中，HTML5 提供了 MediaDevices.getUserMedia() API，允许网页直接调用手机或电脑的摄像头和麦克风。只要用户授权，就可以实现拍照、录像、扫码等常见功能。下面是一份完整的指南，教你如何在 HTML5 网页中调用手机摄像头。 1. 请求摄像头权限并显示画面 使用 navigator.mediaDevices.getUserMedia() 方法可以请求访问摄像头。你需要创建一个 标签来实时显示摄像头画面。 示例代码： 复制 注意： 必须在 HTTPS 或本地开发环境（localhost）下运行，否则浏览器会阻止摄像头访问。 立即学习 “ 前端免费学习笔记（深入） ”； 2. 拍照并保存图像 通过 可以从视频流中截取当前帧，生成图片。 添加一个拍照按钮和 canvas 元素： 复制 拍照 下载照片 JavaScript 实现拍照逻辑： Comet AI 浏览器 下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。 下载 复制 const captureBtn = document.getElementById('capture'); const canvas = document.getElementById('canvas'); const downloadLink = document.getElementById('download'); const context = canvas.getContext('2d'); captureBtn.addEventListener('click', () => { // 设置画布尺寸与视频一致 canvas.width = video.videoWidth; canvas.height = video.videoHeight;// 绘制当前帧 context.drawImage(video, 0, 0, canvas.width, canvas.height);// 将图像导出为 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）、正确设置媒体约束，并做好用户引导。 ‹ 上一篇 JS实现黑色风格的网页TAB选项卡效果代码_javascript技巧 下一篇 Photoshop设计漂亮创意的3D立体艺术字教程 ›
