學習筆記-利用WebRTC呼叫攝像頭拍照(截圖)

阿新 • • 發佈：2020-11-03

# 背景

在寫瀏覽器呼叫攝像頭進行人臉識別的時候,
需要獲取關鍵幀進行掃描解析,
剛好,寫了一個獲取攝像頭影象的Demo,
放上來一起分享

# 執行原理

過程比較簡單,
我就直接簡單概述一下

流程:

1. 利用 WebRTC 呼叫攝像頭
1. 將 WebRTC 獲取到的視訊流傳送到 video 標籤
1. 利用 requestAnimationFrame 方法,定時將畫面同步到 canvas 標籤
1. 點選按鈕的時候,直接從 canvas 元素獲取當前畫面的 base64 資料,利用方法 toDataURL
1. 將 base64 資料展示到 img 標籤

# 程式碼

我直接將程式碼檔案放到我群裡: 492781269
可以加群下載

下面還是貼一下完整的程式碼吧:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>呼叫攝像頭截圖拍照(WebRtc-video-canvas-img)</title>
</head>
<body>
    <div id="videoBox">
        <video src="" id="myVideo" autoplay="autoplay"></video>
        <canvas id="output" style="display: none"></canvas>
        <button id="myButton">截圖(拍照)</button>
        <img id="myImg" src="" alt="">
    </div>

    <script>
    
        const myVideo =  document.querySelector("#myVideo");
        const myCanvas = document.querySelector("#output");
        const ctx = myCanvas.getContext("2d");
        const myButton = document.querySelector("#myButton");
        const myImg = document.querySelector("#myImg");


        // 獲取canvas當前畫面的base64
        function getCanvasBase64() {
            return myCanvas.toDataURL("image/jpeg", 1); 
        }

        // canvas 實時重新整理顯示
        function canvasFrame() {
            ctx.drawImage(myVideo, 0, 0, myCanvas.width, myCanvas.height);

            requestAnimationFrame(canvasFrame);
        }

        // 呼叫攝像頭
        function setupCamera() {
                
            let exArray = [];
            //web rtc 呼叫攝像頭(相容性寫法(谷歌、火狐、ie))
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
            
            //遍歷攝像頭
            navigator.mediaDevices.enumerateDevices()
            .then(function (sourceInfos) {
                for (var i = 0; i < sourceInfos.length; ++i) {
                    if (sourceInfos[i].kind == 'videoinput') {
                        exArray.push(sourceInfos[i].deviceId);
                    }
                }
            })
            .then(() => {
                // 因為我這裡是有三個攝像頭,我需要取最後一個攝像頭
                let deviceId = exArray[exArray.length - 1];  // 取最後一個攝像頭,(深度,灰度,RGB)

                navigator.mediaDevices.getUserMedia({
                    audio: false, 
                    video: { 
                        deviceId: deviceId
                    } 
                }) 
                .then(stream => {  // 引數表示需要同時獲取到音訊和視訊
                    // 獲取到優化後的媒體流
                    myVideo.srcObject = stream;
                    myVideo.onloadedmetadata = () => {
                        myVideo.width = myVideo.offsetWidth;
                        myVideo.height = myVideo.offsetHeight;
                        myCanvas.width = myVideo.width;
                        myCanvas.height = myVideo.height;
                        canvasFrame();
                    };
                    
                })
                .catch(err => {
                    // 捕獲錯誤
                    console.log
                });
            });
        }

        // 點選按鈕截圖(拍照)
        myButton.addEventListener('click', () => {
            let imageBase64 = getCanvasBase64();
            myImg.src = imageBase64;
        });

        // 載入之後就開始呼叫一下攝像頭
        window.addEventListener('load', () => {
            setupCamera();
        });

    </script>
</body>
</html>

PS:
如有錯誤,還請多多指出來~

-- Nick
-- 2019/07/22

原文連結：https://www.cnblogs.com/inick/p/13918021.html