Create live video of jpeg snapshots using Gstreamer and JavaScript setTimeout()

StackOverflow https://stackoverflow.com/questions/23385516

Question

I am trying to create a live "video" stream using an tag on a web page.

A Gstreamer pipeline continually overwrites a file "snapshot.jpeg" with a new frame grabbed from a webcam using video4linux2 with a framerate of 15 fps.

A web page renders the image without caching every 100 ms.

The problem is that I get ERR_CONTENT_LENGTH_MISMATCH (in browser console) for the image source on many frames. This is shown as a broken link in the browser.

GStreamer 0.10 syntax

gst-launch v4l2src ! video/x-raw-yuv, width=640, height=480, framerate=15/1 ! jpegenc ! multifilesink location=/var/www/video/snapshot.jpeg

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8' />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>  
        <img id="snapshot" src="snapshot.jpeg"/>
    </body>
</html>

JavaScript

$(function() {
    function refreshImage(){
    $("#snapshot").attr("src", 'snapshot.jpeg?' + Math.random());
    setTimeout(refreshImage, 100);
    }
    refreshImage();
})
Was it helpful?

Solution

Try to hook setTimeout to Image.onload:

$(function() {
    function refreshImage(){
        $("#snapshot").attr("src", 'snapshot.jpeg?' + Math.random());
    }
    $("#snapshot").onload = function(){
        setTimeout(refreshImage, 100);
    }
    refreshImage();
})
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top