TOP

Asp.net+WebSocket+Emgucv实时人脸识别(一)
2017-10-10 12:47:31 】 浏览:11437
Tags:Asp.net WebSocket Emgucv 实时 人脸 识别

     上个月在网上看到一个用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  
		
Asp.net+WebSocket+Emgucv实时人脸识别(一) https://www.cppentry.com/bencandy.php?fid=106&id=131550

首页 上一页 1 2 3 4 5 下一页 尾页 1/5/5
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇UWP 手绘视频创作工具技术分享系列 下一篇UWP 手绘视频创作工具技术分享系..