Node+vue实现视频中的人脸识别

我们先来看下识别效果

face.gif

做人脸识别的思路

视频的人脸识别, 说白了也就是图片的识别, 因为视频的每一帧都是一张图片, 我们只要把每一帧的图片的人脸都识别出来, 那也就实现了视频的人脸识别。

总体思路是:截取视频中的图片,然后传到服务器端做识别,把识别结果(坐标和宽高)传回前端,前端做标记。

现在开始

  • 第一步: 我们需要把图片从视频中截取出来, 那现在就出现了三个问题, 1.怎么从视频是截图片;2.截图的频率是多少?3.怎么把图片转到服务器?

    • 回答第一个问题:使用Canvas的toDataURL方法,这个方法可以实时的把视频的画面,截成Base64图片编码,效率高,也方便。
    • 回答第二个问题:画面之帧率高于每秒约10-12帧的时候,人眼就会认为是连贯的。所以我们先取一个低值,每100毫秒截一次图
    • 回答第三个问题:用Ajax吗?当然可以,但是不太合适。对于这种前后端频繁传输数据的情况,用Websocket是最好的选择。前后端我们选择socket.io来实现
  • 第二步:Node端识别图片。在图像识别领域,opencv是一套标准的解决方案,但是opencv由是C++编写,也有JavaPython的接口,但是没有JS的接口,没办法了吗?当然不是,已经有大神出口了Node版的,叫node-opencvnode-opencv不是重写了opencv,只是在Node层调用C++层的cv,最终还是在C++里面运行的。

    • 安装opencvnode-opencv可以对照之前的文章-Mac下安装node-opencv,这个东西比较难安装,我也是折腾好久才安装上
    • 使用node-opencv识别图片中的人脸,核心代码如下:
    // 引入opencv
    const cv = require('opencv')
    // fileName就是我们前端的Base64传到后端生成真正图片的地址
    // cv.FACE_CASCADE参数为训练集,因为人脸只是cv的一个应用领域,他还可以识别车、动物、植物、大楼等物件,你传什么训练集,他就识别什么
    cv.readImage(fileName, function (err, im) {
        im.detectObject(cv.FACE_CASCADE, {}, function (err, faces) {
            // 为什么是复数呢?因为一张图中可能有多张脸,每一张脸都有四的值:x/y/width/height,这四的基本值
            console.log(faces)
        })
    })
    • 识别出坐标和宽高,就可以把这些信息通过websocket转到前端,前端做展示

具体的技术细节,请移步Github:人脸识别源码


奥巴驴
干货
2.8k 声望
217 粉丝
0 条评论
推荐阅读
前端集成weex,你需要学习的objective-c基础
最近要把weex集成到App中,需要给iOS和安卓提供库文件,这里的库文件并不是WeexSDK,而是连接iOS和Weex的中间件,所以就接触到oc,如果你也和我一样,需要集成weex,那恭喜你,oc你也需要学习。你可能会有个疑问...

会说话的鱼7阅读 3k

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 20k评论 9

「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
反编译微信小程序获取小程序前端源码wxapkg
研究反编译的原因就是我自己辛苦了半个月写的小程序,忘记备份放在桌面,心急体验Win11系统 重装系统忘记备份源码,后悔莫及。 后来网上找了反编译的教程,反编译已经上线了的小程序 于是自己尝试了一下,真的可...

TANKING13阅读 10k评论 7

封面图
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫17阅读 1.5k评论 2

封面图
嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用<keep-alive>缓存起来。但是如果将所有对话都缓存,未...

wuwhs12阅读 2.5k

封面图
2.8k 声望
217 粉丝
宣传栏