基于HTML5 的人脸识别技术核心代码

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

　　然后打开下面地址：

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

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

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

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

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

　　实现的效果包括：

　　还能识别眼睛

人脸识别的核心代码：

页面：

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

1. publicclassFaceDetection{
3. privatestaticfinalStringCASCADE_FILE="resources/haarcascade_frontalface_alt.xml";
5. privateintminsize=20;
6. privateintgroup=0;
7. privatedoublescale=1.1;
10. publicbyte[]convert(byte[]imageData)throwsIOException{
11. //createimagefromsuppliedbytearray
12. IplImageoriginalImage=cvDecodeImage(cvMat(1,imageData.length,CV_8UC1,newBytePointer(imageData)));
14. //Converttograyscaleforrecognition
15. IplImagegrayImage=IplImage.create(originalImage.width(),originalImage.height(),IPL_DEPTH_8U,1);
16. cvCvtColor(originalImage,grayImage,CV_BGR2GRAY);
18. //storageisneededtostoreinformationduringdetection
19. CvMemStoragestorage=CvMemStorage.create();
21. //Configurationtouseinanalysis
22. CvHaarClassifierCascadecascade=newCvHaarClassifierCascade(cvLoad(CASCADE_FILE));
24. //Wedetectthefaces.
25. CvSeqfaces=cvHaarDetectObjects(grayImage,cascade,storage,scale,group,minsize);
27. //Weiterateoverthediscoveredfacesanddrawyellowrectanglesaroundthem.
28. for(inti=0;i<faces.total();i++){
29. CvRectr=newCvRect(cvGetSeqElem(faces,i));
30. cvRectangle(originalImage,cvPoint(r.x(),r.y()),
31. cvPoint(r.x()+r.width(),r.y()+r.height()),
32. CvScalar.YELLOW,1,CV_AA,0);
33. }
35. //converttheresultingimagebacktoanarray
36. ByteArrayOutputStreambout=newByteArrayOutputStream();
37. BufferedImageimgb=originalImage.getBufferedImage();
38. ImageIO.write(imgb,"png",bout);
39. returnbout.toByteArray();
40. }
41. }