在 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);