怎样实现h5摄像头

调用摄像头权限

在H5中调用摄像头需要使用getUserMedia API，需确保用户授权访问摄像头。现代浏览器（如Chrome、Firefox、Edge）支持该API，但需通过HTTPS协议或本地环境（如localhost）运行。

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    const videoElement = document.getElementById('video');
    videoElement.srcObject = stream;
  })
  .catch(error => console.error('摄像头访问失败:', error));

显示摄像头画面

将摄像头流绑定到<video>标签即可实时显示画面。需在HTML中预留视频容器，并通过CSS控制显示尺寸。

<video id="video" autoplay playsinline></video>
<style>
  #video { width: 640px; height: 480px; }
</style>

拍照功能实现

通过<canvas>捕获当前视频帧并转换为图像。使用drawImage将视频画面绘制到画布，再通过toDataURL导出为Base64格式。

document.getElementById('capture').addEventListener('click', () => {
  const canvas = document.createElement('canvas');
  const video = document.getElementById('video');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0);
  const imageData = canvas.toDataURL('image/png');
  console.log(imageData); // 可上传或保存
});

兼容性处理

部分旧版浏览器需添加前缀或使用Polyfill。检测mediaDevices是否存在，并回退到旧API。

const getUserMedia = navigator.mediaDevices?.getUserMedia 
  || navigator.webkitGetUserMedia 
  || navigator.mozGetUserMedia;
if (!getUserMedia) alert('浏览器不支持摄像头功能');

安全与权限提示

用户首次访问时需主动授权，若拒绝需引导手动开启权限。可通过Permissions API查询当前权限状态。

navigator.permissions.query({ name: 'camera' })
  .then(status => {
    if (status.state === 'denied') alert('请在浏览器设置中启用摄像头权限');
  });

移动端适配

移动设备需添加playsinline属性防止全屏播放，并处理横竖屏切换时的画面拉伸问题。建议使用响应式布局适应不同屏幕尺寸。

<video id="video" autoplay playsinline webkit-playsinline></video>