前端人脸识别框架tracking.js，解决ios浏览器调摄像头黑屏的问题，兼容pc、安卓、ios。

总结两版人脸识别的心路历程。主要是开发中遇到的问题。

需求：实现pc端、webapp人脸拍照打卡的功能。

第一版，使用flash+JqueryFaceDetection.js 。

因为项目最初是http协议，使用getUserMedia需要 https 协议，所以pc端使用flash调摄像头。也没有要求真正的人脸识别，就用facedetection检测是否为人脸，但并不能保证是否为本人。

方案：使用jquery.webcam.min.js，调取摄像头拍照，使用facedetection检测照片中是否存在人脸。

pc端遇到的问题：浏览器只能用ie、360兼容模式、360极速模式，别的浏览器概不支持。拍照的时候对于光线也有限制，经常拍出来识别不到人脸，需要多试几次。

webapp端遇到的问题：使用input调摄像头拍照识别，图片需要压缩。小部分安卓机型比如三星、小米会发生图片旋转的问题，ios拍照也会旋转。这里使用插件exifJs，网上有很多例子，但是需要注意一个问题，旋转之后的照片，在输出到画布的时候是按照图片原始尺寸输出的，像在ios上，一张图的尺寸可能到了4000*4000，所以页面会加载异常的慢，转的base64串也会异常的大，往后台传输会卡。（这个问题困扰了我很久才找到原因，还寻思明明已经压缩过图片了，为什么得到的base64还是很大）。这里需要在旋转方法里，控制img的尺寸不要超过限定的最大尺寸，我这里是400，并且输出到画布的时候注意写全宽高，否则输出图片为剪裁之后的部分。

前端人脸识别框架tracking.js，解决ios浏览器调摄像头黑屏的问题，兼容pc、安卓、ios。

第二版，使用trackingJs+腾讯云对比，正儿八经的人脸识别。

最开始说做真正人脸识别的时候，领导要求公司自己开发，奈何我们都是小渣渣。后端使用opencv对比的时候服务器压力会很大，所以领导希望人脸识别功能由前端来完成。我这个小垃圾，就这么被顶出去了，吐槽完毕。

为了更好的兼容性，网站升级https协议。

1.使用opencvjs做人脸检测+人脸对比。

https://docs.opencv.org/4.3.0/d5/d10/tutorial_js_root.html，指路opencvjs的官网。

https://blog.csdn.net/weixin_38361925/article/details/82528529，借鉴的这篇博客里的例子。

大致改了一些流程，说一下遇到的问题。

java后端套页面的时候，需要jdk版本在1.8以上。
涉及到的opencv.js 、utils.js 、xml文件需要在同一个目录下，否则会报错xml文件404。
一个严重的问题就是部分安卓机、ios，页面运行卡顿，我猜是因为xml文件太大了？加载的资源太大？所以卡顿。因为华为手机可以正常运行。但是最后没有去解决，能力有限啊，方案弃用。