One simple way to implement a webcam page without using Flash, Java applets, or ActiveX controls is to use a little bit of JavaScript to repeatedly pull an image from the server. You vary the URI by adding a changing value as a parameter to help defeat caching.
The basic page often given looks something like:
However I found that the browser could often end up getting out of sync and start "tripping up" and even stop unexpectedly.Code:<html> <head> <title>Motion Cam</title> <script language="JavaScript" defer="true"> function ReloadFrame() { var d; d=new Date(); document.getElementById("webcam").src="motion.jpg?"+d.getTime(); } </script> </head> <body onload="window.setInterval(ReloadFrame, 1500)"> <img id="webcam" src="motion.jpg?" alt="motion camera image"> </body> </html>
Instead I find a small variation improves stability quite a bit:
This version actually waits for the image to load before starting a one-shot "wait" and then pulling a new frame. New load, new "wait" and re-pull.Code:<html> <head> <title>Motion Cam</title> <script language="JavaScript" defer="true"> function FrameLoaded() { window.setTimeout(ReloadFrame, 1500); }; function ReloadFrame() { var d; d=new Date(); document.getElementById("webcam").src="motion.jpg?"+d.getTime(); }; </script> </head> <body> <img id="webcam" src="motion.jpg?" alt="motion camera image" onload="FrameLoaded()"> </body> </html>




Reply With Quote