Upload images for viewing on a webpage

[JonasanOniem]

Hi,
I have ZoneMinder installed on a Raspberry Pi 4. It gets images from a connected USB camera and from another Raspberry Pi 4 (with a Raspberry Camera, using an UDP stream). Everything seems to work. I still have to learn all possibilities.

I would like ZoneMinder to upload pictures with FTP (not events and without compression like tar/zip) and rename them so I have for instance 100 pictures. Only the newest 100 pictures should be kept, so my webspace doesn't get overloaded. The renaming is so I can make a webpage where I can see those pictures. I assume I have to use temporary files for this.

I wouldn't need local copies (I guess I can find out myself how to achieve that, reading the documentation careful).

There is an old post talking about this partly: viewtopic.php?t=11791.

I'm no linux-guru or programmer, I know some basic linux commands (and html and css). I made my first bash-script yesterday with help from ChatGPT. .

Can anyone point me in the right direction to accomplish this? Is it doable? Easy?

[JonasanOniem]

Could I use Filters for this?
https://zoneminder.readthedocs.io/en/la ... vents.html

[burger]

I would like ZoneMinder to upload pictures with FTP (not events and without compression like tar/zip) and rename them so I have for instance 100 pictures. Only the newest 100 pictures should be kept, so my webspace doesn't get overloaded. The renaming is so I can make a webpage where I can see those pictures. I assume I have to use temporary files for this.

Path for a single screenshot is here: https://wiki.zoneminder.com/Example_Cam ... apshot_URL
I'm not sure how you would get sequential frames from an event out of this, but perhaps it's possible. There's also the zmu command (see link). If you have jpeg saving on, it would be easy. For h264, I'm not quite sure what you would do.

Do you want the last 100 frames of an 'event', or just the last 100 frames/seconds?

You don't need to do this in ZM, you can do it in bash. What you are asking is not difficult (I could probably do it), but i don't think anyone is going to do the work unless you pay them. You 'could' pay the developers here to do functionality like this, if you have the resources.

What are you going to use for a picture gallery? There are a number of image galleries in php that would work. I've worked with for example UberGallery see https://github.com/UberGallery/UberGallery. I have some install notes. if you are interested, I can copy them here in a code tag.

So what you are asking is relatively easy, but you must at least be novice level with linux, bash, php, apache/nginx etc...

[JonasanOniem]

Thanks for your feedback burger.
The "gallery", I could write in in HTML, with images 1 tot 100 (image001.jpg to image100.jpg, something like that) and a certain refresh-rate.

I know some basic linux-commands, and I'm willing to learn what I need to, to write a bash script (I did that for the first time last week, using ChatGPT to help me, in the end I think it took longer to explain to ChatGPT then when I would have written everything myself ).

I don't know _where_ exactly I would have to put that script. So if ZoneMinder is set to take a single snapshot with the URL you gave me, the script would have to rename image001 to image002, image002 to image003, etc. and then upload it to my website. And removing image100 (the old 100).
I don"t know how you have to "let a script run" and where in the process you have to put it. Also, if you upload an image with the same name, how you make sure the previous image is replaced, would it give an error or just overwrite?

It's a unnecessary experiment, a challenge for myself, not something I would bother anyone else with (I mean: let somebody do it for me).

[burger]

I don't know _where_ exactly I would have to put that script. So if ZoneMinder is set to take a single snapshot with the URL you gave me, the script would have to rename image001 to image002, image002 to image003, etc. and then upload it to my website. And removing image100 (the old 100).
I don"t know how you have to "let a script run" and where in the process you have to put it. Also, if you upload an image with the same name, how you make sure the previous image is replaced, would it give an error or just overwrite?

It's a unnecessary experiment, a challenge for myself, not something I would bother anyone else with (I mean: let somebody do it for me).

You can put the script anywhere on the filesystem. You can run the script in cron or turn it into a service. If you don't know how to make a service, just look it up online: e.g. https://stackoverflow.com/questions/223 ... -a-service As for the image being replaced, use zmu and you can overwrite the files, or have the script programmatically create new names for the files, and delete the older files (i.e.

Code: Select all

ls -lt *.jpg | tail 100 | xargs rm

) or something along these lines (I don't think that will work, but you should be able to figure it out) is an example of bash removing only the last 100 jpeg files. So start there, with piping basic commands together. This is not really ZM territory, you may want to use the OS as a daily driver. There's probably a million introductory unix / linux books out there that cover this. Unfortunately I don't have a recommendation at the moment, but it's all in the books, and I'm sure there are a lot of tutorials online for getting started as well.

If you can pipe commands together than you can use bash to script. If you can use bash to script, you can probably pick up a scripting language like python and do the same thing if you are so inclined.

[JonasanOniem]

OK, thanks!

That are good starting points. Once I have time, a start trying. Maybe I post the result, if I succeed (like the script, so others can use it).

[Taxicletter]

I solved it with MotionEye OS, where you can upload the pictures with ftp.
Then I made a php page (thanks to Ecosia AI) which shows the pictures on a website. It was experimenting a bit, because the PHP-thing didn't follow the correct path at first, I had to put the picture folder in the same folder as where the php-page was.

Code: Select all

<!DOCTYPE html>
<html lang="nl">
<head>
	<meta http-equiv="refresh" content="30">
	<title>HuisVideo</title>
</head>
<body>
    <h1>Afbeeldingen MotionEye OS</h1>

    <table>
        <tr>
            <?php
            $map = 'Camera/'; // pad naar de map met afbeeldingen
            $afbeeldingen = glob($map . '*.{jpg,jpeg,png,gif}', GLOB_BRACE); // haal alle afbeeldingen op in de map

            $kolom = 0; // initialiseer de kolom teller

            foreach ($afbeeldingen as $afbeelding) {
                if ($kolom % 4 == 0) {
                    echo '</tr><tr>'; // start een nieuwe rij na elke 4 afbeeldingen
                }

                echo '<td><img src="' . $afbeelding . '" alt="' . basename($afbeelding) . '"></td>';
                $kolom++;
            }
            ?>
        </tr>
    </table>
</body>
</html>