如何在HTML/JS摄像头检测页集成拍照生成图片DataURL功能

集成步骤 #

• 首先将你编写的拍照相关DOM结构，插入到原有页面中摄像头video标签的同级位置，注意不要修改原有video标签的id、属性，避免影响原有摄像头检测、切换逻辑，参考结构如下：

<!-- 保留原有<video id="xxx"></video>标签不动，在其下方新增 -->
<button id="captureBtn" type="button">拍照</button>
<canvas id="captureCanvas" style="display:none;"></canvas>
<div class="dataurl-wrap">
  <p>捕获图片Data URL：</p>
  <textarea id="dataUrlOutput" readonly rows="8" style="width:100%;resize:vertical;"></textarea>
</div>

• JS逻辑不要直接丢在全局作用域，找到原有代码中摄像头初始化/切换成功的回调函数位置（也就是原有代码拿到媒体流、把流赋值给video.srcObject的代码段后面），插入以下逻辑，注意直接复用原有代码中已经定义的video元素引用、当前媒体流变量，不要重复声明、重复申请摄像头权限：

// 以下变量名如果和你自己写的DOM id一致可以不用改
const captureBtn = document.getElementById('captureBtn');
const captureCanvas = document.getElementById('captureCanvas');
const dataUrlOutput = document.getElementById('dataUrlOutput');
const canvasCtx = captureCanvas.getContext('2d');

captureBtn.addEventListener('click', () => {
  // 校验摄像头是否正常启动
  if (videoEl.readyState < 2 || !currentStream) {
    alert('摄像头未就绪，请稍后再试');
    return;
  }
  // 同步canvas分辨率和当前视频实际分辨率，避免截图拉伸、黑边
  captureCanvas.width = videoEl.videoWidth;
  captureCanvas.height = videoEl.videoHeight;
  // 绘制当前视频帧
  canvasCtx.drawImage(videoEl, 0, 0, captureCanvas.width, captureCanvas.height);
  // 生成Data URL并写入只读文本框
  dataUrlOutput.value = captureCanvas.toDataURL('image/png');
});

如果你需要输出jpeg格式的图片，可以把toDataURL的参数改成'image/jpeg'，同时传入第二个0-1之间的数值控制图片质量，比如captureCanvas.toDataURL('image/jpeg', 0.8)就是输出80%质量的jpeg图片。
注意：代码中videoEl是原有代码里video标签的DOM引用变量名，currentStream是原有代码里存储当前激活摄像头媒体流的变量名，如果你的原有代码里这两个变量名不一样，直接替换成你项目里的对应变量名即可。

常见集成失败排查点 #

• 作用域报错：如果原有代码的video、stream变量是定义在initCamera之类的函数内部，就把上述拍照逻辑也放到同一个函数内部，不要放到函数外导致访问不到内部变量
• 截图黑屏：检查是不是在摄像头流还没加载完成的时候就触发了绘制，或者canvas宽高设置成了CSS宽高而非元素原生width/height属性
• toDataURL报错：本地调试不要用file://协议直接打开页面，用localhost、127.0.0.1本地服务或者HTTPS协议打开，避免浏览器安全策略限制
• 重复绑定事件：不要把拍照按钮的点击监听写到摄像头切换的回调里，否则每切换一次摄像头就会多绑定一次点击事件，导致单次点击重复生成多段Data URL

内容的提问来源于stack exchange，提问作者Nick S