Edit Question - KnowledgeHub

Title Body

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>

Tags (comma-separated) Cancel