canvas+face-api人臉實時檢測

蛋蛋尊本尊發表於2020-04-03
CanvasAPI

實時檢測和拍照檢測的區別就在於，識別的準確度 實時監測的需要根據視訊的幀數（當然沒多少幀檢測一次完全取決於我們）去檢測，面部識別只是靜態的照片，所以實時檢測只採取了Mtcnn檢測和麵部識別，速度提升，並且實時檢測，缺點就是準確度下降 上程式碼：下一篇文章會結合nodejs完成一個前端識別，後端檢測的一個功能。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>視訊識別人臉</title>
</head>

<body>
    <div style="position: relative" class="margin">
        <video id="inputVideo" style="width: 500px;margin:auto" autoplay muted></video>
        <canvas id="overlay" />
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="./face-pi.js"></script>
<script>

    const canvas = document.getElementById('overlay')
    const context = canvas.getContext('2d')
    const video = document.getElementById('inputVideo')

    $(function () {
        run()
    })
    async function run() {
        // load the models
        await faceapi.loadMtcnnModel('/weights')
        await faceapi.loadFaceRecognitionModel('/weights')

        // try to access users webcam and stream the images
        // to the video element

        if (navigator.mediaDevices.getUserMedia) {
            //最新的標準API
            navigator.mediaDevices.getUserMedia({ video: { width: 1000, height: 1000 } }).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心瀏覽器
            navigator.webkitGetUserMedia({ video: { width: 1000, height: 1000 } }, success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox瀏覽器
            navigator.mozGetUserMedia({ video: { width: 1000, height: 1000 } }, success, error);
        } else if (navigator.getUserMedia) {
            //舊版API
            navigator.getUserMedia({ video: { width: 1000, height: 1000 } }, success, error);
        }

        function success(stream) {
            //相容webkit核心瀏覽器
            // let CompatibleURL = window.URL || window.webkitURL;

            //將視訊流設定為video元素的源
            // console.log(stream);

            //video.src = CompatibleURL.createObjectURL(stream);
            video.srcObject = stream;
            // video.play();
            timer = setInterval(function () {
                canvas.width = video.offsetWidth, canvas.height = video.offsetHeight
                context.drawImage(video, 0, 0, video.offsetWidth, video.offsetHeight);//繪製視訊
                onPlay();
            }, 100);
        }
        function error(error) {
            console.log(`訪問使用者媒體裝置失敗${error.name}, ${error.message}`);
        }

    }
    const mtcnnForwardParams = {
        //通過CNN傳遞的輸入影像的縮放版本數
        //在第一階段，數字越小，推理時間越短，
        //但也不太準確
        maxNumScales: 10,
        //用於計算影像比例步長的比例因子
        //階段1中使用的金字塔
        scaleFactor: 0.709,
        //用於過濾邊界的得分閾值
        //階段1、2和3的框
        scoreThresholds: [0.6, 0.7, 0.7],
        //期望的最小臉部尺寸越高，處理速度越快，
        //但不會檢測到較小的面孔
        minFaceSize: 200
    }
    const displaySize = { width: 500, height: 360 }

    var mtcnnResults = [];
//播放的時候就開始檢測，識別人臉
    async function onPlay(a) {
        mtcnnResults = await faceapi.mtcnn(document.getElementById('inputVideo'), mtcnnForwardParams)
        const resizedResults = faceapi.resizeResults(mtcnnResults, displaySize)
        faceapi.draw.drawDetections(canvas, resizedResults)
        faceapi.draw.drawFaceLandmarks(canvas, resizedResults)

        if (!mtcnnResults.length) {
            console.log('未檢測到人臉')
        }

    }

</script>

</html>
複製程式碼

相關文章