How to use Html5 to realize face recognition

This article mainly explains "how to use Html5 to achieve face recognition function", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use Html5 to achieve face recognition.

Demand

Mixed App development, native shell + webApp, call the native camera function in the web section and display the camera content in the specified area of the web page. At the same time, you can manually take photos and perform face recognition to display the recognition results on the web page.

Technology stack

Vue, Html5, video tags, Android, IOS, Baidu AI

Analysis.

1. Use navigator.mediaDevices.getUserMedia to call the native camera function of the system

2. The video tag displays the camera content.

3. Get the picture with canvas tag.

4. Upload the image to the server and identify the picture through Baidu AI

5. Web displays the recognition result

Core code

1. Call the native camera feature of the system and use the video tag to display html:

JavaScript:

InitVideo () {let that = this; this.video = document.getElementById ("webcam") SetTimeout (() = > {if (navigator.mediaDevices.getUserMedia | | navigator.getUserMedia | | navigator.webkitGetUserMedia | | navigator.mozGetUserMedia) {/ / call the user's media device to access the camera this.getUserMedia ({video: {width: {ideal: that.videoWidth) Max: that.videoWidth}, height: {ideal: that.videoHeight, max: that.videoHeight}, facingMode: "user", / / Front camera frameRate: {ideal: 30 Min: 10}, this.videoSuccess, this.videoError) } else {this.$toast.center ("camera failed to open, please check permission settings!");}, getUserMedia (constraints, success, error) {if (navigator.mediaDevices.getUserMedia) {/ / the latest standard API navigator.mediaDevices.getUserMedia (constraints) .then (success) .catch (error) } else if (navigator.webkitGetUserMedia) {/ / webkit core browser navigator.webkitGetUserMedia (constraints, success, error);} else if (navigator.mozGetUserMedia) {/ / firfox browser navigator.mozGetUserMedia (constraints, success, error);} else if (navigator.getUserMedia) {/ / Old API navigator.getUserMedia (constraints, success, error) }, videoSuccess (stream) {this.mediaStreamTrack = stream; this.video.srcObject = stream; this.video.play ();}, videoError (error) {console.error (error); this.$toast.center ("camera failed to open, please check permission settings!");}

2. Canvas acquires camera images

JavaScript:

This.canvas = document.createElement ("canvas"); Let context = this.canvas.getContext ("2d"); context.drawImage (this.video, 0,0, this.videoWidth, this.videoHeight); this.imgSrc = this.canvas.toDataURL ("image/png")

3. Call Baidu AI to identify pictures

JavaScript:

Let that = this; let base64Data = this.canvas.toDataURL (); let blob = this.dataURItoBlob (base64Data); / / var file = new FormData (); file.append ("file", blob); file.append ("key", that.uuid) Util.ajax .post ("XXXXXXXXXX", file, {headers: {"Content-Type": "multipart/form-data"}}) .then (function (response) {if ((response.status = 200)) {. The recognition is successful and the result} else {. Identify failure}}) .catch (function (error) {console.error (error);}); / / convert base64 to Blob dataURItoBlob (base64Data) {var byteString; if (base64Data.split (",") [0] .indexOf ("base64") > = 0) byteString = atob (base64Data.split (",") [1]) Else byteString = unescape (base64Data.split (",") [1]); var mimeString = base64Data.split (",") [0] .split (":") [1] .split (";") [0]; var ia = new Uint8Array (byteString.length); for (var I = 0; I < byteString.length; ionization +) {ia [I] = byteString.charCodeAt (I) } return new Blob ([ia], {type: mimeString});}

Mobile phone adaptation

1. Since the permission management of Android has changed after Android6, the native shell of Android needs to be handled as follows:

MyWebView.setWebChromeClient (new WebChromeClient () {@ TargetApi (Build.VERSION_CODES.LOLLIPOP) @ Override public void onPermissionRequest (final PermissionRequest request) {request.grant (request.getResources ());}})

2. IOS system, available after Safari11

3. OverconstrainedError error. Some Android phones will report OverconstrainedError error because the camera parameters are not set properly and the specified setting cannot be found.

At this point, I believe you have a deeper understanding of "how to use Html5 to achieve face recognition". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!