Note

Hello, welcome to the SunFounder Raspberry Pi & Arduino & ESP32 Enthusiasts Community on Facebook! Dive deeper into Raspberry Pi, Arduino, and ESP32 with fellow enthusiasts.

Why Join?

  • Expert Support: Solve post-sale issues and technical challenges with help from our community and team.

  • Learn & Share: Exchange tips and tutorials to enhance your skills.

  • Exclusive Previews: Get early access to new product announcements and sneak peeks.

  • Special Discounts: Enjoy exclusive discounts on our newest products.

  • Festive Promotions and Giveaways: Take part in giveaways and holiday promotions.

👉 Ready to explore and create with us? Click [here] and join today!

2.14 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.

COMPONENT INTRODUCTION

PURCHASE LINK

ESP32 WROOM 32E

BUY

ESP32 Camera Extension

-

Breadboard

BUY

Several Jump Wires

BUY

Resistor

BUY

LED

BUY

How to do?

  1. First plug in the camera.

  2. Build the circuit.

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

    ../_images/plugin_esp321.png
  4. Download this code or copy this code to the Arduino IDE directly.

  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.

    ../_images/sp230510_180503.png
  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.

    ../_images/plugin_battery1.png