Display base64 live image from MQTT datasource

Hello,

From an MQTT data source, I want to display an image from a webcam in a panel in real time.

The image is sent to the “robot_telemetrie/image” topic in base64 in a JSON of the form

I can display it with the Volkov Lab “Business Media” plugin but after a few seconds, the image starts to freeze and crashes.

I also tried with the “Table” visualization which seems a little less freezing (by limiting the result to a single row and not displaying the “Time” column). But the image is very small in the cell and I can’t enlarge it (except by hovering over it).

Do you have any solutions to do this?

Attachments include screenshot. Sorry, but I can’t upload dashboards exports (I am a newbie !)

Thanks,
Nicolas

@peltiern Could you please provide details for “freeze and crashed” in the Business Media panel.

We have not tested it with MQTT data source. Is it streaming data or how do you use it?

You can try Business Text panel to display image using data url to see if it works for you.

Hi @mikhailvolkov,

The word “crashed” is a translation error. I’m thinking more of an overload either of the plugin or of the browser. I don’t think it comes from the server side push.

I don’t use an URL. I have a JAVA back server which pushes an image at 20fps in a scheduled manner on the MQTT robot_telemetrie/image topic. It is a JSON object :
{"image":"data:image/jpg;base64,{base64_image_data}"}

In docker, I have :

  • a Mosquitto broker
  • a Grafana instance

The MQTT datasource is linked to the broker.

Here is a linked video of what I see with the plugin.
The JSON dashboard

In capture, the panel settings

The source of my POC project : GitHub - peltiern/test-mqtt-grafana

Nicolas

@peltiern Thank you for providing details.

I requested access to the video and JSON dashboard.

Could you please add README to the POC project for us to run it and test locally.
I will ask my team to review it. It’s an interesting topic for a blog post and video to showcase our Business Media panel.

@mikhailvolkov I put the 2 links in public.

I use IntelliJ to run docker and Java program.
But I am going to try to write a README. For information, I am on Ubuntu and I use Java and Maven

might also help to get your github repo have the whole end to end pieces configured in the docker-compose.

the dashboard/datasource provisioning etc. so that someone can just run

podman-compose up -d --force-recreate and everything is up and running.

1 Like

@peltiern Green circle indicated that panel is running in the streaming mode and most probably number of rows increasing with base64 images.

Especially, If you are sending high-res images it can use a lot of memory.

@mikhailvolkov Is it possible to reduce this number of lines (or remove unnecessary lines from memory)?

@peltiern Try to decrease Max data points to 10-20 to see if it helps.

Screenshot 2024-07-25 at 7.55.39 PM

The latest version of Business Media supports navigation in the toolbar. I wonder if it works with MQTT.

@mikhailvolkov @yosiasz
I dockerized the apps and added a README (GitHub - peltiern/test-mqtt-grafana).
Tell me if it works. :wink:

@mikhailvolkov

No change. It still freezes.

1 Like

@mikhailvolkov
Do you have some news ?

Thanks.

Nicolas

@peltiern I have opened an issue in the GitHub repository to investigate: Display base64 live image from MQTT datasource · Issue #138 · VolkovLabs/business-media · GitHub

@peltiern We tested Websocket and MQTT streaming data sources with Business Media panel today and it worked as expected displaying moving images. We also tried auto and limited Max data points.

We are preparing the blog post with details. I will post a link when published.

1 Like

Thanks @mikhailvolkov.
It works fine ! So, it was just a configuration problem.
I updated my POC on GitHub.

1 Like