如何从浏览器捕获摄像头源并发送到 Flask 服务器

Question

如何从浏览器捕获摄像头源并发送到 Flask 服务器应用程序并在用户单击停止时停止捕获？

提要将由服务器处理，但我想要的是将摄像头提要发送到我的 Flask 应用程序，剩下的我可以实现。

<div id="container">
    <video autoplay="true" id="videoElement">

    </video>
</div>
<script type="text/javascript" charset="utf-8">

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




if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {

      /bI want to send these frame to server

      //video_t.srcObject = stream

      
    });
}

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




</script>

Answer 1

我找到了一种方法来实现我正在寻找的东西，这里有类似的东西

如何从浏览器捕获摄像头源并发送到 Flask 服务器

How can I capture camera feeds from browser and send to flask server

browser

camera

flask

server