0

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();
})
Oskar Cronwall
  • 27
  • 2
  • 7
  • What web server are you using? – Mark Tolley Apr 30 '14 at 10:42
  • Lighttpd 1.4.33 together with HAProxy 1.4 – Oskar Cronwall Apr 30 '14 at 12:10
  • On which System? My first guess was that `multifilesink` keeps overwriting the same file and the web server ends up reading unfinished versions of the files. But it seems that `multifilesink` does it right and writes to temporary files that replace `snapshot.jpeg` once they're written. At least that what's happening on my system (gst-0.10.36, Debian jessie). but your example code seems to work flawlessly here – mreithub May 01 '14 at 06:48
  • Ubuntu 12.4. Have you tested in Chrome as well? – Oskar Cronwall May 07 '14 at 07:56

1 Answers1

0

Try to hook setTimeout to Image.onload:

$(function() {
    function refreshImage(){
        $("#snapshot").attr("src", 'snapshot.jpeg?' + Math.random());
    }
    $("#snapshot").onload = function(){
        setTimeout(refreshImage, 100);
    }
    refreshImage();
})
mcsdwarken
  • 109
  • 3
  • I actually made it inline javascript which calls refreshImage() directly without setTimeout(). This works in Firefox and IE10+ but not in Chrome. I will use another method for Chrome I think. – Oskar Cronwall May 07 '14 at 07:59
  • Yes, it's also fine, as soon as you use img.onload event. The only concern here may be the load on the server, shorter the delay - higher the load. – mcsdwarken May 07 '14 at 12:18