Live Tourist Webcam problem

axer

Hi Everyone,

Sorry this is so long.

I setup a tourist webcam for my local town for their website using an ip camera. It has a a cat5 cable connection back along the street to a local business who allowed me plug it into their 1Mb ADSL line.

I initally setup the webcam page on the website to automatically pull an frame/image every 7 seconds from the webcam for each user. As the uplink on the broadband is only 128Kbps - it didnt take much to max out the ADSL uplink.

It seems I am left with one alternative that I can think of - which is to upload a frame/image every 7 seconds from the webcam to the website's webserver and use either JAVA or Javascript to refresh the frame/image on the webcam webpage taking the load off of the webcam ADSL link and putting it on the webserver (which can handle it) instead.

So at present the webcam uploads a frame/image (image.jpg) every 7 seconds to the webserver hosting the town's website (overwriting the last frame/image) and the webcam page refreshes the image every 7 seconds.

This current setup, however, is creating a problem.
Firstly - if a user visits the webcam page while the image is still being uploaded they will only see the amount of the image that has been uploaded at the time the webpage displayed the image e.g. it might only show a third of the image as the webcam was not finished uploading the image when the webpage called for it.
Secondly - As the length of time it takes to upload the frame/image (12-15KB) varies the webcam page will inevitably try to refresh the image even though it has not been fully uploaded by the webcam resulting in half the image being missing e.g. it could take half a second up to 2 seconds to upload the frame/image depending on a number of factors.

Usually the webcam page displays about 6/7 frames fine (refreshing the frame every 7 seconds) but then 8th frame might have a small piece at the bottom missing. The next 4/5 frame refreshes after that have more and more missing each time until no image is displayed at all. Then finally the next frame is full again. The whole process repeats itself over and over again.

This is all obviously caused by a refresh timing issue but how do I know how long to set the refresh time when it can vary each time?

Anyone got any ideas? Does anyone know of a JAVA applet/AJAX script or any solution that could maybe detect when the next image is ready to be displayed?

I can have the webcam automatically number the images it uploads upto a certain specified number (e.g. 10) so that it does not overwrite the last image uploaded e.g. image1.jpg; image2.jpg;....image10.jpg; image1.jpg;...
Or I can have a timestamp put in the image name e.g. image01012007_165507.jpg; image01012007_165514.jpg; image01012007_165521.jpg;

Any ideas/help/advice are much appreciated.

Webmonkey

hmm, why not the webcam upload the image.jpg file as it currently is doing obviously.
Now have a little PHP script to run each time the page refreshes.
This PHP script checks for image.jpg, if it exists then it copies and overwrites image_live.jpg. Once copy is successful (will only take fractions of second to happen), the image.jpg file is deleted by the script. And the page loads like normally loading image_live.jpg into the web browser.

This way you are giving the webcam a buffer (maybe not the best word) to upload before going live.

This is what I would do anyways.

The php script would be very simple. Maybe pheudocode like this:

if file_exists(image.jpg) 
{
then copy image.jpg to image_live.jpg
delete(image.jpg)
}

//Page load as normal after this.

And yes AJAX would be the best way to handle this, I would keep away of JAVA applets if I were you, AJAX looks a lot better.

Need a hand let me know.


EDIT: So much for all that, it just ends up having the same problem - just because the file exists doesn't mean its full uploaded. I'm thinking again...

I suppose you could check the size of the file but the problem is that the size can vary

axer

Thanks Webmonkey. Yes the size can vary by a few KB each time.

What I was thinking of doing is having the webcam upload image1.jpg as the first frame followed by image2.jpg as the second frame all the way to image5.jpg as the 5th frame. The webcam would then upload image1.jpg as the 6th frame and so on. Then the php script checks the directory where the frames are uploaded to and finds which file is the newest out of the 5 images currently in the directory (image1.jpg.....image5.jpg) e.g. image4.jpg. It then goes back 3 frames e.g. if image4.jpg is the newest then it starts the webcam displaying image2.jpg then on to image3.jpg and so fourth. If image2.jpg is the newest it starts with image5.jpg and then on to image1.jpg and so fourth. This means the webcam page is always 3 frames behind the webcam giving it a bit of a headstart.

