Webcam image refresh with preloading

**batfastad** · 08-03-2008, 08:22 PM

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:

Code:

<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** · 07-02-2009, 09:10 PM

HTML Code:

<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>

HTML Code:

<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** · 11-12-2012, 04:55 PM

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.

<script language="javascript" type="text/javascript" >

</script>

any help please?

-----------------------------------

Originally Posted by FireDune

HTML Code:

<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>

HTML Code:

<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

Thread: Webcam image refresh with preloading

Thread Tools

Display

Webcam image refresh with preloading

More than one image

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions