WebRTC, la API web en tiempo real

Cómo utilizar WebRTC para crear una aplicación de comunicación directa con la cámara web con este sencillo tutorial

WebRTC son las siglas deComunicación web en tiempo real.

Permite crear una comunicación de datos directa entre navegadores.

Puedes usarlo para

  • transmitir audio
  • transmisión de vídeo
  • compartir archivos
  • chat de video
  • crear un servicio de intercambio de datos de igual a igual
  • crear juegos multijugador

y más.

Es un esfuerzo para hacer que las aplicaciones de comunicación en tiempo real sean fáciles de crear, aprovechando las tecnologías web, de modo que no se necesite ningún complemento de terceros o tecnología externa junto a su navegador web.

No debería ser necesario un complemento para realizar RTC en el futuro, sino que todos deberían depender de una tecnología estándar: WebRTC.

Es compatible con todos los navegadores modernos (con soporte parcial de Edge que no admiteRTCDataChannel- te veo despues):

WebRTC implementa las siguientes API:

  • MediaStreamobtiene acceso a flujos de datos desde el extremo del usuario, como la cámara y el micrófono
  • RTCPeerConnectionmaneja la comunicación de transmisión de audio y video entre pares
  • RTCDataChannel: maneja la comunicación de otros tipos de datos (datos arbitrarios)

Con la comunicación de audio y video que usaráMediaStreamyRTCPeerConnection.

Otro tipo de aplicación, como juegos, uso compartido de archivos y otras, se basan enRTCDataChannel.

En este artículo crearé un ejemplo usando WebRTC para conectar dos cámaras web remotas, usando unWebsocketsservidor usandoNode.js.

Consejo: en sus proyectos probablemente utilizará una biblioteca que abstraiga muchos de esos detalles. Este tutorial tiene como objetivo explicar la tecnología WebRTC, para que sepa lo que está sucediendo bajo el capó.

MediaStream

Esta API le permite acceder a la transmisión de la cámara y el micrófono mediante JavaScript.

Aquí hay un ejemplo simple que le pide que acceda a la cámara de video y reproduzca el video en la página:

Ver la plumaEjemplo simple de WebRTC MediaStreampor Flavio Copes (@flaviocopios) enCodePen.

Tech Wiki Online!