How to realize face recognition Technology based on HTML5

Today, the editor will share with you the relevant knowledge about how to achieve face recognition technology based on HTML5. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Question: how to realize face recognition on Web browser through WebRTC,OpenCV and WebSocket technology, which is based on Jetty.

The effects achieved include:

Face detection results

Can also recognize the eyes.

Eye test results

The core code of face recognition:

Page:

XML / HTML code copies content to text

< div >

< video id = " live"宽度= " 320" height = " 240" 自动播放 样式= " display：inline;" >

< canvas width = " 320" id = " canvas" height = " 240" style = " display：inline;" >

Var video = $("# live"). Get () [0]

Var canvas = $("# canvas")

Var ctx = canvas .get () [0] .getContext ('2d')

Navigator.webkitGetUserMedia ("video"

Function (stream) {

Video.src = webkitURL .createObjectURL (stream)

}

Function (error) {

Console.log ("unable to get video stream!" )

}

)

Timer = setInterval (

Function () {

Ctx.drawImage (video,0,0320240)

}, 250)

The JavaScript code copies the content to

Public class FaceDetection {

Private static final string CASCADE_FILE = "resources / haarcascade_frontalface_alt.xml"

Private int minsize = 20

Private int group = 0

Private double ratio = 1.1

/ * *

* FaceDetection example based on JavaCV.

* /

The public byte [] convert (byte [] imageData) throws IOException {

/ / create an image from the supplied byte array

IplImage originalImage = cvDecodeImage (cvMat (1 Magneto imageData.coach CVCom 8UC1 Magneto newBytePointer (imageData)

/ / converted to grayscale for recognition

IplImage grayImage = IplImage.create (originalImage.width (), originalImage.height (), IPL_DEPTH_8U,1)

CvCvtColor (originalImage,grayImage,CV_BGR2GRAY)

/ / Storage is required to store information during detection

CvMemStorage storage = CvMemStorage.create ()

/ / configuration for analysis

CvHaarClassifierCascade cascade = newCvHaarClassifierCascade (cvLoad (CASCADE_FILE))

/ / We detected a human face.

CvSeq faces = cvHaarDetectObjects (grayImage, cascading, storage, scale, group, minimum size)

/ / We traverse the faces we find and draw a yellow rectangle around them.

For (int I = 0; I