Web：调起前置摄像头拍照或录像进行人脸识别

最近项目有一个需求是微信公众号做人脸识别，微信浏览器上存在很多调起摄像头的问题，换了多种方案，在这里提供人脸识别的一些开发经验。

一、识别人脸截图上传

使用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微信兼容

优点：

• 可以进行人脸活体检测；

• 直接使用手机系统录像，不用测试录制过程的兼容性；

• 可设置画质，减少上传视频的质量。

缺点：

• 无音频，不能通过唇语识别活体人脸。

作者：Lucia_Huang
链接：https://www.jianshu.com/p/53b935cb17af