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

2023-06-09 18:11| 来源: 网络整理| 查看: 265

使用的是常见的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。

【本文地址】

公司简介

联系我们