如何每10秒捕獲一次幀並將其發送到服務器？

Question

我想從正在使用網絡攝像頭錄制的視頻中捕獲幀，並將幀以base64格式編碼的圖像或每隔10秒以jpg圖像的形式發送到服務器。

我編寫了使用網絡攝像頭的代碼，並且知道單擊或捕獲圖像，但是如何每隔x秒向服務器發送一幀？

PS-網絡攝像頭將24 * 7在線運行，並且應每x秒發送一次幀

這是我的代碼：

   <!DOCTYPE html>
    <html>
    <head>
        <title> Webcam Trial </title>
        <style>
  body {
                margin: 0;
                font-family: Arial, Helvetica, sans-serif;
            }

            .topnav {
                overflow: hidden;
                background-color: #333;
            }

            .topnav a {
                float: left;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
            }

            #container {
                margin: 0px auto;
                width: 599px;
                height: 600px;
                border: 10px #333 solid;
            }
            #videoElement {
                width: 599px;
                height: 600px;
                background-color: #cc22cc;
            }
        </style>
    </head>

    <body>
    <div class="topnav">
        <a class="active" href="#home">Video Demo</a>

    </div>

    <div>
        <h2>Video demo</h2>
    </div>
    <div id="container">
        <video autoplay="true" id="videoElement">

        </video>
    </div>
    <script>
        var video = document.querySelector("#videoElement");

        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({video: true})
                .then(function(stream) {
                    video.srcObject = stream;
                })
                .catch(function(err0r) {
                    console.log("Something went wrong!");
                });
        }
    </script>
    </body>
    </html>

這個你能幫我嗎。

編輯了JS部分（ 使用了Philip的答案 ，仍然無法使其工作）：

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

    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({video: true})
            .then(function(stream) {
                video.srcObject = stream;
            })
            .catch(function(error) {
                console.log("Something went wrong!");
            });
    }
    const cnv = document.createElement('canvas'),
        ctx = cnv.getContext('2d');

    ctx.drawImage(video,50,50);


    let data = cnv.toDataUrl();
    x=10000;
    function every (x) {
        let last = new Date().getTime();

        (function loop () {
            const now = new Date().getTime(),
                delta = now - last;


            if (delta >= x) {
                //capture video
                last = now;
            }

            window.requestAnimationFrame(loop);
        })();
    }

Answer 1

要捕獲單個幀，您需要一個<canvas>元素並使用其Context2d.drawImage() ¹方法，如下所示：

const cnv = document.createElement('canvas'),
      ctx = cnv.getContext('2d');

ctx.drawImage(video, 0,0);

//2
let data = cnv.toDataURL('image/png');

為了使此間隔每x秒發生一次，您需要一種間隔³ ，可能是這樣的：

 function every (x) {
   let last = new Date().getTime();

   (function loop () {
     const now = new Date().getTime(),
           delta = now - last;


     if (delta >= x) {
       //capture video
       last = now;
     }

     window.requestAnimationFrame(loop);
   })();
 }

^1張繪畫圖片

² toDataUrl（）

³ requestAnimationFrame

如何每10秒捕獲一次幀並將其發送到服務器？

問題描述

1 個解決方案

解決方案1
5 已采納 2019-03-11 10:01:04

如何每10秒捕獲一次幀並將其發送到服務器？

問題描述

1 個解決方案

解決方案1 5 已采納 2019-03-11 10:01:04

解決方案1
5 已采納 2019-03-11 10:01:04