CODEWITHSUNDEEP
javascriptphpimage
T. Endacott
T. Endacott

Reputation: 11

Display most recent image in folder, refreshing automatically

I have a webcam that uploads a photo about every 30 seconds to a specific folder via FTP. The files are named using the date and time they were created.

For example the image "image20161023s131200029.jpg" will have been created on the 23/10/2016, at 13:12:00. The way the images are named cannot be changed. The next image will be uploaded about 30 seconds later, but not exactly so it is not possible to predict the next file name.

I wish to display the most recent image and refresh this every 30 seconds.

My problem is that I can display the most recent image in php, using scandir() and sort() to get the most recent image, but as this is in PHP it cannot be refreshed. I could also use JavaScript to referesh an image at a given interval if the location was always the same, so if the most recent image was always at "/webcam/webcam01.jpg" then this would be fine. However I am not sure how to do this when the image name will constantly be changing, if anyone knows the best (or atleast a working) way to do this that would be fantastic.

I hope that I have been clear about what I am trying to do, sorry if this has been answered before - I have tried both this sites search and google to no avail.

Upvotes: 1

Views: 1431

Answers (1)

Adrian
Adrian

Reputation: 2923

Ok so what I think the solution here given your constraints will require you to use your server side code (PHP) to resolve the latest image file name and expose that through a REST endpoint.

So your javascript code would make a request to your server for the image file url. Your PHP code would find the latest image and return the appropriate url for that file. It would look something like this:

// Function to refresh the image.
function refreshImage() {
    $.get("myserver/getImageUrl", function( data ) {
        $("img").attr('src', data);
    });
}

//refresh image every 31 seconds
setInterval(refreshImage, 31000);

Essentially without being able to control the file name you will need to use your server side code to resolve the file name for your client side code. If you could control the output file name to make it predictable or to have the latest image always be the same name then you wouldn't need the server side piece.

Upvotes: 1

Related Questions