openvidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil...
TRANSCRIPT
![Page 1: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/1.jpg)
1
OpenVidu, una plataforma open source para añadir videoconferencia a tu aplicación web y móvil
Pablo Fuente Pérez
![Page 3: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/3.jpg)
Consultancy / Training
Cloud ComputingWeb Technologies
Extreme ProgrammingTesting / Git / JenkinsSoftware Architecture
Concurrent Programming
http://codeurjc.es
![Page 4: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/4.jpg)
4
![Page 5: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/5.jpg)
5
![Page 6: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/6.jpg)
6
![Page 7: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/7.jpg)
7
¿Qué es
?
![Page 8: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/8.jpg)
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
8
![Page 9: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/9.jpg)
Can I use WebRTC?
9
También como librerías nativas para apps
![Page 10: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/10.jpg)
10
¿Cómo funciona?
Servidor Web
Los browsers se conocen conectándose a la misma aplicación web usando Websockets o REST
1
![Page 11: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/11.jpg)
11
Servidor Web
Los browsers se conectan directamente entre sí mediante el protocolo WebRTC. Under the hood pueden usar UDP, TCP o SCTP
2¿Cómo funciona?
![Page 12: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/12.jpg)
Fuentes de audio y vídeo en WebRTC
12
Webcam Micrófono Compartición de Escritorio
![Page 13: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/13.jpg)
![Page 14: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/14.jpg)
![Page 15: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/15.jpg)
![Page 16: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/16.jpg)
16
Tipos de apps WebRTC
Videoconferencia / chat
Emisión de media
![Page 17: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/17.jpg)
17
Tipos de apps WebRTC
Llamadas en grupo
![Page 18: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/18.jpg)
18
La conexión directa entre browsers NO es adecuada en todos los casos
Tipos de apps WebRTC
Llamadas en grupo
![Page 19: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/19.jpg)
19
Servidores de media WebRTC
Servidor de media
![Page 20: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/20.jpg)
20
¿Qué suelen hacer los servidores de media?
Transcodificar VP8 H.264
Reenviar(Para llamadas en grupo o streaming de baja latencia)
Grabar
![Page 21: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/21.jpg)
21
Servidores de media WebRTC
Servicios de videoconferencia cerrados
![Page 22: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/22.jpg)
22
![Page 23: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/23.jpg)
23
Servidores de media programables
As a Service ServidoresComerciales
ServidoresOpen Source
![Page 24: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/24.jpg)
24
¿y es muy complicado?
![Page 25: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/25.jpg)
25
![Page 26: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/26.jpg)
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés12-13 Febrero 2015
26
![Page 27: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/27.jpg)
![Page 28: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/28.jpg)
¿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/
![Page 29: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/29.jpg)
Videoconferencia
- Modelo de desarrollo simplificado de aplicaciones de videoconferencia en grupo
![Page 30: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/30.jpg)
![Page 31: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/31.jpg)
Tutoriales con múltiples tecnologías
![Page 32: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/32.jpg)
Arquitecturade una web app con OpenVidu
App code(Backend)
App code(Frontend)
JavaScript Library
Server
![Page 33: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/33.jpg)
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
![Page 34: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/34.jpg)
Tutoriales / Demos- Ejecutar servidor OpenVidu
- Ejecutar la aplicación de demo
![Page 35: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/35.jpg)
Vainilla JS
https://openvidu.io/docs/tutorials/openvidu-insecure-js/
![Page 36: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/36.jpg)
Vainilla JS
![Page 37: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/37.jpg)
![Page 38: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/38.jpg)
- 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
![Page 39: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/39.jpg)
![Page 40: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/40.jpg)
Arquitecturade una web app con OpenVidu
App code(Backend)
App code(Frontend)
JavaScript Library
Server
![Page 41: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/41.jpg)
Un poco mása fondo...
![Page 42: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/42.jpg)
![Page 43: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/43.jpg)
![Page 44: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/44.jpg)
Servidor de media WebRTC
Control de bajo nivel del procesamiento del media en pipelines
Controlable con un protocolo sobre WebSockets
También desarrollado en la URJC!
44http://www.kurento.org
![Page 46: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/46.jpg)
46
Biblioteca de componentes predefinidos
![Page 47: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/47.jpg)
47
Media Pipeline• Cadena de elementos que implementan la funcionalidad
deseada
![Page 48: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/48.jpg)
![Page 49: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/49.jpg)
49
![Page 50: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/50.jpg)
![Page 51: OpenVidu, una plataforma open source para añadir ...videoconferencia a tu aplicación web y móvil Pablo Fuente Pérez ¿Éste quién es? @fuentepab pablofuenteperez@gmail.com @pabloFuente](https://reader036.vdocument.in/reader036/viewer/2022081620/610823138d80bb19511bbf09/html5/thumbnails/51.jpg)
OpenVidu Browser & Server- Simplifica el modelo de programación sobre Kurento (o
cualquier futuro servidor de media)- Gestiona sesiones, permisos, negociación de media- Despliegues sencillos sobre proveedores cloud
(CloudFormation) o tu propia infraestructura (Ansible)- Componentes front de alto nivel