8.3 Servidor Web de Transmisión de Video Personalizado

El proyecto de Servidor Web de Transmisión de Video Personalizado ofrece una oportunidad para aprender cómo crear una página web desde cero y personalizarla para reproducir transmisiones de video. Además, podrás incorporar botones interactivos, como ENCENDER y APAGAR, para controlar la intensidad del LED.

Al construir este proyecto, ganarás experiencia práctica en desarrollo web, HTML, CSS y JavaScript. Aprenderás cómo crear una página web responsive que pueda mostrar transmisiones de video en tiempo real. Además, descubrirás cómo integrar botones interactivos para controlar el estado del LED, proporcionando una experiencia de usuario dinámica.

Componentes Requeridos

Para este proyecto, necesitamos los siguientes componentes.

Es definitivamente conveniente comprar un kit completo, aquí está el enlace:

Nombre	ARTÍCULOS EN ESTE KIT	ENLACE
Kit de Inicio ESP32	320+	ESP32 Starter Kit

También puedes comprarlos por separado en los siguientes enlaces.

INTRODUCCIÓN DEL COMPONENTE	ENLACE DE COMPRA
ESP32 WROOM 32E	BUY
Extensión de Cámara ESP32	-
Protoboard	BUY
Cables Puente	BUY
Resistor	BUY
LED	BUY

¿Cómo hacerlo?

1. Primero conecta la cámara.

2. Construye el circuito.

   

3. Luego, conecta el ESP32-WROOM-32E al ordenador mediante el cable USB.

   

4. Abre el código.

   • Abre el archivo iot_3_html_cam_led.ino ubicado en el directorio esp32-starter-kit-main\c\codes\iot_3_html_cam_led, o copia el código en el IDE de Arduino.

   • Después de seleccionar la placa (ESP32 Dev Module) y el puerto apropiado, haz clic en el botón Subir.

   • ¿Siempre aparece «COMxx desconocido»?

5. Localiza las siguientes líneas y modifícalas con tu <SSID> y <PASSWORD>.

   // Reemplaza las siguientes variables con tu combinación de SSID/Contraseña
   const char* ssid = "<SSID>";
   const char* password = "<PASSWORD>";
   

6. Después de seleccionar la placa correcta (ESP32 Dev Module) y el puerto, haz clic en el botón Subir.

7. Verás un mensaje de conexión exitosa a WiFi y la dirección IP asignada en el Monitor Serie.

   Conexión WiFi exitosa
   ¡Transmisión de Cámara Lista! Ve a: http://192.168.18.77
   

8. Ingresa la dirección IP en tu navegador web. Serás dirigido a la página web mostrada a continuación, donde podrás usar los botones personalizados de ENCENDER y APAGAR para controlar el LED.

   

9. Inserta una batería en la placa de expansión y retira el cable USB. Ahora puedes colocar el dispositivo en cualquier lugar que desees dentro del alcance del Wi-Fi.