Skip to content

Latest commit

 

History

History
117 lines (75 loc) · 4.2 KB

ar_iot_html_cam_led.rst

File metadata and controls

117 lines (75 loc) · 4.2 KB
Raw

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 [] and join today!

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+

You can also buy them separately from the links below.

COMPONENT INTRODUCTION PURCHASE LINK
cpn_esp32_wroom_32e
cpn_esp32_camera_extension -
cpn_breadboard
cpn_wires
cpn_resistor
cpn_led

How to do?

  1. First plug in the camera.

  2. Build the circuit.

    image

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

    image

  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.
    • unknown_com_port

  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.

    image

  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.

    image