绍一个网站,演示了通过 HTML5 + JavaScript 技术实现的人脸识别,目前仅适用于 Chrome浏览器,首先需要在地址栏输入 about:flags ,然后找到“启用 MediaStream” 这一项,点击“启用” 后重启 Chrome 浏览器
然后打开下面地址:
http://neave.com/webcam/html5/face/
当你摇头晃脑的时候,那副眼镜会跟着移动并帮你戴上眼镜。
你可以查看网页源码来了解具体的实现细节。
———————————–我是分界线———————————————
这是一篇国外的文章,介绍如何通过 WebRTC、OpenCV 和 WebSocket 技术实现在 Web 浏览器上的人脸识别,架构在 Jetty 之上。
实现的效果包括:
还能识别眼睛
人脸识别的核心代码:
页面:
XML/HTML Code复制内容到剪贴板
- <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>
JavaScript Code复制内容到剪贴板
- 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;
-
-
-
-
- public byte[] convert(byte[] imageData) throws IOException {
-
- IplImage originalImage = cvDecodeImage(cvMat(1, imageData.length,CV_8UC1, newBytePointer(imageData)));
-
-
- IplImage grayImage = IplImage.create(originalImage.width(), originalImage.height(), IPL_DEPTH_8U, 1);
- cvCvtColor(originalImage, grayImage, CV_BGR2GRAY);
-
-
- CvMemStorage storage = CvMemStorage.create();
-
-
- CvHaarClassifierCascade cascade = newCvHaarClassifierCascade(cvLoad(CASCADE_FILE));
-
-
- CvSeq faces = cvHaarDetectObjects(grayImage, cascade, storage, scale, group, minsize);
-
-
- 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);
- }
-
-
- ByteArrayOutputStream bout = new ByteArrayOutputStream();
- BufferedImage imgb = originalImage.getBufferedImage();
- ImageIO.write(imgb, "png", bout);
- return bout.toByteArray();
- }
- }