El documento presenta una introducción a WebRTC y OpenVidu, tecnologías que permiten la comunicación en tiempo real a través de navegadores sin necesidad de servidores intermedios. Se describen sus aplicaciones en videoconferencias, transmisiones de medios y las funcionalidades avanzadas que ofrece OpenVidu. Además, se destacan aspectos técnicos como la arquitectura de aplicaciones, servidores de medios y compatibilidad entre distintos navegadores.

1. MAD · NOV 23-24 · 2018
Videoconferencias o control
remoto de drones
Todo es posible con WebRTC y OpenVidu
Micael Gallego
Developer, Profesor, Científico... MAD · NOV 23-24 · 2018

2. ¿Éste quién es?
Profesor Universitario / Formador & Consultor
Developer

3. Node para Javeros · @micael_gallego
Consultancy / Training
Cloud Computing
Web Technologies
Extreme Programming
Testing / Git / Jenkins
Software Architecture
Concurrent Programming
http://codeurjc.es
Open source elastic platform
for end to end testing
https://elastest.io
Log Analysis
Test orchestration and comparison
Web and Mobile testing
Security testing
IoT testing
Performance testing

4. 4

5. 5
¿Qué es
?

6. 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)
•Usa el framework ICE para traspasar los NATs y
permitir una comunicación directa entre navegadores
•La baja latencia es ideal para transmitir audio y vídeo
6

7. WebRTC: Comunicación en tiempo
real para la web
•Desarrollado inicialmente por Google
•WebRTC es una Candidate Recommendation del W3C
7
https://www.w3.org/TR/webrtc/
https://webrtc.org/

8. 8

9. 9
¿Cómo funciona?
Servidor Web
Los browsers se conocen
conectándose a la misma aplicación
web usando Websockets o REST
1

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

11. 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
11

12. Fuentes de audio y vídeo en
WebRTC
12
Webcam Micrófono Compartición de
Escritorio

16. 16
WebRTC vs Video Streaming
•El streaming de vídeo tiene latencias de hasta 10
segundos
•Se usan técnicas como Http Live Streaming (HLS)
•Las técnicas usadas no pueden usarse para
videoconferencia
https://en.wikipedia.org/wiki/HTTP_Live_Streaming

17. 17
•Se puede combinar
WebRTC y
Streaming
•Emisión por
streaming en
YouTube Live una
videollamada en
Hangouts

18. Can I use WebRTC?
18
También como librerías nativas para apps

19. Compatibilidad entre browsers!
19
https://webrtc.org/testing/kite/

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

21. 21
Tipos de apps WebRTC
Llamadas en
grupo

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

23. 23
Servidores de media WebRTC
Servidor de
media

24. 24
¿Qué suelen hacer los servidores de media?
Transcodificar
VP8 H.264
Reenviar
(Para llamadas en grupo o
streaming de baja latencia)
Grabar

25. 25
Servidores de media WebRTC
Servicios de videoconferencia cerrados

26. 26

27. 27
Servidores de media programables
As a Service Servidores
Comerciales
Servidores
Open Source

28. 28
¿y es muy complicado?

29. 29

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

32. ¿Qué es OpenVidu?
- Plataforma para desarrollo de apps WebRTC
- Modelo de programación sencillo y múltiples ejemplos
- Funcionalidades avanzadas (grabación, filtros, visión
artificial…)
- Open source (Licencia Apache)
https://openvidu.io/

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

35. Tutoriales con múltiples tecnologías

36. Fácil de instalar en tu laptop
- Desarrollo en Linux, Win y Mac
- OpenVidu Server + Kurento Server
dockerizado
- Integración con ngrok para facilitar
pruebas en dispositivos de la misma red
- Facilidades para tratar con certificados
autofirmados

37. Fácil de desplegar en producción
- CloudFormation para desplegar en
AWS
- Generación de certificados con Let’s
Encrypt
- Aplicaciones de ejemplo opcionales
probar rápidamente la funcionalidad

38. 38

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

40. Control de acceso y permisos
- Backend
- Se conecta a la API REST de OpenVidu Server
- Decide qué sesiones existen y qué usuarios pueden
conectarse a ella
- Decide qué rol tiene el usuario (PUBLISHER, SUBSCRIBER,
MODERATOR)
- Genera token y se lo envía a frontend
- Frontend
- Usa el token en OpenVidu Browser para conectarse a la
sesión

41. Tutoriales / Demos
- Ejecutar servidor OpenVidu
- Ejecutar la aplicación de demo

42. 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

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

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

46. Vainilla JS

48. - Gestión de permisos Android
- Plugin nativo para iOS
Apps móviles híbridas

49. Demos temáticas: Classroom

50. - 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 (p.e. drone)
Funcionalidades avanzadas

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

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

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

57. 57
http://www.kurento.org

58. 58
Entrada
de media
Salida
de mediaKurento 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

59. 59
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

60. 60
Biblioteca de componentes predefinidos

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

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

63. 63
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

65. 65

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

69. Testing OpenVidu & Kurento

70. Testing OpenVidu & Kurento

71. Testing OpenVidu & Kurento

72. Testing
OpenVidu
& Kurento

73. ¿Quién desarrolla OpenVidu?
Proyectos con financiación pública

74. MAD · NOV 23-24 · 2018
Gracias!!
MAD · NOV 23-24 · 2018