前端调用摄像头实现人脸识别踩坑指南

最近需要在web端接入人脸识别功能，主要是基于navigator.mediaDevices以及canvas，这里大概总结一下。

页面布局

video标签用于动态获取摄像头内容，canvas标签用于截取视频流的每一帧图片。

<video id="video" width="100%" height="200" autoPlay>
    <track default kind="captions" srcLang="en" src="" />
    您的浏览器不支持 video 标签。
</video>
<canvas id="canvas" width="420px" height="200px" />

调用摄像头

setupCamera = () => {
    let video: any = document.getElementById('video');
    // 得到摄像头api
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: { width: 420, height: 200 } }).then(
        (stream) => {
          video.srcObject = stream;
          video.play();
        }).catch((err) => {
        console.log(`${err.name  }: ${  err.message}`);
      });
    }
}

这里需要注意的是，iframe不能直接调用摄像头，需要设置allow属性为'microphone;camera;midi;encrypted-media;'

利用canvas获取每一帧图片

此处需要把图片base64转化为blob对象，具体理论知识会在下一篇讲解。

takePhoto = () => {
    // 用于拍摄快照的元素,添加canvas里面
    const canvas: any = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    const video = document.getElementById('video');
    context.drawImage(video, 0, 0, 420, 200);
    const data = canvas.toDataURL();
    // 此处需要把图片base64转化为blob对象，具体理论知识会在下一篇讲解。
    const newblob = this.dataURItoBlob(data);
}