β

基于 HTML5 的人脸识别技术

第九技术 343 阅读

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

Face detected

然后打开下面地址:

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. <script type="text/javascript">
  6. var video = $("#live").get()[0];
  7. var canvas = $("#canvas");
  8. var ctx = canvas.get()[0].getContext('2d');
  9. navigator.webkitGetUserMedia("video",
  10. function(stream) {
  11. video.src = webkitURL.createObjectURL(stream);
  12. },
  13. function(err) {
  14. console.log("Unable to get video stream!")
  15. }
  16. )
  17. timer = setInterval(
  18. function () {
  19. ctx.drawImage(video, 0, 0, 320, 240);
  20. }, 250);
  21. </script>
JavaScript Code复制内容到剪贴板
  1. public class FaceDetection {
  2. private static final String CASCADE_FILE ="resources/haarcascade_frontalface_alt.xml";
  3. private int minsize = 20;
  4. private int group = 0;
  5. private double scale = 1.1;
  6. /**
  7. * Based on FaceDetection example from JavaCV.
  8. */
  9. public byte[] convert(byte[] imageData) throws IOException {
  10. // create image from supplied bytearray
  11. IplImage originalImage = cvDecodeImage(cvMat(1, imageData.length,CV_8UC1, newBytePointer(imageData)));
  12. // Convert to grayscale for recognition
  13. IplImage grayImage = IplImage.create(originalImage.width(), originalImage.height(), IPL_DEPTH_8U, 1);
  14. cvCvtColor(originalImage, grayImage, CV_BGR2GRAY);
  15. // storage is needed to store information during detection
  16. CvMemStorage storage = CvMemStorage.create();
  17. // Configuration to use in analysis
  18. CvHaarClassifierCascade cascade = newCvHaarClassifierCascade(cvLoad(CASCADE_FILE));
  19. // We detect the faces.
  20. CvSeq faces = cvHaarDetectObjects(grayImage, cascade, storage, scale, group, minsize);
  21. // We iterate over the discovered faces and draw yellow rectangles around them.
  22. for (int i = 0; i < faces.total(); i++) {
  23. CvRect r = new CvRect(cvGetSeqElem(faces, i));
  24. cvRectangle(originalImage, cvPoint(r.x(), r.y()),
  25. cvPoint(r.x() + r.width(), r.y() + r.height()),
  26. CvScalar.YELLOW, 1, CV_AA, 0);
  27. }
  28. // convert the resulting image back to an array
  29. ByteArrayOutputStream bout = new ByteArrayOutputStream();
  30. BufferedImage imgb = originalImage.getBufferedImage();
  31. ImageIO.write(imgb, "png", bout);
  32. return bout.toByteArray();
  33. }
  34. }
作者:第九技术
移动web技术博客
原文地址:基于 HTML5 的人脸识别技术, 感谢原作者分享。