1. Find last modified image in the directory (doesn't matter if that file is not fully uploaded).
2. Calculate back 3 frames (i.e. image1.jpg -> image4.jpg) from the last modified file.
3. Load webcam page starting with image4.jpg and progressing through the images as normal.

Or I could work with 10 frames (image1.jpg......image10.jpg) and move back 5 frames for extra buffer if needs be.

Does this sound viable or does it sound a bit too messy?

There has to be some sort of script out there that has been created for a similiar type of problem before.

Webmonkey

Yes that does sound like a good idea alright, Sounds messy but i don't think it would be hard to code to be honest. Wait and see if anyone else comes up with a solution, though that one sounds good

axer

Ok, I have used PHP to find the 4th last file that was uploaded by the webcam but I am not very familiar with Javascript to either port what I did in PHP to Javascript or to use the findings of the PHP as a basis for the Javascript to continue from I.E. the PHP tells the javascript what numbered jpg to start from (e.g. "5.jpg") and increments the number from there until it reaches "10.jpg" at which point it starts at "1.jpg" again. So basically the PHP is just telling the Javascript where to begin.

[PHP]<?php

$path = "frames/";

// Return the newest webcam frame file name
function NewestFrameFN ($path) {
// store all .jpg file names in array
$p = opendir($path);
while (false !== ($file = readdir($p))) {
if (strstr($file,".jpg"))
$list[]=date("YmdHis ", filemtime($path.$file)).$file;
}
// sort array descending
rsort($list);
// return newest file name
return $list[3];
}
?>
[/PHP]After using the above code I then chopped of the date and the file extension from the returned string ($list[3]) which leaves me with just the number of the file that should be used. I then want Javascript to use this as a basis to continue i.e. keep incrementing from that number until 10 then reset to 1, or I want Javascript to find the information I found using the above PHP each time so that it always knows which image to update to.

Any help/advice is much appreciated.

frodo_dcu

try this http://www.phpied.com/ajax-banner-rotation/
look at the Stoyan comment on may 30th too, i'm sure you shoud figure it out from there

axer

Here is the code I put together to solve this problem if anyone wants it. If anyone can see a way of improving the code then please let me know.

[PHP]<?php
// Set the base URL
$base_URL = "http://www.yourdomain.com/webcam/";

// Set the relative path to the webcam frames
$path = "images/";

// Set the width of the webcam frames
$width = 320;

// Set the height of the webcam frames
$height = 240;

// Setup the refresh delay * 1000
$speed = 3000;

// Return the name of the image to display
function NewestFrameFN ($path) {
// store all .jpg file names in array
$p = opendir($path);
while (false !== ($file = readdir($p))) {
if (strstr($file,".jpg"))
$list[]=date("YmdHis ", filemtime($path.$file)).$file;
}
// sort array descending
rsort($list);

// Return the 6th webcam image in the array i.e. 6 frames behind the current
return $list[5];
}
?>

<script language="javascript">
// Array to hold the names of the range of images
imgAr = new Array();
<?php
// Create the javascript to insert the range of images into the javascript array "imgAr"
for ( $i = 1; $i <= 10; $i++)
{
echo "imgAr.push(\"".$base_URL.$path.$i.".jpg\" ); ";
}
?>
//
var k = <?php echo substr(substr(NewestFrameFN($path),15),0,-4); ?>;
var wid12 = <?php echo($width); ?>;
var hig12 = <?php echo($height); ?>;

if (document.images)
{
var rImg = new Array();
for (var i=0; i<imgAr.length; i++)
{
rImg = new Image(wid12,hig12);
rImg.src = imgAr;
}
}

function rotater()
{

document["webcampic"].src = rImg[k].src + "?" + Math.random();

if( k < (imgAr.length-1))
{
k= k+1;
}
else
{
k = 0;
}

rTimer = setTimeout('rotater()', <?php echo($speed); ?> );
}
</script>
<img width="<?php echo($width); ?>" height="<?php echo($height); ?>" name=webcampic src="<?php echo $base_URL.$path.substr(NewestFrameFN ($path),15); ?>">
<script language="javascript">
rotater();
</script>[/PHP]What I would love to be able to do is put the local time and location of the webcam on the image itself as there is no time stamp option on the webcam that I am using. Anyone got any ideas?

Webmonkey

Looks good.
You could use the GD library to create an overlay text with the current date and time over it though it would be slightly off as the image was created a bit earlier.

You would have the php file then as the image location and this wil create the image for you. You could handle all the array stuff in php thenr ather than the javascript.
Then use ajax to refresh the image div every so many seconds or what ever.

axer

Thanks Webmonkey.