Cómo incluir videoconferencia en tu web usando la tecnología WebRTC y servidores de media open source y comerciales. Se explora en más detalle OpenVidu, una plataforma de videoconferencias con ediciones open source y comerciales

1. WebRTC en tu Web con
OpenVidu
Micael Gallego
Developer, Profesor, Científico... 29-04-21

2. ¿Éste quién es?
@micael_gallego
micael.gallego@urjc.es
@micaelgallego Profesor Universitario / Formador & Consultor
Developer

3. Node para Javeros · @micael_gallego
Consultoría y
Formación
Cloud Computing
Microservices
Web / APIs
Testing / CICD
Software Architecture
http://codeurjc.es/mastercloudapps
Laboratorio de Software
Arquitectura, Diseño y Calidad Software
Servicios de Internet
Aplicaciones nativas de la nube
DevOps, integración y despliegue continuo
Videoconferencia - Cámaras IP
Web - Mobile / Java - Node - REST API
On premises - AWS
Open Source - Comercial
http://codeurjc.es https://openvidu.io

4. •DISCLAIMER:
• He preferido no entrar en mucho detalle para
que se pueda tener una visión general.
• Algunas afirmaciones deberían llevar un
“depende” o “no siempre”

5. 5

6. 6
¿Qué es
?

7. WebRTC: Comunicación en tiempo
real para la web
•Permite comunicar un browser directamente con
otro, peer-to-peer, sin que los datos tengan que pasar
por el servidor (siempre que sea posible)
7

8. WebRTC: Comunicación en tiempo
real para la web
• Para conseguirlo se usa el framework ICE para
traspasar los NATs y permitir una comunicación
directa entre navegadores
•Cuando no es posible la conexión directa se pueden
usar servidores estándar de reenvío de datos (TURN)
8

9. WebRTC: Comunicación en tiempo
real para la web
9
Webcam Micrófono Escritorio
•La baja latencia es ideal para comunicación
con audio y vídeo

10. WebRTC: Comunicación en tiempo
real para la web
•Desarrollado inicialmente por Google
•WebRTC es una Recommendation del W3C desde
el 26 de Enero del 2021
10
https://www.w3.org/TR/webrtc/
https://webrtc.org/

11. 11

12. 12
¿Cómo funciona?
Servidor Web
Los browsers se conocen
conectándose a la misma aplicación
web y se intercambian información de
red (Candidatos ICE)
1

13. 13
Servidor Web
Los browsers se conectan directamente
entre sí. Pueden usar UDP, TCP o SCTP
2
¿Cómo funciona?

14. WebRTC: Comunicación en tiempo
real para la web
•La conexión directa proporciona muy baja
latencia
•Se puede transmitir audio, vídeo o datos
•La conexión entre los browsers puede ser por
TCP, UDP o SCTP
14

18. 18
WebRTC vs Video Streaming
•El streaming de vídeo tiene latencias como mínimo de 5
segundos (puede ser más de 30 segundos)
•Se usan técnicas como Http Live Streaming (HLS)
•Esas latencias no pueden usarse para videoconferencia
https://en.wikipedia.org/wiki/HTTP_Live_Streaming

19. 19
•Hay servicios
combinan
WebRTC y
Streaming

20. Can I use WebRTC?
20
Existen librerías nativas para apps móviles

21. 21
Tipos de apps WebRTC
Videoconferencia /
chat
Emisión de media

22. 22
Tipos de apps WebRTC
Llamadas en
grupo

23. 23
La conexión directa entre browsers NO
es adecuada en todos los casos
Tipos de apps WebRTC
Llamadas en
grupo

24. 24
Servidores de media WebRTC
Servidor de
media

25. Servidores de media en WebRTC
Transcodificar*
VP8 H.264
Reenviar
(Para llamadas en grupo o
streaming de baja latencia)
Grabar
* Pero evitándolo siempre que sea posible porque es muy costoso en términos de CPU

26. 26
Tipos de servicios de videollamadas
Como servicio Instalables

