Como crear aplicaciones de chat de video utilizando WebRTC

Con la llegada de WebRTC y la capacidad cada vez mayor de los navegadores para manejar comunicaciones de igual a igual en tiempo real, es más fácil que nunca crear aplicaciones en tiempo real. En este artículo, veremos SimpleWebRTC y cómo podemos usar la plataforma para implementar la tecnología WebRTC. También veremos otras alternativas que podrían ayudarnos a lograr el mismo objetivo.

Si necesita un poco de experiencia con respecto a WebRTC y la comunicación de igual a igual, le recomiendo leer “ The Dawn of WebRTC ” y “ Una introducción a la API getUserMedia ”.

Debido a la naturaleza compleja de la creación de aplicaciones WebRTC personalizadas, este no será un tutorial paso a paso sobre la creación de una. En su lugar, veremos las bibliotecas y los tipos de servidores necesarios para crear su propia aplicación confiable. Proporcionaré enlaces de aplicaciones de muestra completas a las que puede hacer referencia mientras crea la suya.

Nuestro enfoque estará principalmente en SimpleWebRTC como plataforma. Más adelante, veremos brevemente otras alternativas comerciales y de código abierto que pueden ayudarlo a lograr lo mismo.

Qué es WebRTC

WebRTC (Web Real Time Communication) es un proyecto de código abierto que permite la comunicación de igual a igual en tiempo real entre navegadores web para transmitir videos en vivo, audio y transmisiones de datos a través de una red. Los navegadores de escritorio y móviles modernos como Google Chrome, Mozilla Firefox, Safari, Opera y otros navegadores basados ​​en Chromium ya han implementado esta tecnología de forma nativa. Esta es una buena noticia, ya que los usuarios no tienen que instalar un complemento o una aplicación de terceros para acceder a la tecnología.

Las versiones anteriores del navegador y los navegadores heredados como Internet Explorer no tienen esta tecnología. Los usuarios deberán utilizar navegadores actualizados. Puede consultar la lista completa de navegadores compatibles :

En enero de 2021, la especificación WebRTC 1.0 fue la transición de la Recomendación Candidata a Recomendación de estado por el World Wide Web Consortium . Este es un logro notable considerando que la tecnología se lanzó al público por primera vez hace 10 años.

La especificación WebRTC cubre cómo los navegadores pueden acceder a los dispositivos de medios locales y cómo pueden transmitir medios y datos de aplicaciones genéricos a un navegador utilizando un conjunto de protocolos en tiempo real. Lo hace a través de un conjunto de API de JavaScript que ya han sido cubiertas por los artículos vinculados anteriormente. La especificación también garantiza que todas las comunicaciones estén encriptadas y que terceros no deseados no puedan espiar las transmisiones.

Es importante tener en cuenta que WebRTC no cubre todo, como la señalización , el proceso de iniciar una conexión entre navegadores. Esta parte de la especificación se omitió para evitar limitaciones con tecnología potencialmente nueva. Una segunda razón fue que WebRTC es principalmente tecnología del lado del cliente, y problemas como las sesiones se manejan mejor usando tecnología de servidor.

Cómo funciona la señalización para navegadores web

La definición misma de WebRTC es comunicación de igual a igual entre navegadores web. La realidad es que la mayoría de los navegadores se ejecutan en computadoras que operan detrás de un dispositivo NAT (traducción de direcciones de red) y, opcionalmente, un firewall. El dispositivo NAT, generalmente un enrutador o módem, permite que las computadoras con direcciones IP privadas se conecten a Internet a través de una única dirección IP pública.

Los dispositivos NAT protegen las computadoras personales de ser explotadas directamente por usuarios malintencionados a través de Internet a través de la dirección IP. Desafortunadamente, también bloquea los dispositivos con direcciones IP privadas para que no se conecten a otro dispositivo IP privado a través de Internet.

Para superar este desafío, el Grupo de trabajo de ingeniería de Internet propuso el protocolo ICE (Establecimiento de conectividad interactiva) para permitir que las computadoras IP privadas descubran y se conecten a otras computadoras privadas a través de la red pública.

Esto implica el uso de un servidor de señalización público al que ambos clientes pueden conectarse fácilmente. Las computadoras pares se conectan a este servidor y lo utilizan para intercambiar direcciones IP y puertos necesarios para las fuentes y receptores de datos. Con esta información, pueden establecer una conexión directa entre ellos y comenzar a transmitir video, audio y datos.

Aquí hay una demostración animada:

Para configurar la señalización WebRTC, el marco ICE requiere que proporcione dos tipos de servidores, que se detallan a continuación.

1. Servidor STUN

El servidor STUN (Session Traversal Utilities for NAT) hace exactamente lo que acabo de describir anteriormente. Simplemente proporciona un espacio de reunión para que las computadoras intercambien información de contacto. Una vez que se intercambia la información, se establece una conexión entre las computadoras pares y luego el servidor STUN se deja fuera del resto de la conversación.

Aquí hay un script de ejemplo que se ejecuta en el cliente, lo que permite que el navegador inicie la conexión a través de un servidor STUN. El script permite que se proporcionen múltiples URL del servidor STUN en caso de que uno falle:

function createPeerConnection() {
  myPeerConnection = new RTCPeerConnection({
    iceServers: [
      {
        urls: "stun:stun.stunprotocol.org",
      },
    ],
  });
}

Las conexiones establecidas a través de servidores STUN son el tipo de comunicación WebRTC más ideal y rentable. Apenas hay costos de funcionamiento incurridos por los usuarios. Desafortunadamente, es posible que la conexión no se establezca para algunos usuarios debido al tipo de dispositivo NAT que utiliza cada par. En tal situación, el protocolo ICE requiere que proporciones un respaldo, que es un tipo diferente de servidor de señalización conocido como servidor TURN .

2. Servidor TURN

Un servidor TURN (Traversal Using Relay NAT) es una extensión del servidor STUN. Donde se diferencia de su predecesor es que maneja toda la sesión de comunicación.

Básicamente, después de establecer una conexión entre los pares, recibe flujos de un par y los retransmite al otro, y viceversa. Este tipo de comunicación es más costoso y el host tiene que pagar por el procesamiento y la carga de ancho de banda necesarios para operar un servidor TURN.

A continuación se muestra una descripción gráfica de todo el proceso de señalización que involucra primero al servidor STUN y luego al servidor TURN como respaldo:

Creación de una aplicación de chat de video personalizada

Si bien es posible configurar su propia solución de chat de video utilizando código JavaScript simple y servidores STUN públicos gratuitos, no todos podrán conectarse entre sí en su plataforma. El uso de servidores TURN es obligatorio si desea brindar un servicio confiable a todos sus usuarios.

Como se mencionó anteriormente, configurar plataformas WebRTC puede ser complejo. Afortunadamente para nosotros, tenemos plataformas comerciales todo en uno que facilitan la creación de una aplicación de video chat WebRTC. Veamos ahora cómo SimpleWebRTC puede aliviar nuestras cargas.

Qué es SimpleWebRTC

SimpleWebRTC es una plataforma que proporciona un servicio fácil y rentable para que los desarrolladores creen e implementen aplicaciones personalizadas en tiempo real utilizando React. Específicamente, proporcionan lo siguiente:

• SimpleWebRTC SDK: una biblioteca de front-end
• Alojamiento: servidores STUN / TURN y SFU (Selective Forward Unit)
• Apoyo técnico
• Desarrollo de aplicaciones personalizadas y servicios de consultoría WebRTC
• Infraestructura de inquilino único y local
• Talky : una aplicación de video chat gratuita construida completamente con SimpleWebRTC