基于 HTML5 的人脸识别技术

本是古典何须时尚 2022-09-18 10:45 145阅读 0赞

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

![Face detected][]

然后打开下面地址：

[http://neave.com/webcam/html5/face/][http_neave.com_webcam_html5_face]

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

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

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

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

实现的效果包括：

![Face Detection result][]

还能识别眼睛

![Eye Detection result][]

人脸识别的核心代码：

页面：

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. \}

[Link 1]: http://www.html5china.com/help/browser.html
[Face detected]: http://www.html5china.com/uploads/allimg/120528/1029353150-0.png
[http_neave.com_webcam_html5_face]: http://neave.com/webcam/html5/face/
[Face Detection result]: http://www.html5china.com/uploads/allimg/120528/10293541b-1.png
[Eye Detection result]: http://www.html5china.com/uploads/allimg/120528/1029356121-2.png