Skip to content

nopnop2002/esp-idf-mqtt-image-client

Repository files navigation

esp-idf-mqtt-image-client

GUI MQTT client for image display for esp-idf.
I used this component.
This component can communicate directly with the browser.
There is an example of using the component here. It's a great job.

I use this index.html.
I use this open source framework.

mqtt-image-view-1 mqtt-image-view-2

Software requirements

ESP-IDF V5.0 or later.
ESP-IDF V4.4 release branch reached EOL in July 2024.
ESP-IDF V5.1 is required when using ESP32-C6.

Installation

git clone https://github.com/nopnop2002/esp-idf-mqtt-image-client
cd esp-idf-mqtt-image-client
git clone https://github.com/Molorius/esp32-websocket components/websocket
idf.py menuconfig
idf.py flash monitor

Application Setting

config-top config-app-1

You can use the MDNS hostname instead of the IP address.
config-app-2

How to use

  • Open browser.
  • Enter the esp32 address in your browser's address bar.
    You can use the mDNS hostname instead of the IP address.
    Default mDNS name is esp32-server.local.
  • Enter Host & port.
    You can specify the mDNS host name like mqtt-broker.local for the host name.
    You can use broker.hivemq.com.
    Press Connect button.
  • Press Subscribe button.

You can publish new topic using mosquitto_pub.

mosquitto_pub -h broker.hivemq.com -p 1883 -t "testtopic/electron/esp32.jpeg" -f esp32.jpeg
mosquitto_pub -h broker.hivemq.com -p 1883 -t "testtopic/electron/esp_logo.png" -f esp_logo.png

How this project work

Read Sending_image_via_mqtt.txt.

Reference

https://github.com/nopnop2002/esp-idf-mqtt-client