javascript - 使用 socket io 和 OpenCV 进行屏幕共享

Question

所以我发现这段代码可以通过 Socket.IO 发送到 Flask 服务器网络摄像头图像，效果很好：

socket.on('connect', function(){
    console.log("Connected...!", socket.connected)
});
const video = document.querySelector("#videoElement");
video.width = 500;
video.height = 375;

if (navigator.mediaDevices.getDisplayMedia()) {
    navigator.mediaDevices.getDisplayMedia({ 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);

setInterval(() => {
    cap.read(src);

    const canvas = document.getElementById("canvasOutput")
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);

    var type = "image/png"
    var data = document.getElementById("canvasOutput").toDataURL(type);

    data = data.replace('data:' + type + ';base64,', '');
    socket.emit('image', data);

    socket.on('response_back', function(image){
    const image_id = document.getElementById('image');
    image_id.src = image;

});

}, 5000);`

但我的任务是使用屏幕共享，所以我也发现了这个：

async function startCapture(displayMediaOptions) {
let captureStream = null;

try {
captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
} catch(err) {
console.error("Error: " + err);
}
return captureStream;
}

我只是用 navigator.mediaDevices.getDisplayMedia 替换了 navigator.mediaDevices.getUserMedia 并且它偶尔会起作用。问题是服务器有时会以 500 错误响应，即使之前的帧已成功处理并交付。问题是什么？有了网络摄像头，一切都完美无缺。

标签： javascripthtmlflasksocket.io