前端简单面部识别

econi 发布于2019-08-26 11:42 / 2756人阅读

摘要：前言过年了，来点有趣的东西最近一直在尝试通过如何视频，怎么捕捉视频的行为，给视频加点好玩的东西比如给视频加一个胡子以下记录一下最近的玩具点击这里看自己的效果需要允许摄像头呀效果效果大概如下就是给视频的脸上加个胡子我手机上有防蓝光的膜，各位大

前言

过年了，来点有趣的东西

最近一直在尝试通过web如何DIY视频，怎么捕捉视频的行为，给视频加点好玩的东西,比如给视频加一个胡子？

以下记录一下最近的玩具

live demo

点击这里看自己的效果（需要允许摄像头呀！！）

效果

效果大概如下:
就是给视频的脸上加个胡子（我手机上有防蓝光的膜，各位大爷将就着看吧）

思路

首先我做的视频动态绘制胡子的东西，那肯定要先支持视频吧

支持视频

这里代码就非常简单，新建一个html，写上一个video标签

navigator.getUserMedia =
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia

if (navigator.getUserMedia) {
    navigator.getUserMedia(
        { video: { width: 500, height: 500 } },
        function (stream) {
            var video = document.querySelector("video")
            video.srcObject = stream
            video.onloadedmetadata = function (e) {
                video.play()
            }
        },
        function (err) {
            console.log("The following error occurred: " + err.name)
        }
    )
} else {
    console.log("getUserMedia not supported")
}

写到这里视频就可以播放了

然后我们把这个视频放进canvas里,

其实就是定时采集video的内容，然后drawImage到canvas就好了

    setInterval(() => {
      v.drawImage(video, 0, 0, 500, 375)
      vData = v.getImageData(0, 0, 500, 375)    
    }, 20)

这里开始canvas里面的内容也就开始动起来了

下面就是必要重要的内容了

面部识别

我要做的是面部识别，所有怎么识别呢

让我自己现场实现一个（不存在的，虽然在学机器学习，但是才学了几天，还远远远远不够）

找开源（bingo，就是你了）

开源面部识别 trackingjs

然后就是找到了一个这个 trackingjs

看了一下效果，非常好，虽然有点慢，但是满足我们的功能

face(image)-demo
face(camera)-demo

好，那么先在本地跑个demo试试

......然后5min过去了

且慢，好像这个识别不能识别camera的内容（camera只支持到face，不支持mouth、eye、nose级别）

mdzz

ps: 如果只是简单加个帽子之类的东西的话，用这个库也就够了

下面几天我基本上就卡在这个环节几天都没有什么好的思路

直到某天，我随便刷的时候看到了这个实现face-detection-node-opencv

咦，她也实现了面部识别，好像这个人再trackingjs的contributor里面见过，然后她用到了opencv，记得在今年d2的大会上主会场某几个嘉宾也分享了ar主题的东西，也是用服务器来实现的(就是canvas的getImageData后把数据传给后端，后端处理完再把结果返回)，当时我以为效率会很差（在图片传输方面），其实看下来好像效果还可以

好，接下里就配上后端来写，似乎功能会多很多。那么接下来就像武器大师说的：开打开打

node 识别 opencv

那么就看opencv的node有什么好的实现了

then，node-opencv，这个可以识别到face级别，好像不太够

再找

faced

yooyoo，眼睛鼻子都识别出来了，很屌嘛，就你了

那就直接搭node服务跑起来呗

然后简单花了10分钟搭了个koa2的服务

整体思路就是：

前端开启video

video => canvas => base64 => ArrayBuffer（这个库只能识别图片对象或者ArrayBuffer）

websocket前后端通讯

后端处理图片，返回face、mouth在图片上的位置数据

前端渲染嘴巴位置

加上胡子

done

下面是 后端处理图片的时间，平均大概5ms，当做玩具的话，勉强够

start: 4.568ms
start: 3.881ms
start: 3.564ms
start: 3.690ms
start: 5.971ms
start: 4.069ms
start: 3.364ms
start: 5.054ms
start: 22.219ms
start: 5.586ms
start: 5.000ms

本地测试一切正常，但是部署到服务器上的时候，还是有一些问题

服务器安装opencv的时候有深坑

video，只能在https下用

https 下的websocket 得升级到 wss

静态资源访问又遇到问题，妈的

这里既然是前端文章，那么我就不张开来讲部署的问题了，

差不多就是这样思路

最后

可能是今年最后一篇，写的可能比较随意，不知道上下文连不连贯（看官们，抱歉）

然后最后的结果就如文章最开始所见：

点击这里看自己的效果（需要允许摄像头呀！！）

详细代码的话：

前后端都在这里了： face-decorator

参考链接/推荐阅读

咦？浏览器都能做人脸检测了？

前端工程师做Face Detection

faced

node-opencv

HTML5-Face-Detection

服务器托管私有云面部识别面部识别api接口前端简单吗前端开发简单吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107412.html

警察必备工具！用空间融合卷积神经网络鉴别伪装的「坏蛋」

摘要：剑桥大学印度国家技术学院近日联合发布了一篇论文，名为利用空间融合卷积神经网络通过面部关键点进行伪装人脸识别，该论文利用空间融合卷积神经网络为刑侦过程的人脸识别提供了有力的支持，我们来一窥究竟。剑桥大学、印度国家技术学院近日联合发布了一篇论文，名为《利用空间融合卷积神经网络通过面部关键点进行伪装人脸识别Disguised Face Identification (DFI) with Faci...

anyway 2019-04-25 18:17 评论0 收藏0
前端也可以调教人工智能

摘要：这群小伙伴们坚信的强大能力，坚信可以模拟人类很多的感官功能，包括视觉听觉，甚至包括思考能力给安装上一个机械手臂，甚至可以模拟人类的肢体功能，这就是阿里云人工智能的能力。阿里云人工智能 ET，代表的是阿里云语音识别、语音合成、自然语言理解、实时图像识别、机器学习的综合技术，背后是阿里云飞天系统强大的计算能力。可是这么高大上的 ET，最近居然开始不务正业了，来看看它都干了啥！！！视...

yvonne 2019-08-20 13:55 评论0 收藏0
浅谈人脸识别技术的方法和应用

摘要：人脸识别技术所独具的活性判别能力保证了他人无法以非活性的照片木偶蜡像来欺骗识别系统。人脸识别技术所采用的依据是人脸照片或实时摄取的人脸图像，因而无疑是最容易获得的。人脸识别是近年来模式识别、图像处理、机器视觉、神经网络以及认知科学等领域研究的热点课题之一，被广泛应用于公共安全（罪犯识别等）...

Charles 2021-11-23 09:51 评论0 收藏0
千呼万唤，web人脸识别登录完整版来了，这样式我爱了

摘要：打包配置要特别注意一点，一定要加上，这样打包时会将外部引入的包比如在根目录下或文件下新加外部包打包到项目中，服务器上项目才能运行。大家好，我是小富~在我最开始写文章的时候曾经写过一篇文章基于 Java 实现的人脸识别功能，因为刚开始码字不知道写点什么，就简单弄了个人脸识别的Demo。但让我没想到的是，在过去...

only_do 2021-11-25 09:43 评论0 收藏0