人臉識別、活體檢測（眨眼、搖頭、張嘴動作）-有解無憂

人臉識別、活體檢測（眨眼、搖頭、張嘴動作）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();
...

})

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/509251.html

標籤：其他

上一篇：并發原理 — CPU原子性指令（一）

下一篇：Latex中也能展示動態圖？