[JavaScript] Improved Webcam Script
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:
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>
However I found that the browser could often end up getting out of sync and start "tripping up" and even stop unexpectedly.
Instead I find a small variation improves stability quite a bit:
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>
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.
