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

这是一篇国外的文章，介绍如何通过 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