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