Question

我想从使用网络摄像头录制的视频中捕获帧，并将这些帧作为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);
        })();
    }

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

¹ draw image

² toDataUrl()

³ requestAnimationFrame

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

1 个答案: