vue2+tracking实现PC端的人脸识别示例

目录

• 需求
• 分析
• 实现思路
• 使用 tracking.js
• 最后

总是会有一些奇奇怪怪的需求无法避免。记录一下曾经项目遇到的一个需求。

需求

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

分析

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

• 调用本地摄像头
• 然后可以进行拍照
• 因为是患者的真实头像，方便辨认，要求要拍到患者脸部
• 检测到患者脸部，自动截图，医生只需要点击上传即可

实现思路

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

基于上面的思路，开始寻找，最后确定使用 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端的人脸识别示例的文章就介绍到这了,更多相关vue2 tracking PC端的人脸识别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！