vue2+tracking实现PC端的人脸识别示例
总是会有一些奇奇怪怪的需求无法避免。记录一下曾经项目遇到的一个需求。
需求
上传患者真实头像,可以有两种选择,一种是通过常规的文件选择方式上传,第二种方式就是医生可以调用电脑的摄像头拍一张然后上传。
分析
常规的就不用分析了,只分析第二种:
- 调用本地摄像头
- 然后可以进行拍照
- 因为是患者的真实头像,方便辨认,要求要拍到患者脸部
- 检测到患者脸部,自动截图,医生只需要点击上传即可
实现思路
首先看有不有能识别到患者脸部的前端第三方库,如果没有,这个需求就相对来说就麻烦一点,就是在拍照的时候需要医生辨别能否达到上传的要求,然后再拍照上传也行。
基于上面的思路,开始寻找,最后确定使用 tracking.js 它的 github 地址
使用 tracking.js
- 安装:
yarn add tracking
- 使用,用一个测试 demo 来展示:
src/components/TestFace.vue
<template> <div> <div> <p>请将摄像头对准患者脸部</p> <video id="video" style="transform:rotateY(180deg)" autoplay></video> </div> <div> <p>检测人脸结果</p> <canvas id="canvas" width="200" height="200" style="transform:rotateY(180deg)"></canvas> </div> </div> </template> <script> import { userMedia } from '../utils/utils' require('tracking/build/tracking-min.js') require('tracking/build/data/face-min.js') export default { data () { return { videoObj: null, trackerTask: null } }, mounted () { this.openCamera() }, methods: { openCamera () { // 有可能触发一些其他的按钮会重新获取 this.$nextTick(() => { const canvas = document.getElementById('canvas') const context = canvas.getContext('2d') this.videoObj = document.getElementById('video') // eslint-disable-next-line no-undef const tracker = new tracking.ObjectTracker('face') // 检测人脸 tracker.setInitialScale(4) tracker.setStepSize(2) tracker.setEdgesDensity(0.1) // eslint-disable-next-line no-undef this.trackerTask = tracking.track('#video', tracker, { camera: true }) const constraints = { video: { width: 200, height: 200 }, audio: false } userMedia(constraints, this.success, this.error) tracker.on('track', (event) => { event.data.forEach((rect) => { // 绘制到 canvas context.drawImage(this.videoObj, 0, 0, canvas.width, canvas.height) context.font = '16px Helvetica' context.strokeStyle = '#1890ff' context.strokeRect(rect.x, rect.y, rect.width, rect.height) }) if (event.data.length !== 0) { // 说明检测到人脸了,此时就可以截取图片传递给后端 // canvas 调用 toDataURL } }) }) }, handleCancel () { this.videoObj.srcObject.getTracks()[0].stop() this.trackerTask.stop() }, // 成功显示 success (stream) { this.videoObj.srcObject = stream this.videoObj.play() }, // 失败抛出错误,可能用户电脑没有摄像头,或者摄像头权限没有打开 error (error) { // 可以在这里面提示用户 console.log(`访问用户媒体设备失败${error.name}, ${error.message}`) } }, beforeDestroy () { this.handleCancel() } } </script>
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端的人脸识别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue项目打包成exe可执行文件的实现过程(无瑕疵,完美版)
突然接到公司需求,说客户想让我们把项目直接打包,所以下面这篇文章主要给大家介绍了关于Vue项目打包成exe可执行文件的实现过程,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-11-11Vue3 中 watch 与 watchEffect 区别及用法小结
这篇文章主要介绍了Vue3 中 watch 与 watchEffect 有什么区别?watch中需要指明监视的属性,也需要指明监视的回调,而watchEffect中不需要指明监视的属性,只需要指明监视的回调,回调函数中用到哪个属性,就监视哪个属性,本文给大家详细介绍,需要的朋友参考下2022-06-06
最新评论