在 HTML 中獲取網絡攝像頭視頻並通過 socketio 發送到 flask 服務器

Question

我正在嘗試在客戶端捕獲網絡攝像頭視頻並將幀發送到服務器進行處理。 我是 JS 的新手，我遇到了一些問題。 我嘗試使用 OpenCV.js 來獲取數據，但我不明白如何獲取它，在 Python 我們可以

cap = cv2.VideoCapture(0)
ret, frame = cap.read()

並且幀是帶有圖像的二維數組，但是我怎樣才能讓每個幀（作為二維數組）使用 OpenCV.js 發送？

我在客戶端有這段代碼：

<script type="text/javascript">
function onOpenCvReady() {
    cv['onRuntimeInitialized'] = () => {
        var socket = io('http://localhost:5000');

        socket.on('connect', function () {
            console.log("Connected...!", socket.connected)
        });

        const video = document.querySelector("#videoElement");

        video.width = 500;
        video.height = 400;

        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(function (stream) {
                    video.srcObject = stream;
                    video.play();

                })
                .catch(function (err0r) {
                    console.log(err0r)
                    console.log("Something went wrong!");
                });
        }

                    let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
                    let cap = new cv.VideoCapture(video);

                    const FPS = 15;
                    function processVideo() {

                        let begin = Date.now();
                        cap.read(src);

                        handle_socket(src['data']);

                        // schedule next one.
                        let delay = 1000 / FPS - (Date.now() - begin);
                        setTimeout(processVideo, delay);
                    }
                    // schedule first one.
                    setTimeout(processVideo, 0);

        function handle_socket(src) {

            socket.emit('event', { info: 'I\'m connected!', data: src });

        }

    }
}

</script>

Answer 1

我的解決方案是：

// Select HTML video element where the webcam data is
const video = document.querySelector("#videoElement");

// returns a frame encoded in base64
const getFrame = () => {
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    const data = canvas.toDataURL('image/jpeg');
    return data;
}


// Send data over socket
function handle_socket(data, dst) {
    socket.emit('event', data, function (res) {
        if (res !== 0) {
            results = res;
        }
    });
}

frame64 = getFrame()
handle_socket(frame64);