Shulou(Shulou.com)06/01 Report--

Editor to share with you how to achieve face recognition authentication based on HTML5. I hope you will get something after reading this article. Let's discuss it together.

In recent years, there have been many applications of face recognition technology in the field of identity authentication, such as Alipay, withdrawal of China Merchants Bank, pension, etc., but in the elimination of counterfeiting, authentication security and so on, at present, it is still a problem that needs to be further solved, especially in the living authentication technology of the mobile terminal.

This paper introduces that clmtrackr.js detection tool can be used in HTML5 environment, combined with face model to realize face tracking and detection. At the same time, action recognition is used to realize living authentication.

However, this scheme can only be used in Firefox or Chrome. And it is only suitable for research and learning, it is not ideal in the actual scene, and it needs to be further optimized before it can be applied.

# Container {

Position: relative

}

# canvas {

Location: absolutely

Left: 0

Maximum: 0

}

Your browser does not support audio tags.

Your browser does not support video tags

"take pictures."

Start

Display

Do not show

Open your mouth to verify

Shake the head to verify

Blink verification

Var showpos = false

/ / put the event listener in place

/ / window.addEventListener ("DOMContentLoaded", function () {

/ / grab elements, create settings, etc.

Var canvas = document.getElementById ("canvas")

Context = canvas.getContext ("2d")

Video = document.getElementById ("video")

VideoObj = {"video": true}

ErrBack = function (error) {

If (error.PERMISSION_DENIED) {

JAlert ('user denied browser permission to request media', 'prompt')

} otherwise, if (error.NOT_SUPPORTED_ERROR) {

JAlert ('Sorry, your browser does not support photo function, please use other browsers', 'prompt')

} otherwise, if (error.MANDATORY_UNSATISFIED_ERROR) {

JAlert ('no media stream was received for the specified media type', 'prompt')

} other {

JAlert ('system reset to get the camera, please make sure the camera is installed correctly. Or try to refresh the page, try again', 'prompt')

}

}

/ / put the video monitor in place

If (navigator.getUserMedia) {/ / Standard

Navigator.getUserMedia (videoObj, function (stream) {

Video.src = stream

Video.play ()

}, errBack)

} else if (navigator.webkitGetUserMedia) {/ / WebKit prefix

Try {

Navigator.webkitGetUserMedia (videoObj, function (stream) {

Video.src = window.webkitURL.createObjectURL (stream)

Video.play ()

}, errBack)

} capture (error) {

Alarm (error)

}

}

Else if (navigator.mozGetUserMedia) {/ / Firefox prefix

Navigator.mozGetUserMedia (videoObj, function (stream) {

Video.src = window.URL.createObjectURL (stream)

Video.play ()

}, errBack)

}

/ / trigger photo shooting

Document.getElementById ("snap") .addEventListener ("click", function () {

Context.drawImage (video,0,0600400)

})

Document.getElementById ("start") .addEventListener ("click", function () {

StartTrack ()

})

Document.getElementById ("showposition") .addEventListener ("click", function () {

Showpos = true

})

Document.getElementById ("hideposition") .addEventListener ("click", function () {

Showpos = false

})

Document.getElementById ("mouse") .addEventListener ("click", function () {

Alive_mouse ()

})

Document.getElementById ("head") .addEventListener ("click", function () {

Alive_head ()

})

Document.getElementById ("eye") .addEventListener ("click", function () {

Alive_eye ()

})

/ /}, false)

/

/ / in vivo

Var last_time = 0; / / time factor

Var last_nose_left = 0

Var last_nose_top = 0

/ / Open your mouth

Var is_mouse_ok = false

Var is_alive_mouse = false

Var last_dis_eye_norse = 0

Var last_dis_mouse = 0

Function alive_mouse () {

Var media = document.getElementById ("media")

Media.src = "mp3 / alive_mouse.mp3"

Media.play ()

Document.getElementById ("tip") [xss_clean] = "Please open and close your mouth"

Document.getElementById ('result') [xss_clean] = ""

Is_mouse_ok = false

Last_dis_mouse = 0

Last_time = 0

Last_dis_eye_norse = 100000000

Is_alive_head = false

Is_alive_mouse = true

Is_alive_eye = false

}

/ / shaking your head

Var is_head_ok = false

Var is_alive_head = false

Var last_dis_left_right = 100000000

Function alive_head () {

Var media = document.getElementById ("media")

Media.src = "mp3 / alive_head.mp3"

Media.play ()

Document.getElementById ("tip"). InnerHTML = "Please shake your head left and right horizontally"

Document.getElementById ('result') [xss_clean] = ""

Is_head_ok = false

Last_dis_left_right = 100000000

Last_time = 0

Is_alive_head = true

Is_alive_mouse = false

Is_alive_eye = false

}

/ / blink action

Var is_alive_eye = false

Var is_eye_ok = false

Function alive_eye () {

Var media = document.getElementById ("media")

Media.src = "mp3 / alive_eye.mp3"

Media.play ()

Document.getElementById ("tip"). InnerHTML = "Please blink"

Document.getElementById ('result') [xss_clean] = ""

Is_eye_ok = false

Last_dis_eye_norse = 100000000

Last_nose_left = 0

Last_nose_top = 0

Last_time = 0

Is_alive_head = false

Is_alive_mouse = false

Is_alive_eye = true

}

Function startTrack () {

Var videoInput = document.getElementById ('video')

Var ctracker = new clm.tracker ()

Ctracker.init (pModel)

Ctracker.start (videoInput)

Var canvasInput = document.getElementById ('canvas')

Var cc = canvasInput.getContext ('2d')

Cc.lineWidth = 3

Function drawLoop () {

/ / requestAnimationFrame (drawLoop)

Cc.clearRect (0recover0canvasInput.widthWorkcanvasInput.height)

/ / ctracker.draw (canvasInput)

Var position = ctracker.getCurrentPosition ()

If (showpos & & position) {

For (var p = 0; p 0 & & last_nose_top > 0

& & Math.abs (positions [62] [0]-last_nose_left) dis_eye_norse * 1 to 20)) {

Document.getElementById ('result') [xss_clean] = "pass"

Is_alive_eye = false

Is_eye_ok = true

}

}

Last_nose_left = positions [62] [0]

Last_nose_top = position [62] [1]

Last_dis_eye_norse = dis_eye_norse

Last_time = new Date (). GetTime ()

}

}

}

RequestAnimationFrame (drawLoop)

}

DrawLoop ()

}

After reading this article, I believe you have a certain understanding of "how to achieve face recognition authentication based on HTML5". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.