Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Webcam - Image Array script not working

Status
Not open for further replies.
migz1

migz1

Technical User
Apr 30, 2009
7
0
0
AU
Hi guys,

I'm having some trouble executing my script and I'm not sure where I am going wrong.

It for a webcam - The web cam captures 5 images a second and is saved into a directory, (only 5 images) and the 5 images gets over written every 1 second.

The script needs to read in sequential order 1-2-3-4-5 and loop back, refreshing the images.

I hope someone can help.... Thanks in advanced.

<html>

<head>

<script type="text/javascript">

var mypics = new Array(); //making a new array
mypics [0] = " //storing dead paths
mypics [1] = "mypics [2] = "mypics [3] = "mypics [4] = "


<!--

function refreshImage()

{
var img = document.getElementById('idofyourimage');

i=integer; //integer value...

for (i=0;i<5;i++) // makes it loop through array with pointer of i;
{

img.src=mypic;

}

setTimeout("refreshImage()", 4000);

}


//-->

</script>

</head>



<body>

<img src="cam2images/snap.jpg" id="idofyourimage" width="600" height="480" />




<script type="text/javascript">

<!--

setTimeout("refreshImage()",1000);

//-->

</script>

</body>

</html>
 
Sort by date Sort by votes
I'd try something like the following :

var mypics = new Array(); //making a new array
mypics [0] = "mypics [1] = "mypics [2] = "mypics [3] = "mypics [4] = "var imgIndex=0;

function refreshImage()
{
var img = document.getElementById('idofyourimage');

imgIndex=imgIndex+1; // increment the counter

// reset the counter if we have exceeded the size of the array
if (imgIndex>mypics.length)
{
imgIndex=0;
}

img.src=mypics
; // set the source of the image

setTimeout("refreshImage()", 4000);
}


//-->

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
 
Upvote 0 Downvote
There are a few errors, including what looks like hybrid VB/JS code (you don't define new integer values like that).

Give this a go... notice how I'm using setInterval instead of setTimeout so you don't need to constantly call the function:

Code: 
<html>
<head>
	<script type="text/javascript">
		var mypics = [];
		mypics[0] = '[URL unfurl="true"]http://localhost/cam2images/snap1.jpg';[/URL]
		mypics[1] = '[URL unfurl="true"]http://localhost/cam2images/snap2.jpg';[/URL]
		mypics[2] = '[URL unfurl="true"]http://localhost/cam2images/snap3.jpg';[/URL]
		mypics[3] = '[URL unfurl="true"]http://localhost/cam2images/snap4.jpg';[/URL]
		mypics[4] = '[URL unfurl="true"]http://localhost/cam2images/snap5.jpg';[/URL]

		var image;
		var imageNum = 0;

		window.onload = function() {
			image = document.getElementById('idofyourimage');
			setInterval('refreshImage();', 1000);
		}

		function refreshImage() {
			image.src = mypics[imageNum++];
			if (imageNum == mypics.length) imageNum = 0;
		}
	</script>
</head>
<body>
	<img src="cam2images/snap.jpg" id="idofyourimage" width="600" height="480" />
</body>
</html>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Thank you all so much....

Dan the code works great.... I couldn't figure out where I went wrong... Now, I understand...

Thanks a bunch guys !!!!!
 
Upvote 0 Downvote
The code seems to be caching --- ie; if the snap.jpg is moved or rename it doesnt seem to pick it up...

Should add somewhere

?rnd=" + (newDate()).getTime() + "'>";

//to the end of the jpg to pick up changes ??

or should I add a no-cache to the html ? (it works this way but, I don't need the whole page to refresh)...

<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</HEAD>
 
Upvote 0 Downvote
Hi I just got it...

I added and additional :

image.src = mypics[imageNum++] + '?' + (new Date()).getTime();

to it.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
217
MDGarcia
MDGarcia
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
108
waubain
waubain
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
79
feherke
feherke
bslintx2021
  • Locked
  • Question
How to convert delimited string to an array of array names 1
Replies
2
Views
70
bslintx2021
bslintx2021
tonynsx
  • Locked
  • Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
60
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top