DIV CSS 佈局教程網

介紹一個網站，演示了通過 Html5 + JavaScript 技術實現的人臉識別，目前僅適用於 Chrome 浏覽器，首先需要在地址欄輸入 about:flags ，然後找到“啟用 MediaStream” 這一項，點擊“啟用” 後重啟 Chrome 浏覽器

然後打開下面地址：

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

當你搖頭晃腦的時候，那副眼鏡會跟著移動並幫你戴上眼鏡。

你可以查看網頁源碼來了解具體的實現細節。

———————————–我是分界線———————————————

這是一篇國外的文章，介紹如何通過 WebRTC、OpenCV 和 WebSocket 技術實現在 Web 浏覽器上的人臉識別，架構在 Jetty 之上。

實現的效果包括：

還能識別眼睛

人臉識別的核心代碼：

頁面：

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>  

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