缘起
"蚂蚁呀嘿，蚂蚁呀呼，蚂蚁呀哈" 相信最近好多人的朋友圈或者抖音都被类似视频刷过屏!
类似的效果最早是在2020年初，那个时候大家应该还都记得，几乎所有的人都因为疫情原因被迫线上办公!
工作当然离不开开会了，这点歪果仁和中国很像，国内我们一般用qq或者钉钉来个在线视频会议!歪果仁也会经常开线上会议，不过他们用的最多的是zoom这个软件。经常的在线会会让人很烦躁，为什么呢?原本在家办公就不用洗头了，但是为了开在线视频会议还得去专门洗个头!
so，一个来自俄罗斯程序猿就想了一个招数恶搞一下他的同事。他基于 first-order-model 做了一个叫做Avatarify 的软件，并且放在了全世界做大的同性交友网站github上。First Order Motion Model for Image Animation 简单来说就是把一张图片变成动态的。Avatarify ，看起来很熟悉的名字，你肯定听过一部叫阿凡达的电影!之后程序猿小哥又基于Avatarify 做了一个苹果app，在网上掀起了吗咿呀嘿旋风，不过在上架appstore7天后在中国区就被下架了，原因不得而知。
来看一下 First Order Motion Model上的图片动画结果
First Order Motion Model上的swap face结果
看完以后大概能明白为什么被下架了!如果东西能被普通人随便使用，那么我们的表情甚至动作都能被别人模拟出来，只要他有一张你的照片!所以说人脸识别不是绝对安全，什么都可以被模拟!这两天的315晚会不知道大家看没有看，好多商家都在非法收集的脸部信息!
上面我们提到的库都是python的，app实现这样的功能都是把图片或者视频传输给服务器，然后服务器处理文件。
浏览器环境人脸识别
我们今天要在浏览器环境下面实现一个简单的人脸识别，我们会用到Tracking.js ，这是一个独立的JavaScript库，用于跟踪从相机或者图片实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。
trankingjs下载
我们需要先点击后面的标签下载trankingjs
trankingjs使用-识别图片
引入 tracking-min.js人脸识别库
引入face-min.js，eye-min.js，mouth-min.js 脸部，眼睛，嘴巴等模型文件
创建html文件，内容如下
tml和css比较简单，这里我们主要来看js代码。
注意js代码必须一定要写在window.onload 回调函数里面，否者获取不到图片的数据，就没有办法对图片进行识别。
创建识别对象
获取的event.data是一个数组 ，数组存放识别处理出来的脸部数据，数据结构如下
{width: 61, height: 61, x: 244, y: 125}
x和y是识别出来元素的坐标，width和height是识别出来元素的宽度
处理识别结果
接下来我们只要需要把得到的结果标记到图片的对应的位置即可，通过plot函数创建一个div，给定对应的坐标和宽高
然后就会看到这样的结果，会识别出照片的眼睛、鼻子、嘴巴
trankingjs使用-识别摄像头数据
创建html文件，写入如下代码
核心js代码解释如下
创建识别对象
创建识别对象并且启用摄像头，将摄像头内容输出到video标签上
注意：这里的识别放大比例，步长，边缘密度等值可以根据摄像头距离物体远近自己调整。
处理识别结果
然后启动起来，浏览器会提示是否允许开启摄像头!点击允许，就会看到你英俊潇洒(沉鱼落雁)的脸庞!
最后
最近刚好也有同学再问怎么在前端通过摄像头获取用户的头像，用本文的内容刚好可以来了解一下前端浏览器环境下怎么识别人脸，用本文的内容做一个人脸识别登录也是可以的!
更多关于前端培训的问题，欢迎咨询千锋教育在线名师。千锋教育拥有多年IT培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦想。
注：本文部分文字和图片来源于网络，如有侵权，请联系删除。版权归原作者所有!
京公网安备 11010802030320号