Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

OpenVidu Commitconf 2018

170 visualizaciones

Publicado el

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?

Publicado en: Internet
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

OpenVidu Commitconf 2018

  1. 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. 2. ¿Éste quién es? Profesor Universitario / Formador & Consultor Developer
  3. 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. 4
  5. 5. 5 ¿Qué es ?
  6. 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. 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. 8
  9. 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. 10 Servidor Web Los browsers se conectan directamente entre sí. Pueden usar UDP, TCP o SCTP2 ¿Cómo funciona?
  11. 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. 12. Fuentes de audio y vídeo en WebRTC 12 Webcam Micrófono Compartición de Escritorio
  13. 13. 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
  14. 14. 17 •Se puede combinar WebRTC y Streaming •Emisión por streaming en YouTube Live una videollamada en Hangouts
  15. 15. Can I use WebRTC? 18 También como librerías nativas para apps
  16. 16. Compatibilidad entre browsers! 19 https://webrtc.org/testing/kite/
  17. 17. 20 Tipos de apps WebRTC Videoconferencia / chat Emisión de media
  18. 18. 21 Tipos de apps WebRTC Llamadas en grupo
  19. 19. 22 La conexión directa entre browsers NO es adecuada en todos los casos Tipos de apps WebRTC Llamadas en grupo
  20. 20. 23 Servidores de media WebRTC Servidor de media
  21. 21. 24 ¿Qué suelen hacer los servidores de media? Transcodificar VP8 H.264 Reenviar (Para llamadas en grupo o streaming de baja latencia) Grabar
  22. 22. 25 Servidores de media WebRTC Servicios de videoconferencia cerrados
  23. 23. 26
  24. 24. 27 Servidores de media programables As a Service Servidores Comerciales Servidores Open Source
  25. 25. 28 ¿y es muy complicado?
  26. 26. 29
  27. 27. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 30
  28. 28. ¿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/
  29. 29. Videoconferencia - Modelo de desarrollo simplificado de aplicaciones de videoconferencia en grupo - Permite modelos personalizados: - Profesor - alumno - Presentador - visor
  30. 30. Tutoriales con múltiples tecnologías
  31. 31. 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
  32. 32. 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
  33. 33. 38
  34. 34. Arquitectura de una web app con OpenVidu App code (Backend) App code (Frontend) JavaScript Library Server
  35. 35. 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
  36. 36. Tutoriales / Demos - Ejecutar servidor OpenVidu - Ejecutar la aplicación de demo
  37. 37. 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
  38. 38. Web Component https://openvidu.io/docs/tutorials/openvidu-webcomponent/
  39. 39. Vainilla JS https://openvidu.io/docs/tutorials/openvidu-insecure-js/
  40. 40. Vainilla JS
  41. 41. - Gestión de permisos Android - Plugin nativo para iOS Apps móviles híbridas
  42. 42. Demos temáticas: Classroom
  43. 43. - 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
  44. 44. Arquitectura de una web app con OpenVidu App code (Backend) App code (Frontend) JavaScript Library Server
  45. 45. Un poco más a fondo...
  46. 46. 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
  47. 47. 57 http://www.kurento.org
  48. 48. 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
  49. 49. 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
  50. 50. 60 Biblioteca de componentes predefinidos
  51. 51. 61 Media Pipeline • Cadena de elementos que implementan la funcionalidad deseada
  52. 52. 62 Media pipeline Kurento Media Server ¿Cómo implementar un espejo mágico?
  53. 53. 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
  54. 54. 65
  55. 55. 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
  56. 56. Testing OpenVidu & Kurento
  57. 57. Testing OpenVidu & Kurento
  58. 58. Testing OpenVidu & Kurento
  59. 59. Testing OpenVidu & Kurento
  60. 60. ¿Quién desarrolla OpenVidu? Proyectos con financiación pública
  61. 61. MAD · NOV 23-24 · 2018 Gracias!! MAD · NOV 23-24 · 2018

×