27. 27
¿Cómo añadir
videoconferencia WebRTC en
tu web / app?

28. 28

29. Sin servidor de media
https://developer.mozilla.org/en-US/
docs/Web/API/WebRTC_API
Browser
WebRTC API
https://en.wikipedia.org/wiki/Travers
al_Using_Relays_around_NAT
Servidor TURN
(Usuarios con
redes especiales)
Coturn
(open source)
https://github.com/
coturn/coturn
(as a service)
https://www.twilio.
com/stun-turn

30. Sin servidor de media
Backend App
Coturn
(TURN / STUN)
Server
Desplegamos la web app y un servidor TURN

31. Sin servidor de media
Frontend
App
Frontend
App
Backend App
User 1
User 2 Coturn
(TURN / STUN)
MVC / REST
MVC / REST
Server
1
1
Se conectan dos usuarios y cargan la web

32. Sin servidor de media
Frontend
App
Frontend
App
Backend App
User 1
User 2 Coturn
(TURN / STUN)
MVC / REST
MVC / REST
Server
1
1
El frontend recibe la localización del servidor TURN

33. Sin servidor de media
Frontend
App
Frontend
App
Backend App
User 1
User 2 Coturn
(TURN / STUN)
Server
2 TURN / STUN
2 TURN / STUN
Se pregunta la IP pública y se abren puertos en el router

34. Sin servidor de media
Frontend
App
Frontend
App
Backend App
User 1
User 2 Coturn
(TURN / STUN)
WebSocket
Server
3
WebSocket
3
Los usuarios se intercambian la información para conexión directa (ICE Candidates)
Se usan websockets para que el servidor haga push al browser

35. Sin servidor de media
Frontend
App
Frontend
App
Backend App
User 1
User 2 Coturn
(TURN / STUN)
Server
WebRTC
4
Si es posible se establece la conexión directa entre los browsers

36. Sin servidor de media
Frontend
App
Frontend
App
Backend App
User 1
User 2 Coturn
(TURN / STUN)
Server
WebRTC
4
Si no es posible la conexión directa se enruta a través del servidor TURN

37. 37
Cuando hay más de 4 usuarios en una
videoconferencia se considera necesario un
servidor de media

38. 38
Con servidor de media
Como servicio

39. 39
Con servidor de media
Servidor Instalable Open Source

40. 40
Con servidor de media
Servidor Instalable Open Source

41. 41
Con servidor de media
Servidor Instalable Comercial
PRO

42. 42
¿y es muy complicado?

43. 43

44. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y
Kurento
Leganés
12-13 Febrero 2015
44

45. https://openvidu.io

46. ¿Qué es OpenVidu?
Un equipo
Carlos Ruiz Pablo Fuentes Carlos Santos Juan Navarro

47. ¿Qué es OpenVidu?
- Plataforma para desarrollo de apps WebRTC de alto nivel
- Modelo de programación sencillo con múltiples ejemplos
- Funcionalidades avanzadas: Compartición de escritorio,
grabación, visión artificial, señales, monitorización...
- Edición Open source (Licencia Apache) y edición Comercial
https://openvidu.io/

48. Videoconferencia
- Modelo de desarrollo
simplificado de aplicaciones de
videoconferencia en grupo
- Permite modelos personalizados:
- Profesor - alumno
- Presentador - visor

49. Aplicación ejemplo: OpenVidu Call

50. Tutoriales con múltiples tecnologías

51. Fácil de desarrollar en tu equipo
- Despliegue de OpenVidu
- Linux, Win y Mac
- Contenedor Docker

52. Fácil de desarrollar en tu equipo
- Ejecutar aplicaciones de ejemplo (tutoriales)
Backend
Frontend

53. Fácil de desplegar en producción
- Dockerizado para despliegue on
premises
- CloudFormation para desplegar en AWS
- Generación de certificados con Let’s
Encrypt

54. 54

