html5中文学习网

您的位置: 首页 > 视频教程 > html5视频教程 » 正文

基于 HTML5 的人脸识别技术

[ ] 已经帮助:人解决问题

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

Face detectedjHTHTML5中文学习网 - HTML5先行者学习网

然后打开下面地址:jHTHTML5中文学习网 - HTML5先行者学习网

http://neave.com/webcam/html5/face/jHTHTML5中文学习网 - HTML5先行者学习网

当你摇头晃脑的时候,那副眼镜会跟着移动并帮你戴上眼镜。jHTHTML5中文学习网 - HTML5先行者学习网

你可以查看网页源码来了解具体的实现细节。jHTHTML5中文学习网 - HTML5先行者学习网

———————————–我是分界线———————————————jHTHTML5中文学习网 - HTML5先行者学习网

这是一篇国外的文章,介绍如何通过 WebRTC、OpenCV 和 WebSocket 技术实现在 Web 浏览器上的人脸识别,架构在 Jetty 之上。jHTHTML5中文学习网 - HTML5先行者学习网

实现的效果包括:jHTHTML5中文学习网 - HTML5先行者学习网

Face Detection resultjHTHTML5中文学习网 - HTML5先行者学习网

还能识别眼睛jHTHTML5中文学习网 - HTML5先行者学习网

Eye Detection resultjHTHTML5中文学习网 - HTML5先行者学习网

人脸识别的核心代码:jHTHTML5中文学习网 - HTML5先行者学习网

页面:jHTHTML5中文学习网 - HTML5先行者学习网
jHTHTML5中文学习网 - HTML5先行者学习网

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>  

 jHTHTML5中文学习网 - HTML5先行者学习网

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

详细的实现细节请阅读英文原文:jHTHTML5中文学习网 - HTML5先行者学习网

http://www.smartjava.org/content/face-detection-using-html5-javascript-webrtc-websockets-jetty-and-javacvopencvjHTHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助