我如何每 10 秒捕获一次帧并将其发送到服务器？答案

【问题标题】：How do i capture frame every 10 seconds and send it to the server?我如何每 10 秒捕获一次帧并将其发送到服务器？
【发布时间】：2019-03-11 20:18:10
【问题描述】：

我想从使用网络摄像头录制的视频中捕获帧，并将帧作为 base64 格式编码图像或每 10 秒以 jpg 图像发送到服务器。

我编写了使用网络摄像头的代码，并且我知道要单击或捕获图像，但是如何每 x 秒向服务器发送一个帧？

P.S- 网络摄像头将 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 部分（使用菲利普的答案，仍然无法使其工作）：

<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);
        })();
    }

【问题讨论】：

标签： javascript jquery html css

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

¹ draw image

² toDataUrl()

³ requestAnimationFrame

【讨论】：

您好，谢谢您的回答。很抱歉，但我无法理解如何实现它
你不能处理的具体事情是什么？？
我在哪里犯了错误或需要做些什么改变？
您需要正确等待文件被加载，相机被连接，然后开始循环。要运行循环，您需要调用every(10000)。上面的代码并不是一个复制和粘贴解决方案，它概述了设置某些东西的积木。一个完整的实现需要更多的代码......
看看这里jsfiddle.net/mrx15o6q/44 ...即使 SO 不是编码服务，我也只有那 5 分钟... 因为我的电脑没有摄像头，所以无法测试它，但我猜你明白了……