基于 HTML5 的人脸识别技术

基于 HTML5 的人脸识别技术

发布时间：2012-05-28 作者：小想 来源：未知 我要评论

绍一个网站，演示了通过 HTML5 + JavaScript 技术实现的人脸识别，目前仅适用于 Chrome 浏览器，首先需要在地址栏输入about:flags ，然后找到启用 MediaStream 这一项，点击启用 后重启 Chrome 浏…

绍一个网站，演示了通过 HTML5 + JavaScript 技术实现的人脸识别，目前仅适用于 Chrome 浏览器，首先需要在地址栏输入 about:flags ，然后找到“启用 MediaStream” 这一项，点击“启用” 后重启 Chrome 浏览器

然后打开下面地址：

http://neave.com/webcam/html5/face/

当你摇头晃脑的时候，那副眼镜会跟着移动并帮你戴上眼镜。

你可以查看网页源码来了解具体的实现细节。

———————————–我是分界线———————————————

这是一篇国外的文章，介绍如何通过 WebRTC、OpenCV 和 WebSocket 技术实现在 Web 浏览器上的人脸识别，架构在 Jetty 之上。

实现的效果包括：

还能识别眼睛

人脸识别的核心代码：

页面：

XML/HTML Code 复制内容到剪贴板

1. <div> 
2. <video id="live" width="320" height="240" autoplay style="display: inline;"></video> 
3. <canvas width="320" id="canvas" height="240" style="display: inline;"></canvas> 
4. </div> 
5.  
6. <script type="text/javascript"> 
7. var video = $("#live").get()[0]; 
8. var canvas = $("#canvas"); 
9. var ctx = canvas.get()[0].getContext('2d'); 
10.  
11. navigator.webkitGetUserMedia("video", 
12. function(stream) { 
13. video.src = webkitURL.createObjectURL(stream); 
14. }, 
15. function(err) { 
16. console.log("Unable to get video stream!") 
17. } 
18. ) 
19.  
20. timer = setInterval( 
21. function () { 
22. ctx.drawImage(video, 0, 0, 320, 240); 
23. }, 250); 
24. </script> 

JavaScript Code 复制内容到剪贴板

1. public class FaceDetection { 
2.  
3. private static final String CASCADE_FILE ="resources/haarcascade_frontalface_alt.xml"; 
4.  
5. private int minsize = 20; 
6. private int group = 0; 
7. private double scale = 1.1; 
8.  
9. /**
10. * Based on FaceDetection example from JavaCV.
11. */ 
12. public byte[] convert(byte[] imageData) throws IOException { 
13. // create image from supplied bytearray 
14. IplImage originalImage = cvDecodeImage(cvMat(1, imageData.length,CV_8UC1, newBytePointer(imageData))); 
15.  
16. // Convert to grayscale for recognition 
17. IplImage grayImage = IplImage.create(originalImage.width(), originalImage.height(), IPL_DEPTH_8U, 1); 
18. cvCvtColor(originalImage, grayImage, CV_BGR2GRAY); 
19.  
20. // storage is needed to store information during detection 
21. CvMemStorage storage = CvMemStorage.create(); 
22.  
23. // Configuration to use in analysis 
24. CvHaarClassifierCascade cascade = newCvHaarClassifierCascade(cvLoad(CASCADE_FILE)); 
25.  
26. // We detect the faces. 
27. CvSeq faces = cvHaarDetectObjects(grayImage, cascade, storage, scale, group, minsize); 
28.  
29. // We iterate over the discovered faces and draw yellow rectangles around them. 
30. for (int i = 0; i < faces.total(); i++) { 
31. CvRect r = new CvRect(cvGetSeqElem(faces, i)); 
32. cvRectangle(originalImage, cvPoint(r.x(), r.y()), 
33. cvPoint(r.x() + r.width(), r.y() + r.height()), 
34. CvScalar.YELLOW, 1, CV_AA, 0); 
35. } 
36.  
37. // convert the resulting image back to an array 
38. ByteArrayOutputStream bout = new ByteArrayOutputStream(); 
39. BufferedImage imgb = originalImage.getBufferedImage(); 
40. ImageIO.write(imgb, "png", bout); 
41. return bout.toByteArray(); 
42. } 
43. } 

详细的实现细节请阅读英文原文：

http://www.smartjava.org/content/face-detection-using-html5-javascript-webrtc-websockets-jetty-and-javacvopencv