Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to realize face recognition on PC by vue2+tracking". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Demand

There are two options for uploading a patient's real profile picture, one is to upload it through the regular file selection, and the other is that the doctor can use the computer's camera to take a picture and upload it.

Analysis.

The conventional one does not need to be analyzed, but only the second one:

Call the local camera

Then you can take pictures.

Because it is a real profile picture of the patient, it is easy to identify and requires a picture of the patient's face.

The patient's face is detected and the screenshot is taken automatically. The doctor only needs to click upload.

Realization idea

First of all, let's see if there is a front-end third-party database that can recognize the patient's face. if not, this requirement is relatively troublesome, that is, doctors are required to determine whether they can meet the upload requirements when taking photos, and then take photos and upload them.

Based on the above idea, start looking, and finally determine the github address that uses tracking.js.

Use tracking.js

Installation: yarn add tracking

Use, using a test demo to demonstrate:

Src/components/TestFace.vue

Please aim the camera at the patient's face.

Detection of face results

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 () {/ / it is possible to trigger some other buttons to retrieve 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') / / detect human 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,200}, audio: false} userMedia (constraints, this.success, this.error) tracker.on ('track', (event) = > {event.data.forEach ((rect) = > {/ / draw to 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) {/ / indicates that a face has been detected At this point, you can intercept the image and pass it to the backend / / canvas call toDataURL}})}, handleCancel () {this.videoObj.srcObject.getTracks () [0] .stop () this.trackerTask.stop ()}, / / successfully display success (stream) {this.videoObj.srcObject = stream this.videoObj.play ()} / / failed to throw an error Maybe the user's computer does not have a camera, or the camera does not have permission to open error (error) {/ / you can prompt the user console.log (`failed to access the user's media device ${error.name}, ${error.message} `)}}, beforeDestroy () {this.handleCancel ()}}

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)}

The final effect is as follows:

Last

First of all, make sure there are cameras.

Sometimes local debugging can not turn on the camera, you can enter: chrome://flags/#unsafely-treat-insecure-origin-as-secure on the browser

Then the following page appears, and then you can do it:

This is the end of the content of "how to realize face recognition on PC with vue2+tracking". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.