首先检查浏览器是否支持MediaDevices API，若支持则通过getUserMedia()调用摄像头并绑定到video标签实时播放；接着利用canvas捕获视频帧并转为base64图片实现拍照；还可通过设置facingMode、分辨率等参数控制摄像头类型与质量；注意需在HTTPS或localhost环境下运行，并处理用户授权拒绝情况。
HTML5 提供了强大的媒体捕获功能，可以通过 MediaDevices.getUserMedia() API 调用摄像头，实现拍照、录像或实时视频流展示。下面详细介绍如何使用 HTML5 摄像头 API 实现基本功能。
1. 检查浏览器是否支持摄像头调用
不是所有浏览器都支持摄像头访问，调用前需要先检测兼容性。
navigator.mediaDevices 是关键对象，如果存在，说明支持该 API。
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { // 支持摄像头} else { alert("您的浏览器不支持摄像头访问");}
2. 调用摄像头显示实时视频
使用 getUserMedia() 获取视频流，并绑定到 标签进行播放。
示例代码：
立即学习“前端免费学习笔记（深入）”；
const video = document.getElementById('video');navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => { video.srcObject = stream; }) .catch(err => { console.error("无法访问摄像头：", err); });
对应的 HTML 结构：
注意： 必须添加 autoplay 属性，否则视频不会自动播放；加上 muted 可避免自动播放被浏览器阻止。
3. 拍照并保存图像
通过 canvas> 捕获当前视频帧，转换为图片数据。
步骤如下：
创建一个 canvas 元素 将视频当前画面绘制到 canvas 导出为图片（如 base64 格式）
示例代码：
立即学习“前端免费学习笔记（深入）”；
const video = document.getElementById('video');const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');// 拍照按钮点击事件document.getElementById('snap').addEventListener('click', () => { // 设置 canvas 尺寸与视频一致 canvas.width = video.videoWidth; canvas.height = video.videoHeight; // 绘制当前帧 ctx.drawImage(video, 0, 0); // 导出图片（base64） const dataUrl = canvas.toDataURL('image/png'); console.log(dataUrl); // 可用于显示或上传});
4. 高级设置：指定摄像头和分辨率
可以限制调用特定摄像头（前置/后置）或设定分辨率。
例如：优先使用后置摄像头，并设置最小分辨率
navigator.mediaDevices.getUserMedia({ video: { width: { min: 1280 }, height: { min: 720 }, facingMode: "environment" // 后置摄像头 // facingMode: "user" 表示前置 }}).then(stream => { video.srcObject = stream;}).catch(err => { console.error("摄像头设置失败：", err);});
常见约束参数：
width / height：分辨率要求 facingMode：”user”（前置）、”environment”（后置） frameRate：帧率控制
基本上就这些。只要用户授权，就能顺利调用摄像头。注意页面必须运行在 HTTPS 或本地环境（localhost），否则浏览器会禁止访问摄像头。实际使用中记得处理用户拒绝权限的情况，提升体验。不复杂但容易忽略细节。
以上就是HTML5怎么调用摄像头_HTML5摄像头API使用教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588697.html
微信扫一扫 
支付宝扫一扫 
