最近项目有一个需求是微信公众号做人脸识别，微信浏览器上存在很多调起摄像头的问题，换了多种方案，在这里提供人脸识别的一些开发经验。
一、识别人脸截图上传
使用getUserMedia()方法获取视频流，通过video标签在页面上播放。截图前可以使用倒计时的方式，也可以用 Tracking.js检测人脸。然后通过canvas.drawImage截取图片。
前提：https协议
兼容性经过测试：
-
Android微信兼容 -
IOS微信不兼容。IOS微信浏览器暂不支持getUserMedia()
（其他浏览器兼容性参看Can I use）
优点：
- 可控制画质，不会导致图片太大，上传太久。
缺点：
- 只能图片上传，无法辨认活体人脸。
二、WebRTC录制视频
WebRTC是指实现web实时通信的一系列规范，一般可以通俗地理解为“P2P视频聊天”。实现这个功能依赖于上一种方法说的摄像头调用API getUserMedia()取到MediaStream，同时还依赖一个P2P网络连接和传输的APIRTCPeerConnection来实现视频流数据的传输。
我这里使用的是RecordRTC，一个基于JavaScript的媒体录制库，用于音频+视频+屏幕录制的WebRTC。可模仿手机系统自带的拍照功能，结合getHTMLMediaElement方法展示视频文件。这里是demo。我将在另一篇简书（RecordRTC：利用WebRTC在Web端录制视频）上发布这个方法写的代码。
前提：https协议
兼容性经过测试：
-
Android微信不兼容。在微信浏览器生成的视频文件只有390字节的头，没有视频，具体原因有待查证 -
IOS微信不兼容。IOS不支持RecordRTC录制视频 -
Firefox 17+兼容 -
Chrome 21+兼容 -
Edge 12+兼容 -
Chrome for Android兼容
优点：
- 可以进行人脸活体检测；
- 在安卓手机来说，该方案录制的视频相对系统录制的文件要小很多，传输给服务器会更快；
缺点：
- 微信做不了。
三、Input标签上传视频
文件上传框<input type="file">，除了可以选择文件上传之外，还可以调用摄像头来拍摄照片或者视频并上传。capture属性可以判断前置or后置摄像头。
<input type="file" accept="video/*" capture="user" />
兼容性经过测试：
-
Android微信兼容 -
IOS微信兼容
优点：
- 可以进行人脸活体检测；
- 直接使用手机系统录像，不用测试录制过程的兼容性。
缺点：
- 安卓录制的视频太大，上传服务器耗时长。
四、Input标签录制视频 + canvas绘图 + gif.js压缩成GIF
用以上的第三种方法录制视频，在视频播放的过程中，用canvas定时截取一张图片，然后用gif.js生成一张GIF图。我最终使用的是这种方案，代码将会在我的另一篇简书（Vue：录制视频并压缩视频文件）上呈现。
兼容性经过测试：
-
Android微信兼容 -
IOS微信兼容
优点：
- 可以进行人脸活体检测；
- 直接使用手机系统录像，不用测试录制过程的兼容性；
- 可设置画质，减少上传视频的质量。
缺点：
- 无音频，不能通过唇语识别活体人脸。
网友评论