Webcam image refresh with preloading

This site is best viewed in a modern browser with JavaScript enabled.

batfastad

Hi everyone

I'm looking for a way to reload a webcam image every 5-10 seconds, but I don't want to be refreshing the whole page with a basic meta-refresh.

I'm not great with Javascript, other than for basic form validation stuff, but the following code is giving me a confusing error in FireFox 2

This is what I've tried to get so far:

<html>
<head>

<script type="text/javascript">

function webcam_reload() {
	var newImg = new Image();

newImg.src = 'cam1.jpg?';

	newImg.onload = function () {
		var theImg = document.getElementById('webcamimg');
		theImg.src = newImg.src;
	}

	theImg = null;
	newImg = null;
}

setInterval("webcam_reload()", 1000);


</script>

</head>
<body>

<script>

</script>

<img src="cam1.jpg" alt="" border="0" name="webcamimg" id="webcamimg" />

</body>
</html>

The error I'm getting is:
Error: newImg has no properties
Source File: webcam.html
Line: 13

Is there anyone out there who knows what the problem is?
Or is there an alternative technique I should be looking at?

Thanks, Ben

FireDune

<script language="javascript" type="text/javascript" >
<!--
function ChangeMedia(){
	var d = new Date();
	var t = d.getTime();
	document.getElementById('camara').src = "_streaming/cam0.jpg?"+t;
}
var reloadcam = setInterval("ChangeMedia()",2000);
-->
</script>

<img src="cam0.jpg" alt="Loading..." name="camara" width="450" height="335" border="0" id="camara" />

This works will refresh the image every 2 seconds

http://hotelpuertoviejocr.com

matvel

What shall i do more if I have more than one image i wish to reload?

I had tried adding the document element but its not working fine.

any help please?

FireDune;1018345 wrote:
<script language="javascript" type="text/javascript" >

</script>
<img src="cam0.jpg" alt="Loading..." name="camara" width="450" height="335" border="0" id="camara" />
This works will refresh the image every 2 seconds

http://hotelpuertoviejocr.com

vertex2017

Firedune's solution worked very well for me, but what is the script and body code if you wish to refresh 2 (or more) webcam images (with the same or a different interval) on the same page?

root

Please don't resurrect old posts.

Sempervivum

Check if this is what you require:

<img id="camera1"><img id="camera2"><img id="camera3"><img id="camera4">
<script type="text/javascript" >
function ChangeMedia(){
    var d = new Date();
    var t = d.getTime();
    document.getElementById('camera1').src = "img/cam1.jpg?"+t;
    document.getElementById('camera2').src = "img/cam2.jpg?"+t;
    document.getElementById('camera3').src = "img/cam3.jpg?"+t;
    document.getElementById('camera4').src = "img/cam4.jpg?"+t;
}
var reloadcam = setInterval(0ChangeMedia, 30000);
</script>

This code is appropriate only if there are a few cams. If there are a lot, a loop should be used instead.

Train

First post 08-03-2008