Display jpg from camera

Hello, I am drawing some sensor data from some raspberry PIs for my smart home project. This works very well, but since most of the information drawn from the project is present in grafana I wanted to also add a few panels containing a snapshot from my various security cameras. Long story short the snapshots are available on a server with the same name. For example camera 1 would have the url: https://domain/cams/camera1.jpg. I am currently using Dynamic image panel to accomplish this and the image does load. But it also doesn’t refresh. I have to press ctrl+f5 to reload the grafana page in order for the jpgs to be updated in the dynamic image panels. I always have the same name for the camera jpg because the space available on that particular server is very limited and I cannot upload a new jpg file each time. So, is there anyway to make dynamic image panel update the jpgs when the whole grafana dashboard updates like it is set now for every 1 minute?

Thank you.

IP cameras (each with its own unique IP address) or NVR? We use HikVision IP cameras and connect Grafana to each using the HTML panel, and it auto refreshes every 5 seconds.

The house is in a remote area (mountains) with an internet connection that doesn’t allow me to do any port forwarding. So I cannot use hikvision. I setup a raspberry pi to connect directly to the IP cameras and use ffmpeg to save a jpg file. Then that jpg file is uploaded to a server from where grafana can access it via an URL. The catch is that that URL is always the same and it doesn’t get updated once it is first loaded.

I wonder if apache echart grafana plugin can come in handy with the refresh issue or some sort of lightbox carousel?

@mikhailvolkov

If you add a random number or something like that to your image URL as a parameter it should refresh. I have never used the HTML panel so not sure what’s possible there, but you can do it easily enough using the old table panel (table-old) and it’s Sanitize HTML feature for string type column styles.

For example with a MySQL database source something like:

SELECT concat('<img src="https://my_image.jpg?random=', rand(), '" height="200">') as img from dual;

1 Like

Hmmm good ideea! :slight_smile: I added a random number after .jpg to the url and it works perfectly.

Thank you!