人臉識別、活體檢測（眨眼、搖頭、張嘴動作）

  • 2022 年 9 月 21 日
  • 筆記

人臉識別、活體檢測（眨眼、搖頭、張嘴動作）clmtrackr  項目總結

項目需求 / 步驟實現描述：

1、申請攝影機許可權，開始識別面部資訊、同時開始錄像 ；

2、隨機順序生成面部檢驗動作；

3、並開始倒計時，需10s內完成該組檢驗動作；

4、完成動作通過後，停止錄像。

5、截取一張圖片；並將錄像和圖片、檢驗動作、檢驗結果上傳後台保存；

6、上傳成功根據返回結果登錄系統頁面。

一、遇到的問題及解決方案

問題1、ios蘋果系統在微信中允許攝影機許可權後，頁面無人像並一片空白問題。或是有些蘋果機需要手動點擊頁面的影片播放才能出現影片人像；

　　因為微信瀏覽器沒有開啟ios攝影機的許可權，所以才會出現有些需要手動再次點擊播放才能出現。 （ios系統安全機制，需使用自帶的safari瀏覽器才可以有許可權）

問題2、ios或是部分手機的影片錄製格式 MediaRecorder-MIME 格式被客戶端錄製；

問題1解決方案：

        創建頁面監聽（WeixinJSBridgeReady）
        原理：對頁面載入進行監聽，等待微信客戶端頁面載入完畢後，自動觸發音頻播放

<video id="Video" preload autoplay loop muted webkit-playsinline="true" playsinline="true"></video>
<script>

// 使用微信自帶的WeixinJSBridgeReady事件

document.addEventListener('WeixinJSBridgeReady', function() {

    document.getElementById('Video').play()

})
</script>

問題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();
               ...
})

 

Tags:

VirMach 便宜 VPS