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

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

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

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

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

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

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

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

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

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

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

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

问题1解决方案:

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

// 使用微信自带的WeixinJSBridgeReady事件document.addEventListener('WeixinJSBridgeReady', function() {  document.getElementById('Video').play()})

问题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();

})