8.3 Custom Video Streaming Web Server

The Custom Video Streaming Web Server project offers an opportunity to learn how to create a web page from scratch and customize it to play video streams. Additionally, you can incorporate interactive buttons, such as ON and OFF, to control the LED’s brightness.

By building this project, you will gain hands-on experience in web development, HTML, CSS, and JavaScript. You will learn how to create a responsive web page that can display video streams in real-time. Moreover, you will discover how to integrate interactive buttons to control the LED’s state, providing a dynamic user experience.

Required Components

In this project, we need the following components.

It’s definitely convenient to buy a whole kit, here’s the link:

Name	ITEMS IN THIS KIT	LINK
ESP32 Starter Kit	320+	ESP32 Starter Kit

You can also buy them separately from the links below.

COMPONENT INTRODUCTION	PURCHASE LINK
ESP32 WROOM 32E	BUY
ESP32 Camera Extension	-
Breadboard	BUY
Jumper Wires	BUY
Resistor	BUY
LED	BUY

How to do?

1. First plug in the camera.

2. Build the circuit.

   

3. Then, connect ESP32-WROOM-32E to the computer using the USB cable.

   

4. Open the code.

   • Open the iot_3_html_cam_led.ino file located in the esp32-starter-kit-main\c\codes\iot_3_html_cam_led directory, or copy the code into the Arduino IDE.

   • After selecting the board (ESP32 Dev Module) and the appropriate port, click the Upload button.

   • Always displaying “Unknown COMxx”?

5. Locate the following lines and modify them with your <SSID> and <PASSWORD>.

   // Replace the next variables with your SSID/Password combination
   const char* ssid = "<SSID>";
   const char* password = "<PASSWORD>";
   

6. After selecting the correct board (ESP32 Dev Module) and port, click the Upload button.

7. You will see a successful WiFi connection message and the assigned IP address in the Serial Monitor.

   WiFi connected
   Camera Stream Ready! Go to: http://192.168.18.77
   

8. Enter the IP address in your web browser. You will be directed to the web page shown below, where you can use the customized ON and OFF buttons to control the LED.

   

9. Insert a battery into the expansion board and remove the USB cable. Now you can place the device anywhere you desire within the Wi-Fi range.