以 HTML 格式获取网络摄像头视频并通过 socketio 发送到烧瓶服务器答案

【问题标题】：Get webcam video in HTML and send to flask server via socketio以 HTML 格式获取网络摄像头视频并通过 socketio 发送到烧瓶服务器
【发布时间】：2020-04-16 01:58:41
【问题描述】：

我正在尝试在客户端捕获网络摄像头视频并将帧发送到服务器以进行处理。我是 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>

【问题讨论】：

你找到解决这个@vinicvaz的方法了吗

标签： javascript python opencv flask webcam

【解决方案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);

【讨论】：