读书人

基于 HTML5 的人脸判别技术

发布时间: 2012-09-12 09:21:30 作者: rapoo

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

基于 HTML5 的人脸判别技术

然后打开下面地址:

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

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

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

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

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

实现的效果包括:

基于 HTML5 的人脸判别技术

还能识别眼睛

基于 HTML5 的人脸判别技术

人脸识别的核心代码:

页面:

复制内容到剪贴板
    复制内容到剪贴板
    1. public class FaceDetection {
    2. private static final String CASCADE_FILE ="resources/haarcascade_frontalface_alt.xml";
    3. private int minsize = 20; private int group = 0;
    4. private double scale = 1.1;
    5. /** * Based on FaceDetection example from JavaCV.
    6. */ public byte[] convert(byte[] imageData) throws IOException {
    7. // create image from supplied bytearray IplImage originalImage = cvDecodeImage(cvMat(1, imageData.length,CV_8UC1, newBytePointer(imageData)));
    8. // Convert to grayscale for recognition
    9. IplImage grayImage = IplImage.create(originalImage.width(), originalImage.height(), IPL_DEPTH_8U, 1); cvCvtColor(originalImage, grayImage, CV_BGR2GRAY);
    10. // storage is needed to store information during detection
    11. CvMemStorage storage = CvMemStorage.create();
    12. // Configuration to use in analysis CvHaarClassifierCascade cascade = newCvHaarClassifierCascade(cvLoad(CASCADE_FILE));
    13. // We detect the faces.
    14. CvSeq faces = cvHaarDetectObjects(grayImage, cascade, storage, scale, group, minsize);
    15. // We iterate over the discovered faces and draw yellow rectangles around them. for (int i = 0; i < faces.total(); i++) {
    16. CvRect r = new CvRect(cvGetSeqElem(faces, i)); cvRectangle(originalImage, cvPoint(r.x(), r.y()),
    17. cvPoint(r.x() + r.width(), r.y() + r.height()), CvScalar.YELLOW, 1, CV_AA, 0);
    18. }
    19. // convert the resulting image back to an array ByteArrayOutputStream bout = new ByteArrayOutputStream();
    20. BufferedImage imgb = originalImage.getBufferedImage(); ImageIO.write(imgb, "png", bout);
    21. return bout.toByteArray(); }
    22. }

    详细的实现细节请阅读英文原文:

    http://www.smartjava.org/content/face-detection-using-html5-javascript-webrtc-websockets-jetty-and-javacvopencv


读书人网 >CSS

热点推荐