55. Arquitectura
de una web app
con OpenVidu
App code
(Backend)
App code
(Frontend)
JavaScript
Library
Server

56. Control de acceso y permisos
- Tu aplicación desde el backend
- Usando la API REST de OpenVidu Server
- Crea sesiones
- Crea tokens para que usuarios se puedan conectar
- Tu aplicación desde frontend
- Con el token pide a la librería OpenVidu Browser que se
conecte a una sesión

57. Web Component
- Incrusta un componente gráfico de videoconferencia en
cualquier web
- Completamente funcional (mute, fullscreen, chat…)
- Controla desde backend quién puede acceder a la
videoconferencia
- Tantas videoconferencias simultáneas como quieras

58. Web Component
https://openvidu.io/docs/tutorials/openvidu-webcomponent/

60. Vainilla JS
https://openvidu.io/docs/tutorials/openvidu-insecure-js/

61. Vainilla JS

63. - Híbridas y nativas
Apps móviles

64. Demos temáticas: Classroom

65. - Compartir pantalla
- Grabación de la sesión
- Como se ve en el navegador
- Diseños personalizados
- Filtros de visión artificial
- Detector de voz
- Conexión a la Cámaras IP
Funcionalidades avanzadas

67. Arquitectura
de una web app
con OpenVidu
App code
(Backend)
App code
(Frontend)
JavaScript
Library
Server

68. Un poco más
a fondo...

69. Un poco más
a fondo...

70. Servidor de media WebRTC
Control de bajo nivel del procesamiento del media en pipelines
Controlable con un protocolo sobre WebSockets
70
http://www.kurento.org

71. 71
http://www.kurento.org

72. 72
Entrada
de media
Salida
de media
Kurento Media Server
Cliente Java
Las aplicaciones definen cómo
procesar el media que llega a
Kurento Media Server
Cliente JS
Browser
Cliente JS
node.js JSON-RPC sobre
websockets

73. 73
Media Element
• Proporciona una funcionalidad básica
• Enviar/Recibir media por WebRTC
• Guardar/Leer media del disco duro
• Analizar el media
• Transformar media
• Existen diferentes media elements
disponibles
• Se pueden añadir nuevos con C/C++
Sink
SRC

74. 74
Biblioteca de componentes predefinidos

75. 75
Media Pipeline
• Cadena de elementos que implementan la funcionalidad
deseada

76. 76
Media pipeline
Kurento Media Server
¿Cómo implementar un espejo mágico?

77. 77
Kurento Module Creator
• Invocación remota de métodos desde
el cliente
• Gestión de eventos
• Generación de código de los clientes
Java y JavaScript
Elementos personalizados
• Procesamiento de audio
• Visión artificial
• Realidad aumentada

79. 79

80. Un poco más
a fondo...

81. OpenVidu Browser & Server
- Simplifican el modelo de programación sobre Kurento media
server
- Gestiona sesiones, permisos, negociación de media
- Grabación con formato personalizado basado en navegador
web dockerizado
- Componentes front de alto nivel

82. PRO

83. OpenVidu PRO
- Edición Comercial de OpenVidu
- Licencia de pago por uso (no es as a service)
- Funcionalidades
- Escalabilidad y Tolerancia a Fallos
- Monitorización
- Medidor de calidad de la red

84. Escalabilidad

85. Autoescalado

86. Observabilidad

87. Observabilidad

88. Observabilidad

89. Observabilidad

90. Observabilidad

91. Observabilidad

92. ¿Cuál es el futuro de OpenVidu?

93. Más escalabilidad
y tolerancia a fallos
Múltiples
OpenVidu Servers
(Master Nodes)

94. Más escalabilidad
y tolerancia a fallos
Servidores de
media conectados
entre sí

95. Mayor calidad del media
y eficiencia
+

96. ¿WebRTC en tu web?

97. ¿WebRTC en tu web?
Busque, compare
y, si encuentra
algo mejor,
¡cómprelo!

98. WebRTC en tu Web con OpenVidu
Gracias!! Preguntas?