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!

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

Webcam Code - Problem with script for additional camera

Status
Not open for further replies.

migz1

Technical User
Apr 30, 2009
7
AU
Hi,

I've just bought an additional webcam to add to my site. I wanted to create a admin panel where both cameras are streaming on the same web page. Can someone tell me where I have gone wrong ?

<head>
<META HTTP-EQUIV="Refresh" CONTENT="1200;URL=http://localhost/index.php">
</head>

<body>
<table width="700" border="0" cellspacing="2" cellpadding="2">
<tr>
<th scope="col">Camera 1</th>
<th scope="col">Camera 2</th>
</tr>
<tr>
<td>
<script type="text/javascript">

var mypics = [];
mypics[0] = 'camera1/image1.jpg';
mypics[1] = 'camera1/image2.jpg';
mypics[2] = 'camera1/image3.jpg';
mypics[3] = 'camera1/image4.jpg';
mypics[4] = 'camera1/image5.jpg';

var image;
var imageNum = 0;

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

function refreshImage() {
image.src = mypics[imageNum++] + '?' + (new Date()).getTime();
if (imageNum == mypics.length) imageNum = 0;
}
</script>
<img src="camera1/image1.jpg"; id="idofyourimage" width="480" height="320"/></td>
<td>
<script type="text/javascript">

var mypicscam2 = [];
mypicscam2[0] = 'camera2/image1.jpg';
mypicscam2[1] = 'camera2/image2.jpg';
mypicscam2[2] = 'camera2/image3.jpg';
mypicscam2[3] = 'camera2/image4.jpg';
mypicscam2[4] = 'camera2/image5.jpg';

var imagecam2;
var imageNumcam2 = 0;

window.onload = function() {
imagecam2 = document.getElementById('idofyourimagecam2');
setInterval("refreshImagecam2()", 1000);
}

function refreshImagecam2() {
imagecam2.src = mypicscam2[imageNumcam2++] + '?' + (new Date()).getTime();
if (imageNumcam2 == mypicscam2.length) imageNumcam2 = 0;
}
</script>
<img src="camera/image1.jpg"; id="idofyourimagecam2" width="480" height="320"/></td>
</tr>
<tr>
</table>
</body>
</html>



 
Maybe if you explain what problems are you getting ...

Btw, I'd put all the scripts together and outside the body, not in a TD

Cheers,
Dian
 
What is happening is that only one camera is streaming live and working. The other one is not displaying at all (It displays it for 1 second) and disappears.

Thanks, for your quick response I will remove it out of the TD - but surely that can't be the problem.
 
That won't be the problem for sure, but will help to determine it.

One hint: you're setting the window.onLoad twice. Maybe the second cal is overwriting the first one

Cheers,
Dian
 
Thanks Diancecht !!!!

It was the window.onload twice that caused the issue...

So instead i called the

window.onload = function() {
image = document.getElementById('idofyourimage');
setInterval("refreshImage()", 1000);
imagecam2 = document.getElementById('idofyourimagecam2');
setInterval("refreshImagecam2()", 1000);

in the last bit of the javascript and removed the window.onload function in the first section....

Works a treat !!!

Thanks so much !!!!
 
Glad you got it to work.

That wouldn't have happened if you didn't have your script spread around all the page ;)

Cheers,
Dian
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top