OpenVidu Commitconf 2018
0 recomendaciones731 vistas
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.
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
- 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
- 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
- 46. Vainilla JS
- 48. - Gestión de permisos Android - Plugin nativo para iOS Apps móviles híbridas
- 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
- 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
- 73. ¿Quién desarrolla OpenVidu? Proyectos con financiación pública
- 74. MAD · NOV 23-24 · 2018 Gracias!! MAD · NOV 23-24 · 2018