Forum Moderators: not2easy
I have a webcam, showing one of our widgets in live-action. A partner has a webcam, showing a place in our town. I want to create a page, where BOTH webcam images are displayed as LIVE feeds.
Problem:
While my image - being an MJPEG image - updates nicely without ugly META REFRESH reloads of the whole page, my partners webcam image is only available as static JPEG file. I found a lot of information on how to put LOCAL static images in a continuous loop onto a page. But I found no way so far to grab a REMOTE image and update it once a second without using Meta Refresh.
Any advice?
<script type="text/javascript" language="javascript">
<!--
function reloadImg(tImg, tTimeout) {
if(!document.images[tImg]) tImg = tImg.name;
uniq = new Date();
newImage = document.images[tImg].src;if(newImage.indexOf ("?")!= -1) {
uniq = "&uniqid="+uniq.getTime();
index = newImage.indexOf("&uniqid=", 0);
}
else {
uniq = "?uniqid="+uniq.getTime();
index = newImage.indexOf("?uniqid=", 0);
}
if(index > 0) {
newImage = newImage.substr(0, index);
}
document.images[tImg].src = newImage+uniq;
//alert("Timeout: " + tTimeout);
setTimeout('reloadImg('+tImg+','+tTimeout+')', tTimeout * 1000);
}
// -->
</script>
Now put this in the <body>:
<body onLoad="reloadImg('campic1',10); reloadImg('campic2',30); ">And finally don't forget the name-attribute with the images:
<img src="http://www.example.com/webcamimage.jpg" name="campic1">
<img src="http://www.foo.bar/anotherwebcamimage.jpg" name="campic2">
Names are interchangeable. Image adresses can be relative or absolute, dynamic or static, local or remote.
