基于 HTML5 的人脸识别技术

演示网站介绍

这里为大家介绍一个通过 HTML5 + JavaScript 技术实现人脸识别的网站，不过目前该网站仅适用于 Chrome 浏览器。若要使用该网站，需进行如下操作： 首先，在 Chrome 浏览器的地址栏输入 about:flags；接着，找到“启用 MediaStream” 这一项并点击“启用”；最后，重启 Chrome 浏览器。

当你在该网站上摇头晃脑时，会看到一副眼镜会跟着你的头部移动并“帮你戴上”。若你想了解具体的实现细节，可以查看网页源码。

国外文章相关

有一篇国外文章介绍了如何通过 WebRTC、OpenCV 和 WebSocket 技术在 Web 浏览器上实现人脸识别，该架构搭建在 Jetty 之上。其实现的效果包括能够识别眼睛等。

人脸识别核心代码

页面代码

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

上述代码的主要功能是获取用户的摄像头视频流，并将其显示在 video 元素中，同时每隔 250 毫秒将视频帧绘制到 canvas 上。

Java 代码

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();
}
}

这段 Java 代码的主要功能是对输入的图像数据进行人脸识别。首先将图像转换为灰度图，然后使用 Haar 级联分类器检测人脸，最后在检测到的人脸周围绘制黄色矩形，并将处理后的图像转换为字节数组返回。