WEBRTC: QUÉ ES Y CÓMO FUNCIONA EN APLICACIONES WEB
WebRTC (acrónimo de Web Real-Time Communication) es un proyecto de código abierto que permite la comunicación en tiempo real directamente entre navegadores web (o aplicaciones) sin necesidad de plugins ni software adicional.Componentes de WebRTC
- getUserMedia: Accede a la cámara y micrófono del usuario.
- RTCPeerConnection: Establece una conexión directa (P2P) entre dos dispositivos.
- RTCDataChannel: Envía datos arbitrarios (texto, binarios) en tiempo real.
Ventajas
- Gratuito y de código abierto.
- Funciona en navegadores modernos (Chrome, Firefox, Safari, Edge).
- Baja latencia (ideal para juegos, streaming, telemedicina).
- Seguro por defecto (usa DTLS y SRTP para cifrado).
Desventajas
- Problemas con NAT/firewalls: A veces necesita servidores STUN (para descubrir IP pública) o TURN (para relay si no hay conexión directa).
- Compatibilidad limitada en algunos navegadores antiguos o redes restrictivas.
Ejemplo para acceder a la cámara:
// Acceder a la cámara
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
document.getElementById('video').srcObject = stream;
});
Ejemplos de que se puede hacer con WebRTC
- Videollamadas y Audiollamadas.
- Streaming en vivo.
- Compartir pantalla.
- Chat de datos.
- Juegos multijugador en navegador.
- IoT y control remoto.
- Grabación en el navegador.
- Realidad aumentada (AR) en web.
- Integración con IA.
Ejemplos prácticos
- Videollamada 1:1 usando HTML, JS y PHP (señalización).
- Cámara en vivo en web usando FFmpeg y WebRTC (Pion es un framework de C++ para redes).
- Chat P2P sin servidor usando WebRTC DataChannel.
- Juego multijugador usando WebRTC y Canvas.
- Grabadora de pantalla getDisplayMedia y MediaRecorder.
- Gratuito y de código abierto.
- Funciona en navegadores modernos (Chrome, Firefox, Safari, Edge).
- Baja latencia (ideal para juegos, streaming, telemedicina).
- Seguro por defecto (usa DTLS y SRTP para cifrado).
Desventajas
- Problemas con NAT/firewalls: A veces necesita servidores STUN (para descubrir IP pública) o TURN (para relay si no hay conexión directa).
- Compatibilidad limitada en algunos navegadores antiguos o redes restrictivas.
Ejemplo para acceder a la cámara:
// Acceder a la cámara
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
document.getElementById('video').srcObject = stream;
});
Ejemplos de que se puede hacer con WebRTC
- Videollamadas y Audiollamadas.
- Streaming en vivo.
- Compartir pantalla.
- Chat de datos.
- Juegos multijugador en navegador.
- IoT y control remoto.
- Grabación en el navegador.
- Realidad aumentada (AR) en web.
- Integración con IA.
Ejemplos prácticos
- Videollamada 1:1 usando HTML, JS y PHP (señalización).
- Cámara en vivo en web usando FFmpeg y WebRTC (Pion es un framework de C++ para redes).
- Chat P2P sin servidor usando WebRTC DataChannel.
- Juego multijugador usando WebRTC y Canvas.
- Grabadora de pantalla getDisplayMedia y MediaRecorder.
// Acceder a la cámara
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
document.getElementById('video').srcObject = stream;
});