Rendering a chain of images like a video in javascript

Question

I'm trying to synthesize a video using a stream of images in JavaScript. The problem is the "video" is either jerky, which was solved by using a buffer of sorts. However now the problem is that images are actually downloaded far faster than they are rendered.

If you have a source of images that changes, like an IP camera you can try the example below. What I have noticed is that, the "video" still updates quite slowly, however while watching a packet sniffer I can see that the image is actually being fully retrieved far faster than it is being rendered.

Here is the example:

<HTML>
  <HEAD>
    <SCRIPT SRC="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
    </SCRIPT>
    <SCRIPT>
      function startVideo()
      {
        //when the buffer image is loaded, put it in the display
        $('#image-buffer').load(function()
        {
          var loadedImage = $(this).attr('src');

          $('#image-displayed').attr('src', loadedImage);

          $(this).attr('src',
            'http://path.to/image.jpg?nocache=' + Math.random());
        });

        $('#image-buffer').attr('src',
          'http://path.to/image.jpg?nocache=' + Math.random());
      }

      function stopVideo()
      {
        $('#image-buffer').unbind('load');
        $('#image-buffer').attr('src', '');
        $('#image-displayed').attr('src', '');
      }
    </SCRIPT>
  </HEAD>
  <BODY>
    <BUTTON ONCLICK="startVideo();">Start Video</BUTTON><BR/>
    <BUTTON ONCLICK="stopVideo();">Stop Video</BUTTON><BR/>
    <IMG ID="image-displayed"/>
    <IMG ID="image-buffer" STYLE="visibility: hidden;"/>
  </BODY>
</HTML>

score 4 · Answer 1 · answered Dec 15 '10 at 10:15

Your video will almost certainly be jerky, unless the size of the images are guaranteed to be consistent in some way. And even then, the loading of the images will be dependent on the network conditions. About your problem of the script loading images faster than they are displayed, there's no way to determine the source of that, unless we get actual access to your source.

Rewriting the code using the Stack Exchange API as the image source, and monitoring activity using Firebug we can see that the network activity roughly match what we see on screen.

alt text

The code used is:

$('#buffer').load(function(){
    $('#video').attr('src', this.src);
    this.src = sites[Math.floor(Math.random() * sites.length)].logo_url + '?cache=' + new Date().getTime();
}).trigger('load');

See this code working live here: http://www.jsfiddle.net/yijiang/r957s/

The source code I have in the question causes the problem of images being retrieved faster than being rendered. Your code also when I use it with my camera. All the images are always around 60kB and it's on a LAN so I think it may just be that the browser cannot render the images as fast as it can download them. — ArturPhilibin, Dec 15 '10 at 11:30
@DaSilva_Ireland In that case you probably aren't using the right tools for the problem - you'll probably want to move onto using something that's more specialized in handling this — Yi Jiang, Dec 15 '10 at 11:33

Gawran · Accepted Answer · 2014-11-23T23:22:17.113

Searching for a solution myself. Here is a nice little article about doing something amazingly convenient for IP camera case.

http://techslides.com/convert-images-to-video-with-javascript

Also try loading all images in an image strip (CSS stuf) (assuming that there would not be a large amount of images) and hide all but first with overflow: hidden. Then change image strip position for the width of the image with setInterval (basically a very quick slider without any transition animations). In that case all images would be already loaded AND rendered and you can control timing between each "frame".

score 3 · Answer 3 · answered Mar 31 '12 at 01:04

I had a similar problem (in firefox-not an issue in other browsers.) In the end I litterally downloaded my movie as a filmstrip, put it it in an overflow hidden div and offset the image by the height of a frame. Saves a few k on total file size to boot! I made my filmstrip with gdlib

score 1 · Answer 4 · answered Dec 15 '10 at 10:04

Instead of loading images as often as possible, you can use the window.setInterval method to make a function run at a set interval, for example ten times a second.

You can start loading the next image as soon as you have displayed an image, but instead of having the load event showing it, you can let the function that is running at an interval do that.

Rendering a chain of images like a video in javascript

4 Answers4

Linked