OpenVidu es una plataforma para incorporar videoconferencia y video streaming en tus aplicaciones web. Es muy fácil de usar y tienes multitud de ejemplos con diferentes tecnologías. Además, es open source. Qué más se puede pedir?
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat Vers...
OpenVidu Commitconf 2018
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
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
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/
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
13.
14.
15.
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
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
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
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
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
51.
52. Arquitectura
de una web app
con OpenVidu
App code
(Backend)
App code
(Frontend)
JavaScript
Library
Server
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
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
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
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