HTML5怎么调用摄像头_HTML5摄像头API使用教程-html教程-PHP中文网

HTML5怎么调用摄像头_HTML5摄像头API使用教程

蓮花仙者

发布： 2025-10-25 19:03:02

原创

701人浏览过

首先检查浏览器是否支持MediaDevices API，若支持则通过getUserMedia()调用摄像头并绑定到video标签实时播放；接着利用canvas捕获视频帧并转为base64图片实现拍照；还可通过设置facingMode、分辨率等参数控制摄像头类型与质量；注意需在HTTPS或localhost环境下运行，并处理用户授权拒绝情况。

html5怎么调用摄像头_html5摄像头api使用教程

HTML5 提供了强大的媒体捕获功能，可以通过 MediaDevices.getUserMedia() API 调用摄像头，实现拍照、录像或实时视频流展示。下面详细介绍如何使用 HTML5 摄像头 API 实现基本功能。

1. 检查浏览器是否支持摄像头调用

不是所有浏览器都支持摄像头访问，调用前需要先检测兼容性。

navigator.mediaDevices 是关键对象，如果存在，说明支持该 API。

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  // 支持摄像头
} else {
  alert("您的浏览器不支持摄像头访问");
}

登录后复制

2. 调用摄像头显示实时视频

使用 getUserMedia() 获取视频流，并绑定到 <video> 标签进行播放。

示例代码：

立即学习“前端免费学习笔记（深入）”；

const video = document.getElementById('video');

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
  })
  .catch(err => {
    console.error("无法访问摄像头：", err);
  });

登录后复制

对应的 HTML 结构：

<video id="video" autoplay muted></video>

登录后复制

注意： 必须添加 autoplay 属性，否则视频不会自动播放；加上 muted 可避免自动播放被浏览器阻止。

3. 拍照并保存图像

通过 <canvas> 捕获当前视频帧，转换为图片数据。

影像之匠PixPretty

商业级AI人像后期软件，专注于人像精修，色彩调节及批量图片编辑，支持Windows、Mac多平台使用。适用于写真、婚纱、旅拍、外景等批量修图场景。

206

查看详情

步骤如下：

创建一个 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);
});

登录后复制

常见约束参数：