怎么使用HTML5中GetUserMedia接口调用系统摄像头并实现网页实时拍照功能-H5教程-PHP中文网

纯原生html5+javascript即可实现网页实时拍照：1.用getusermedia获取摄像头流并赋给video.srcobject；2.使video与canvas尺寸及宽高比一致；3.用drawimage捕获帧，todataurl导出jpeg图片；4.需https环境、处理移动端playsinline等兼容性问题。

怎么使用html5中getusermedia接口调用系统摄像头并实现网页实时拍照功能

使用 getUserMedia 获取摄像头权限并实现网页实时拍照，核心是获取视频流、渲染到 <video></video> 标签，再用 <canvas></canvas> 捕获当前帧并导出为图片。整个过程不依赖第三方库，纯原生 HTML5 + JavaScript 即可完成。

1. 请求摄像头权限并播放视频流

调用 navigator.mediaDevices.getUserMedia() 获取用户授权，指定 { video: true } 即可。成功后将媒体流赋给 <video></video> 元素的 srcObject 属性（注意：不是 src）：

示例代码：

const video = document.getElementById('video');
async function initCamera() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    video.srcObject = stream;
  } catch (err) {
    console.error('无法访问摄像头：', err.message);
  }
}
initCamera();

2. 设置视频显示区域与画布尺寸对齐

为保证拍照清晰，<video></video> 和后续使用的 <canvas></canvas> 应保持相同宽高比（推荐 16:9 或 4:3），且 canvas 宽高最好设为实际分辨率（如 1280×720），避免缩放失真：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

可通过 video.videoWidth / video.videoHeight 动态读取真实分辨率
设置 canvas.width 和 canvas.height 后再绘制，否则会拉伸或模糊
建议给 <video></video> 加 autoplay 和 muted 属性（部分浏览器要求静音才能自动播放）

3. 拍照并导出为图片

点击拍照时，用 canvas.getContext('2d').drawImage() 把视频当前帧画到 canvas 上，再调用 canvas.toDataURL('image/jpeg') 获取 base64 图片数据：

关键步骤：

确保视频已加载并播放（监听 video 的 loadeddata 或 play 事件）
使用 drawImage(video, 0, 0, canvas.width, canvas.height) 绘制全帧
可传入第 5~8 个参数裁剪/缩放特定区域（如居中截取正方形）
导出时指定质量（toDataURL('image/jpeg', 0.9)），0.1~1.0 之间

简单拍照函数示例：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function takePhoto() {
  if (!video.srcObject) return;
  // 同步 canvas 尺寸到视频实际分辨率
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  const dataUrl = canvas.toDataURL('image/jpeg', 0.95);
  
  // 显示预览或下载
  const img = document.getElementById('photo');
  img.src = dataUrl;
}