Ad

How Do I Capture Frame Every 10 Seconds And Send It To The Server?

- 1 answer

I would like to capture frames from the video which is being recorded using webcam and send the frames as base64 format encoded image or just as a jpg image every 10 seconds to the server.

I wrote the code to use the webcam, as well as i know to click or capture an image but how do i send a frame to the server every x seconds?

P.S- webcam will be online 24*7 and should send frame every x seconds

Here is my code:

   <!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" target="_blank" rel="nofollow noreferrer" 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>

Please help me out with this.

Edited JS part (Used Philip's answer, Still unable to make it work):

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

Answer

To capture a single frame, you need a <canvas> element and use its Context2d.drawImage()1 method like so:

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

ctx.drawImage(video, 0,0);

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

To make that happen every x seconds you need a kind of interval3, may be like that:

 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 draw image

2 toDataUrl()

3 requestAnimationFrame

Ad
source: stackoverflow.com
Ad