人脸识别、活体检测（眨眼、摇头、张嘴动作）项目总结

项目需求 / 步骤实现描述：

1、申请摄像头权限，开始识别面部信息、同时开始录像 ；

2、随机顺序生成面部检验动作；

3、并开始倒计时，需10s内完成该组检验动作；

4、完成动作通过后，停止录像。

5、截取一张图片；并将录像和图片、检验动作、检验结果上传后台保存；

6、上传成功根据返回结果登录系统页面。

一、遇到的问题及解决方案

问题1、ios苹果系统在微信中允许摄像头权限后，页面无人像并一片空白问题。或是有些苹果机需要手动点击页面的视频播放才能出现视频人像；

　　因为微信浏览器没有开启ios摄像头的权限，所以才会出现有些需要手动再次点击播放才能出现。 （ios系统安全机制，需使用自带的safari浏览器才可以有权限）

问题2、ios或是部分手机的视频录制格式 MediaRecorder-MIME 格式被客户端录制；

问题1解决方案：

创建页面监听（WeixinJSBridgeReady）
        原理：对页面加载进行监听，等待微信客户端页面加载完毕后，自动触发音频播放

问题2解决方案：

增加类型的判断

var p = navigator.mediaDevices.getUserMedia({ audio: true, video: true });
p.then(function(stream) {
var _this = this;
console.log('stream.id----', stream.id);
var options = {
mimeType: 'video/webm;codecs=vp9' // '默认'
};

   if (!MediaRecorder.isTypeSupported(options.mimeType)) {  
            logger('ondataavailable', 'MIME 格式无法被客户端录制');  
            var types = \[  
                'video/webm\\;codecs=vp8',  
                'audio/mp4',  
                'video/mp4',  
                'video/webm',  
                'audio/webm',  
                'video/webm\\;codecs=daala',  
                'video/webm\\;codecs=h264',  
                'audio/webm\\;codecs=opus',  
                'video/mpeg'  
            \];

            for (var i in types) {  
                logger('判断类型: ', types\[i\]);  
                if (MediaRecorder.isTypeSupported(types\[i\])) {  
                    options.mimeType = types\[i\]  
                    logger('MediaRecorder-MIME 录制类型: Maybe!', types\[i\]);  
                    break  
                }  
            }  
        } 

        if (!MediaRecorder.isTypeSupported) {  
            options.mimeType = 'audio/mp4'  
        }  
         \_this.recoder = new MediaRecorder(stream, options);  
         console.log('stream', stream)  
         \_this.recoder.ondataavailable = function (e) {  
                recodedBuffer.push(e.data);  
                logger('ondataavailable', '录制数据有效', e, e.data, e.data.size);  
          }  

　　　　　　 …

               _this.recoder.start();
               …

})