vue2+tracking怎么实现PC端的人脸识别

本篇内容介绍了"vue2+tracking怎么实现PC端的人脸识别"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

需求

上传患者真实头像，可以有两种选择，一种是通过常规的文件选择方式上传，第二种方式就是医生可以调用电脑的摄像头拍一张然后上传。

分析

常规的就不用分析了，只分析第二种：

• 调用本地摄像头

• 然后可以进行拍照

• 因为是患者的真实头像，方便辨认，要求要拍到患者脸部

• 检测到患者脸部，自动截图，医生只需要点击上传即可

实现思路

首先看有不有能识别到患者脸部的前端第三方库，如果没有，这个需求就相对来说就麻烦一点，就是在拍照的时候需要医生辨别能否达到上传的要求，然后再拍照上传也行。

基于上面的思路，开始寻找，最后确定使用 tracking.js 它的 github 地址

使用 tracking.js

• 安装：yarn add tracking

• 使用，用一个测试 demo 来展示：

src/components/TestFace.vue

src/utils/utils.js

export let userMedia = function (constraints, success, error) {  if (navigator.mediaDevices.getUserMedia) {    userMedia = function (constraints, success, error) {      navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error)    }  } else if (navigator.webkitGetUserMedia) {    userMedia = function (constraints, success, error) {      navigator.webkitGetUserMedia(constraints, success, error)    }  } else if (navigator.mozGetUserMedia) {    userMedia = function (constraints, success, error) {      navigator.mozGetUserMedia(constraints, success, error)    }  } else if (navigator.getUserMedia) {    userMedia = function (constraints, success, error) {      navigator.getUserMedia(constraints, success, error)    }  }  userMedia(constraints, success, error)}

最终的效果如下：

最后

首先确保有摄像头

有时候本地调试无法打开摄像头，可以在浏览器上输入：chrome://flags/#unsafely-treat-insecure-origin-as-secure

然后会出现如下页面，再操作即可：

"vue2+tracking怎么实现PC端的人脸识别"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！