How to pull multiple ESP32 CAM video streams to a web dashboard on Phoenix


I would like if somebody could tell me a starting point or a draft architecture design for what I want to achieve. (Links, documentation, examples, all help). I found already some resources but some are old (2017/18) and others might not be exactly what I need.

Here is description:

I have a raspberry pi 3 B, running Nerves and Phoenix (live).
At the moment I managed to generate a page with some buttons where I can control Sonoff wireless switches via REST API.
Now I would like Phoenix to connect to one, or more, ESP32 CAM which streams a video on its own webserver. I can watch ESP32 CAM video stream on a web browser, therefore I assume I could take that and other streams with a background process and forward them to a Phoenix web Dashboard.

Would it be possible to use LiveView for this, or it does not make sense?
Are there any uptodate library I could start reading about?
What would be the streaming pipeline for this case?

Thank you so much in advance

Good to see other folks working with ESP32 and Phoenix!

As I understand it, you have 3 devices: ESP32(s), Phoenix Server and your user(s).

Are they all on the same network/with access to each other? If so, you could just embed the ESP32 streams as iFrames on a Phoenix rendered page. LiveView won’t really add anything to this so I don’t see value unless there are other interactive elements on the page.

If the user is remote and connecting to the Phoenix server, then assuming the Phoenix app can access the ESP32s, I would use Finch or similar to capture the ESP32 streams and re-render to the Phoenix page. It may even be possible to proxy the streams directly to the end user instead of rendering.

I haven’t used the ESP32 CAM myself - what’s the encoding on the stream?

Hello Tej,
Thank you for your replay. The cameras are connected to the local net via wifi. The Raspberry pi 3 is connected via Ethernet to the switch, the user/client uses wifi, all connected to in the same intranet.
The format of ESP-CAM stream is MPEG.
I am interested in the solution to proxy the streams directly to the clients, I will start digging in to that. Thank you!

If they are all on the same network, what value does a proxy add? Wouldn’t that just slow down the stream while adding complexity?

I would either use iframes or create a list of the ESP32 stream URLs and let the user access each directly.

We are shortly releasing a library for ESP32 which allows each of them to send data to Phoenix via Channels. You could then use Presence to dynamically update the streams in case some ESPs drop off.

Oh, that is great, where is the repo so I can follow the progress?

I was checking ESP32 CAM and it is mentioned that if each client is served individually then the client with lowest bandwidth will miss packages, this is solved adding RTOS to ESP32 which increases the complexity in the camera devices and makes more complex the deployment.
The replacement or aggregation of ESP units should be as simple as possible, thus delegating the complexity to the server (Raspberry or something more powerful if needed) is just fine.

The second reason for sending the stream via the raspberry pi is because I can store it to an external disk if needed and at the same time forward it to the web user.

I will share it here shortly, my teammate has to extract the code from one of our products into a library. We are aiming to follow the same spec as the JS client - although we won’t have all the features to start with. We currently have phx_join, new_msg, phx_reply and disconnect handlers.


Started documenting the specification here - Client for Phoenix Channels · Issue #13 · IoTReady/esp32_firmware_base · GitHub

Feel free to add or comment.


@Snake-Sanders - we have a very early release of the ESP32 client. Please note that response and error handling is still WIP.


thank you for sharing

1 Like