WebRTC

Video Streaming Service

Desarrollo Web

Transmisión en Vivo

Implementando WebRTC para Video Streaming

Objetivo General

El estudiante configurará y ejecutará un sistema de transmisión de video en tiempo real utilizando la API de WebRTC, interactuando con dispositivos de hardware (cámara web) a través del navegador, para comprender los conceptos fundamentales de la comunicación multimedia en aplicaciones web.

En el ecosistema digital actual, la comunicación en tiempo real es una funcionalidad crítica. Desde plataformas de educación a distancia hasta sistemas de telemedicina, la capacidad de transmitir video sin retrasos es indispensable.

WebRTC (Web Real-Time Communication) es un proyecto de código abierto que proporciona a los navegadores web y aplicaciones móviles capacidades de comunicación en tiempo real a través de APIs simples, sin necesidad de instalar plugins adicionales.

En esta práctica, el estudiante asumirá el rol de un ingeniero de software que debe crear una prueba de concepto (PoC) para capturar el flujo de video del usuario e integrarlo en el módulo de streaming de una plataforma de servicios web.

Materiales o Recursos Necesarios

• Computadora con cámara web y micrófono funcionales.
• Navegador web moderno (Google Chrome, Mozilla Firefox o Microsoft Edge).
• Editor de código fuente (Visual Studio Code, Sublime Text, o similar).
• Entorno de servidor web local (XAMPP, MAMP, Laragon, o el servidor integrado de PHP).

Insumos Prácticos

A continuación, se provee el código base que conforma el archivo index.php para el módulo de streaming. Este bloque integra la estructura HTML y la lógica de JavaScript necesaria para invocar la API de WebRTC.

Instrucciones Paso a Paso

1. Preparación del entorno web: El estudiante deberá iniciar su servidor local (por ejemplo, encendiendo Apache en XAMPP o usando el comando php -S localhost:8000 en la terminal). ¿Por qué? Aunque WebRTC utiliza JavaScript en el cliente, muchos navegadores bloquean el acceso a la cámara si el archivo se abre simplemente con doble clic (file:///). Requiere ser servido mediante un protocolo HTTP/HTTPS seguro o desde localhost.
2. Creación del directorio de trabajo: Crear una carpeta llamada streaming dentro del directorio público del servidor (htdocs, www, u otro equivalente).
3. Integración del código base: Crear un archivo llamado index.php dentro de la carpeta streaming y pegar el código provisto en los Insumos Prácticos. ¿Por qué? Esto establece la estructura de la interfaz y la lógica de captura multimedia.
4. Análisis de las “Constraints”: El estudiante debe ubicar la variable mediaConstraints en el código JavaScript e identificar cómo se solicitan permisos específicos (video ideal de 720p y sin audio).
5. Ejecución y pruebas de permisos: Abrir el navegador e ingresar a http://localhost/streaming/ (o la ruta correspondiente). Hacer clic en el botón "Iniciar Cámara". El navegador solicitará permisos. ¿Por qué? Es un mecanismo de seguridad estricto de HTML5/WebRTC proteger la privacidad del usuario.
6. Verificación visual: Confirmar que el flujo de video se muestra fluidamente en la pantalla.
7. Reto de modificación (Paso final): El estudiante modificará la línea audio: false por audio: true en el código, recargará la página y observará la nueva solicitud de permisos en el navegador.

Recomendaciones para el Estudiante

• Asegurarse de hacer clic en “Permitir” cuando el navegador muestre la ventana emergente solicitando acceso a la cámara.
• Si el video no aparece, pulsar F12 en el teclado y leer la pestaña "Console" (Consola) para identificar si falta algún punto y coma o existe un error de tipeo.
• Asegurarse de que ninguna otra aplicación (como Zoom o Teams) esté utilizando la cámara web al mismo tiempo, ya que esto bloquea el acceso para el navegador.
• Experimentar cambiando los valores ideal: 1280 de ancho y alto en las constraints por números muy pequeños (ej. 320x240) para observar el cambio de calidad.
• Guardar los cambios en el editor de código antes de refrescar el navegador para probar las modificaciones.

Posible Problema y Solución Rápida

• Problema: Al hacer clic en “Iniciar Cámara”, el navegador lanza el error NotAllowedError: Permission denieden la consola y no ocurre nada en pantalla.
• Solución: Esto sucede porque el usuario bloqueó accidentalmente el acceso a la cámara. Para solucionarlo, el estudiante debe hacer clic en el ícono del candado (o el ícono de los ajustes) que se encuentra en la barra de direcciones de su navegador, justo al lado de localhost, buscar el apartado de "Cámara" o "Permisos", cambiarlo a "Permitir", y recargar la página.