使用 HTML5, javascript, webrtc, websockets, Jetty 和 OpenCV 实现基于 Web 的人脸识别

ap0581w9c 2015-11-15

javascript html5 canvas web Image stream Create Group jetty 人脸识别

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

实现的效果包括:

还能识别眼睛

人脸识别的核心代码:

页面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div>
    <video id="live" width="320" height="240" autoplay style="display: inline;"></video>
    <canvas width="320" id="canvas" height="240" style="display: inline;"></canvas>
</div>
  
 <script type="text/javascript">
    var video = $("#live").get()[0];
    var canvas = $("#canvas");
    var ctx = canvas.get()[0].getContext('2d');
  
    navigator.webkitGetUserMedia("video",
            function(stream) {
                video.src = webkitURL.createObjectURL(stream);
            },
            function(err) {
                console.log("Unable to get video stream!")
            }
    )
  
    timer = setInterval(
            function () {
                ctx.drawImage(video, 0, 0, 320, 240);
            }, 250);
</script>

后台:

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

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

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

登录 后评论
下一篇
云攻略小攻
2460人浏览
2019-10-11
相关推荐
WebRTC学习与DEMO资源一览
1698人浏览
2017-06-09 11:07:00
实时Web与WebSocket实践
4625人浏览
2017-01-10 11:04:41
php推送
430人浏览
2015-05-27 09:32:00
WebSocket 详解教程
1731人浏览
2017-11-15 21:44:00
WebSocket 详解教程
557人浏览
2017-10-30 17:59:00
0
0
0
579