The ESP32-CAM is a development board based on the popular ESP32 microcontroller and a 2 megapixel OV2640 camera sensor that can capture images up to 1600 x 1200 pixels and stream video at a maximum resolution of 640 x 480 pixels. This low-cost, compact, and easy-to-use board is commonly used to develop IoT applications that require image and video streaming.
In this tutorial we will use the RTSP protocol to stream the video captured by the ESP32-CAM. The RTSP is a network protocol used for controlling the delivery of streaming media, such as audio and video, over IP networks.
It's important to note that streaming video over RTSP requires a stable and reliable network connection. You may need to adjust the video quality settings or use a dedicated streaming server to ensure smooth and uninterrupted streaming.
By the end of this guide, you will able to monitor your assets remotely using Ubidots.
Requirements
1x ESP32-CAM module.
PlatformIO.
VLC.
An RTSP server.
Ubidots account.
Table of contents
1. Set up the RTSP server using PlatformIO
Install PlatformIO.
Go to this repository and clone the project in your computer.
Open PlatformIO and open the project previously cloned.
Connect the FTDI Programmer to your ESP32-CAM and upload the code.
2. Configure the ESP32-CAM
After you run the code into the ESP32-CAM an access point called "ESP32CAM-RTSP" will be automatically created. Once you connect your PC to that Wi-Fi network, you’ll be redirected to the following IP: http://192.168.4.1.
The following page will be opened. There, set up your Wi-Fi credentials, set any AP password and adjust the camera configuration as you desire.
Connect your PC to the same Wi-Fi network set up in the previous step.
In the PlatformIO logs, search for the IP address of the ESP32-CAM and open it in a new tab. You’ll see the following page. Please copy the RTSP URL, we’ll use it in the following steps.
If you need to make any changes, please click on the Change configuration button, and set the username (admin) and the AP password as in the previous step.
Note: If you forget the AP password, you must erase all the configuration using the following command: pio run -t erase . Then, you’ll need to upload again the code and configure the ESP32-CAM.
3. Visualize the video using VLC
Install VLC.
Open VLC and go to "Media" → "Open network stream".
Paste the RTSP URL you previously copied.
Once you reproduce it, you’ll start watching the video captured by the ESP32-CAM in VLC.
4. RTSP configuration
You must make a port forwarding inside your router. This configuration depends on the router, but generally, you log in to the router and, in the firewall section, you have to create a rule to open the 554 port with the specific IP of the ESP32-CAM.
Note: It’s recommended to set a static IP for your ESP32-CAM.
Check the connection by doing a Telnet with your public IP and port 554.
Replace the private IP of your URL RTSP with the public IP.
Open the VLC network and set the RTSP URL configured in the previous step.
If you visualize the video captured by the ESP32CAM, then all the configurations have been correctly made.
Copy the RTSP URL with your public IP and put it in the RTSP server webpage of your preference. In this guide, the RTSP chosen was IPCamlive.
5. Create an HTML Canvas Widget in Ubidots
Create a dashboard in Ubidots.
Create an HTML Canvas widget inside the dashboard.
The RTSP server will return an iframe, please copy the iframe and paste it into the HTML section of the HTML Canvas widget.
If everything was correctly set, the video should be visualized in the HTML Canvas.
Feedback & suggestions
Feel free to post questions or suggestions in our community portal, or drop us a line at support@ubidots.com.