简单的人脸识别（video+canvas）

  <video v-show="isVideo" id="video" autoplay playsinline webkit-playsinline="true"
            style="transform: rotate(-90deg);width:266px;height:199px;position: absolute;top:0;right:-33px;z-index: 10;"></video>
        <canvas style="display: none;position: absolute;top:0;right:-33px;;z-index: 12;transform: rotate(-90deg);"
            width="300" height="300" id="canvasCamera"></canvas>

使用的是常见的video+canvas方法。创建dom元素，绑定ID，

js部分就是获取设备的摄像头并和dom部分的元素绑定，

//打开摄像头
const startCamera = () => {
    try {
        navigator.mediaDevices.getUserMedia({ video: { width: 266, height: 199 } })
            .then((stream) => {
                video = document.querySelector('video')
                canvas = document.querySelector('canvas')
                var _context2d = canvas.getContext("2d");
                MediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[0];
                video.srcObject = stream;
                video.onloadedmetadata = function (e) {
                    video.play();
                };
                //延时截取画面
                setTimeout(() => {
                    btnTakePhotoClicked(_context2d, canvas, video)
                }, 1000)
            })
            .catch(function (err) {
                console.log("Error accessing camera: " + err);
            });

    } catch (error) {
        console.log(error);
    }
}

上面这一步就是点击打开按钮，就有画面了，切记若是开发环境调试，需要将开发的IP地址添加到浏览器的可信任网址当中。不然无法打开设备的摄像头。还有就是video元素不能使用v-if控制显示隐藏,会导致不知名错误。

//打开摄像头 截取画面
const btnTakePhotoClicked = (_context2d, canvas, video) => {
    _context2d.drawImage(video, 0, 0, 300, 300)
    var img = document.createElement("img"); // 创建img元素
    img.src = canvas.toDataURL("image/png"); // 截取视频第一帧
    base64ToFile(img.src, 'image')
}

这部分是对开启的摄像进行截图获取照片 里面的base64ToFile 是将base64 转化为file 文件传参给后端 在这里找到的方法。Uncaught DONException: Failed to execute ‘atob‘ on “window ‘: The string to be decoded is not carrec..._hello芳芳的博客-CSDN博客

 之后就是将处理好的图片 传给后端进行人脸识别，后端使用的是阿里的API。