/webrtc-simple-demo

Demostración del uso de WebRTC junto a Firebase para Python Barranquilla.

Primary LanguageJavaScript

WebRTC: ¿y si hacemos un Skype?

title

title

Wilson Tovar

7mo semestre - Ing. De Sistemas
Full Stack Dev @ Fontumi

github, linkedin, instagram, correo

Índice

  1. Introducción
  2. WebRTC y su magia
  3. Empezando
  4. ¡Hola mundo!
  5. ¿Y ahora qué?
  6. Reto 😯

1. Introducción

"WebRTC is an open source project to enable realtime communication of audio, video and data in Web and native apps."

2. WebRTC y su magia

  • Open Source
  • Peer-Peer simplificado
  • Bajo ancho de banda y latencia
  • Transmisión segura de datos
  • *Ampliamente soportado

Pero... ¿para qué sirve?

  • Transmisión de audio y video
  • Intercambio de archivos
  • Interface con sistemas telefónicos usando señales DTMF
  • Mensajes en tiempo real
  • Edición de documentos en tiempo real

3. Ahora sí, ¡a usarlo!

Alto ahí... ¡Primero la teoría!

title

APIs

  • MediaStream (commonly known as getUserMedia)
  • RTCPeerConnection

  • MediaStream. Acceder a la cámara y micrófono.

    • getUserMedia()
    • HTTPS
    • Chrome, Firefox, Opera

  • RTCPeerConnection. Responsable de manejar la comunicación eficiente y estable de streams entre peers.

    • Google, Opera: WebkitRTCPeerConnection
    • Firefox: mozRTCPeerConnection

¡Peer-to-peer, pero se necesitan servidores!

PD: ICE

title

Interactive Connectivity Establishment (ICE)

Framework que permite que los navegadores conecten los peers. ICE usa servidores STUN y/o TURN.

  • STUN (Session Traversal Utilities for NAT). Descubrir la IP pública y descubrir restricciones.
    • Poco ancho de banda

title

  • TURN (Traversal Using Relays around NAT). Se usa cuando no hay alternativas.

title

Session Description Protocol (SDP)

Describe el contenido multimedia como los formatos, codecs, etc. En otras palabras, es el metadata que describe el contenido.

Signaling

Intercambio de mensajes de control entre los peers.

  • Podemos usar lo que queramos

4. ¡Hola mundo! https://bit.ly/2KcbnSF

title

Para usar el demo, agrega un id único al final de ?room= y dáselo a otra persona para hacer una vídeo llamada

5. ¿Y ahora qué?

  1. WebRTC Página oficial
  2. Real time communication with WebRTC
  3. Recursos en línea

Reto 😯

  • Sala multiusuarios
  • Envío de archivos

¡Gracias! 💖