VUE项目-H5端人脸识别功能实现手机媒体「VUE项目-H5端人脸识别功能实现」

安卓原生app端接入腾讯人脸核身sdk，采集人脸信息和账号绑定。用户使用同一账号登录微信公众号h5端，h5采集人脸信息，调用腾讯人脸比对接口，和原生app端采集的人脸信息比对，是否是同一个人，然后再进行下一步操作。

1.如何调用移动端设备摄像头

2.使用tracking.js捕捉人脸

3.对人脸进行拍照，描绘到canvas画布上面

4.将照片转换成base64格式

5.调用后台接口，后台调用腾讯人脸比对接口进行比对。（由于调用腾讯人脸比对接口需要签名，签名在后台做比较合适）

1.下载tracking.js 网址：https://trackingjs.com   将需要的js文件复制到静态资源文件夹

静态资源引入

2.使用video标签调用手机摄像头，playsinline、webkit-playsinline属性非常重要，如果不写会掉不起来苹果手机的摄像头。微信开发者文档上面有明确的说明，喜欢钻研的同学可以到微信开发者文档中查看文档。video和canvas的宽高的写法是为了适配手机屏幕的大小。

 3.获取媒体设备，video开始播放

4.安卓手机在允许调用摄像头之后正常调用和播放，苹果手机第一次允许之后调不出来摄像头，返回到上个页面再次进入人脸识别页面，可以正常调用。这个问题想了很多方向，使用了微信api里面的一些监听方法，依然无效。想了一些策略，在前一个页面获取媒体设备等，都不是完美方案。 耽误了两天时间，这天中午午休，我做梦梦到一个美女。那美女竟然穿着女仆装，超短的蕾丝花边裙，修长光溜溜的美腿，洁白秀美的脸蛋，乌黑发亮的发丝，圆润丰满的胸脯，简直是梦想中的女朋友。我对着那个美女抛了一个媚眼，那美女便婀娜多姿地眨着眼睛回应我。我咽了一口口水，忍不住便问：你如何才能做我女朋友。那美女张开樱桃小口，突出几个调皮的字来：你抓到我，我便以身相许。此话一听，我哪能安奈住自己激动的内心。迅速向她扑去，可是我向她跑去，她就转身向后跑，我停下来，她就停下来对我抛飞吻。我追呀追，她跑呀跑，她始终跟我保持着一定的距离，我是怎么都追不上她，气的我吐血。突然，我心想，上次做梦，我得到了一件短暂时间穿越能力。只要我集中精力发功，我就能穿越到未来1秒以后的时间。想到此我就开始集中精力，我一追她便跑，我一停她便停。突然这个世界相对与我静止了1秒钟，我利用这1秒的时间，迅速接近女仆装美女。1秒1秒又1秒，我终于抱住了女仆装美女，那美女对我眉开眼笑，还用樱桃小口往我脸上亲......突然，音乐响起，午休时间结束，我意犹未尽的醒来，发现抱枕上面都是口水，赶快趁人不注意用纸擦掉。又是突然，我想到了是否可以在调用video.play方法的时候，给它加一个定时器，让它1秒钟之后再执行。  没想到加上之后，苹果手机上面的问题解决了。自此，我猜想：当我们询问是否可以调用手机摄像头的时候，苹果的系统弹框阻碍了js的执行，在那一刻js代码停止执行，但是当我们点击允许之后，js代码没有继续执行，因为系统没有手段或者说事件去触发代码继续走。我们加上setTimeout函数之后，系统有了可以让代码继续执行的触发手段，所以js代码继续执行，我们就可以进行下一步人脸捕捉了。如果同学们有更好的解释，欢迎留言。

 点击允许

 

点击允许苹果手机并不掉起摄像头

代码

 5.设置各种参数 实例化人脸捕捉实例对象

识别中 

 6.拍照 绘制照片，计算照片大小，腾讯人脸比对接口对照片大小和格式有要求。

 7. 人脸采集之后，移除实例化对象，初始化参数

css样式部分代码 

1.人脸捕捉技术使用的tracking.js，关键是要理解它的运作原理和一下参数配置。

2.因为要调用手机媒体设备，兼容性问题是大问题，特别是苹果手机的问题，往往不知道如何下手，需要有丰富的开发经验和各种曲线救国的开发思想。