上个月在网上看到一个用web实现简单AR效果的文章，然后自己一路折腾，最后折腾出来一个 Asp.net+WebSocket+Emgucv实时人脸识别的东西，网上也有不少相关资料，有用winform的也有asp.net的。其实人脸识别技术早就成熟了，就是没机会接触这方面。百度了一下 找到好多，JqueryFaceDetection，face++，face core，opencv，emgucv等等，这些我都折腾了一遍，并不能很好的满足我的需求，我就是想像手机QQ里边的拍照的时候能识别到人脸并且对图像做一些处理。后来找到了一个用winform+emgucv实现的例子，我就想着怎么给弄web上。后来又看到一篇用websocket实现的例子，就结合了一下。

    我自己做的这个有相当多的代码都是网上的直接拿来用了，对我来说，websocket和emgucv这两个东西都是第一次接触，有不少的坑，尤其这个emgucv！！，各个版本差别巨大，从2.4到3.2这几个版本我几乎都下载过，最终是用的3.1的。好了，下面进入正题，源码我已经放在github了，https://github.com/13005463562/FaceWeb 。其中NewFaceWeb是web端，NewFace是服务端。想试一下效果的可以戳这里（要用火狐浏览器，谷歌太坑，强制要用https才能打开摄像头，其他浏览器还存在兼容性问题，其实一些手机浏览器UC或者火狐也行，但是我不会调样式。。。）：www.zlofyao.top  ，对于没有录入姓名的人呢，只能出现一个方框，可以点截图（等你的脸出现方框的时候截图），然后录入你的姓名，就可以把你的名字也识别出来。

     一.整体介绍

     首先下载emgucv3.1 ，我下载的是第一个297M那个。下载之后解压，需要用到bin下的x64文件夹，注意不是根目录下的x64。 Emgu.CV.Example 里边有一些关于emgucv的例子，都是按照那个写的代码，可以看看。

      在前端利用canvas获取摄像头的图像信息，通过websocket把每一帧数据传到服务端，服务端拿到的是byte[]数据，要转换成需要的格式再识别到你的脸，然后去人脸训练库中比较，找出最像你的那个样本的姓名（相似度太低则为空），最后把你的脸的位置（左上角坐标和宽高）和姓名返回前端。前端拿到返回数据，在canvas上画出方框和姓名，ok，完事。

     

    二.前端实现

     首先是html代码，使用H5中的video和canvas：

    

 <div>
        <div id='frame' style="position:relative;">
            <video style='position:absolute;top:0px;left:0px;z-index:2;' id="live" width="320" height="240" autoplay></video>
            <canvas style='position:absolute;top:242px;left:0px; z-index:170;' width="320" id="canvasFace" height="240"></canvas>
            <canvas style='position:absolute;top:242px;left:0px; z-index:11;' width="320" id="canvas" height="240"></canvas>
        </div>
    </div>

 

     接着放js代码（从别人那搬来的=-=）， 先是要打开摄像头，打开成功了就开启websocket，把一帧图像数据转成base64形式顺便压缩一下，压缩很重要，在本机测无所谓，但要放服务器网络延迟太高，每次前后台交互一两秒。。。压缩比0.5即可把延迟降低到300-400毫秒，这样就很流畅啦.

  $(function () {
            var video = $('#live').get()[0],
            canvas = $('#canvas'),
            ctx = canvas.get()[0].getContext('2d'),
            canvasFace = $('#canvasFace'),
            //canvasFace1 = document.getElementById("canvasFace");
            ctx2 = canvasFace.get()[0].getContext('2d'),
            canSend = true;

            if (navigator.getUserMedia) { // Standard
                navigator.getUserMedia({ "video": true }, function (stream) {
                    video.src = webkitURL.createObjectURL(stream);
                    // video.play();
                    startWS();
                }, errBack);
            } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia({ "video": true }, function (stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                    // video.play();
                    startWS();
                }, errBack);
            }
            else if (navigator.mozGetUserMedia) { // Firefox-prefixed
                navigator.mozGetUserMedia({ "video": true }, function (stream) {
                    video.src = window.URL.createObjectURL(stream);
                    //video.play();
                    startWS();
                }, errBack);
            };

            function errBack() {
                console.log('err');
            }
         
            var _draw = function (pArr) {
                canvasFace[0].height = canvasFace[0].height;//重设height以清除画布
                ctx2.strokeStyle = "#EEEE00";
                ctx2.fillStyle = 'rgba(0,0