How 2 show an image after image without flickering ?
-
Dear all. I have a web cam solution that generates a picture every time I hit http://The_IP_Address I'm trying to show a web cam motion - so it can look like a live video (every 1 sec or so) That is working but the problem is that ALL the page is getting refreshed and I get flickering (the picture is being cleared with a white background before the next picture shows) How can I avoid that flickering - do U know any Web Form / Server side control that can get an image and show it over the old image ? (maybe using AJAX ???) I wanna do something like "double buffering"... { H - E - L - P } Best Regards - Yovav Gad EMail: Dev@GadWorks.com Web-Site: www.GadWorks.com
-
Dear all. I have a web cam solution that generates a picture every time I hit http://The_IP_Address I'm trying to show a web cam motion - so it can look like a live video (every 1 sec or so) That is working but the problem is that ALL the page is getting refreshed and I get flickering (the picture is being cleared with a white background before the next picture shows) How can I avoid that flickering - do U know any Web Form / Server side control that can get an image and show it over the old image ? (maybe using AJAX ???) I wanna do something like "double buffering"... { H - E - L - P } Best Regards - Yovav Gad EMail: Dev@GadWorks.com Web-Site: www.GadWorks.com
Load the image in an Image object i javascript, when it's loaded, display it. Or load it in an hidden frame/iframe. Or load it in overlapping absolute positioned elements. Or load it into an 1x1 pixel image tag. The only thing that for sure doesn't work is loading it using AJAX. You can load the image data, but then you have no means of turning the data into an actual image. --- b { font-weight: normal; }
-
Dear all. I have a web cam solution that generates a picture every time I hit http://The_IP_Address I'm trying to show a web cam motion - so it can look like a live video (every 1 sec or so) That is working but the problem is that ALL the page is getting refreshed and I get flickering (the picture is being cleared with a white background before the next picture shows) How can I avoid that flickering - do U know any Web Form / Server side control that can get an image and show it over the old image ? (maybe using AJAX ???) I wanna do something like "double buffering"... { H - E - L - P } Best Regards - Yovav Gad EMail: Dev@GadWorks.com Web-Site: www.GadWorks.com
Hi there, There are a couple of options come to mind: + To use the image control to display the lastest image captured from the web cam, you can use the
setInterval
method to periodically reload the image with the same image url:setInterval("ReloadImage()", 1000);
function ReloadImage()
{
var img = document.getElementById("Image1");
img.src = img.src;
}You need to make sure that the image is not cached at the client side. You can do that in the IIS snap-in by adding the http header to make it expire immediately. + Use AJAX such as AJAX.NET to make a request to the server to get the lastest image filename as a string and do the replace for the src attribute of the img element. + Host an ActiveX control in the web page to display the image. Just some ideas.