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

Más contenido relacionado

La actualidad más candente

Curso Angular 9 - CodeURJC - Marzo 2020
Curso Angular 9 - CodeURJC - Marzo 2020Curso Angular 9 - CodeURJC - Marzo 2020
Curso Angular 9 - CodeURJC - Marzo 2020Micael Gallego
 
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)Micael Gallego
 
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...Micael Gallego
 
Node para Javeros: Conoce a tu enemigo
Node para Javeros: Conoce a tu enemigoNode para Javeros: Conoce a tu enemigo
Node para Javeros: Conoce a tu enemigoMicael Gallego
 
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallosTesteando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallosMicael Gallego
 
Mecanismos y patrones para acelerar adopción en arquitecturas de microservicios
Mecanismos y patrones para acelerar adopción en arquitecturas de microserviciosMecanismos y patrones para acelerar adopción en arquitecturas de microservicios
Mecanismos y patrones para acelerar adopción en arquitecturas de microserviciosSoftware Guru
 
GWT y SmartGWT - Introducción
GWT y SmartGWT - IntroducciónGWT y SmartGWT - Introducción
GWT y SmartGWT - IntroducciónVLASLOV
 
El Web 2.0 MóVil Caminando Hacia El Teleco 2.0 Sin Caratula
El Web 2.0 MóVil Caminando Hacia El Teleco 2.0 Sin CaratulaEl Web 2.0 MóVil Caminando Hacia El Teleco 2.0 Sin Caratula
El Web 2.0 MóVil Caminando Hacia El Teleco 2.0 Sin CaratulaLuis Angel Galindo
 
Webinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - QuobisWebinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - QuobisQuobis
 
Catalyst: Framework para el desarrollo de aplicaciones Web
Catalyst: Framework para el desarrollo de aplicaciones WebCatalyst: Framework para el desarrollo de aplicaciones Web
Catalyst: Framework para el desarrollo de aplicaciones WebEsteban Saavedra
 
Codemotion 2015 crash y youdebug
Codemotion 2015   crash y youdebugCodemotion 2015   crash y youdebug
Codemotion 2015 crash y youdebugjmiguel rodriguez
 

La actualidad más candente (20)

Curso Angular 9 - CodeURJC - Marzo 2020
Curso Angular 9 - CodeURJC - Marzo 2020Curso Angular 9 - CodeURJC - Marzo 2020
Curso Angular 9 - CodeURJC - Marzo 2020
 
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
 
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
 
Node para Javeros: Conoce a tu enemigo
Node para Javeros: Conoce a tu enemigoNode para Javeros: Conoce a tu enemigo
Node para Javeros: Conoce a tu enemigo
 
Implementando una Arquitectura de Microservicios
Implementando una Arquitectura de MicroserviciosImplementando una Arquitectura de Microservicios
Implementando una Arquitectura de Microservicios
 
Aplicaciones web
Aplicaciones webAplicaciones web
Aplicaciones web
 
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallosTesteando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
 
Mecanismos y patrones para acelerar adopción en arquitecturas de microservicios
Mecanismos y patrones para acelerar adopción en arquitecturas de microserviciosMecanismos y patrones para acelerar adopción en arquitecturas de microservicios
Mecanismos y patrones para acelerar adopción en arquitecturas de microservicios
 
Aprendiendo GWT
Aprendiendo GWTAprendiendo GWT
Aprendiendo GWT
 
GWT y SmartGWT - Introducción
GWT y SmartGWT - IntroducciónGWT y SmartGWT - Introducción
GWT y SmartGWT - Introducción
 
El Web 2.0 MóVil Caminando Hacia El Teleco 2.0 Sin Caratula
El Web 2.0 MóVil Caminando Hacia El Teleco 2.0 Sin CaratulaEl Web 2.0 MóVil Caminando Hacia El Teleco 2.0 Sin Caratula
El Web 2.0 MóVil Caminando Hacia El Teleco 2.0 Sin Caratula
 
DevOps: una breve introducción
DevOps: una breve introducciónDevOps: una breve introducción
DevOps: una breve introducción
 
20170405 - Ecosistema Javascript
20170405 - Ecosistema Javascript20170405 - Ecosistema Javascript
20170405 - Ecosistema Javascript
 
Webinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - QuobisWebinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - Quobis
 
Catalyst: Framework para el desarrollo de aplicaciones Web
Catalyst: Framework para el desarrollo de aplicaciones WebCatalyst: Framework para el desarrollo de aplicaciones Web
Catalyst: Framework para el desarrollo de aplicaciones Web
 
Framework Catalyst
Framework CatalystFramework Catalyst
Framework Catalyst
 
Desarrollo de Aplicaciones Web 2.0 con GWT
Desarrollo de Aplicaciones Web 2.0 con GWTDesarrollo de Aplicaciones Web 2.0 con GWT
Desarrollo de Aplicaciones Web 2.0 con GWT
 
Codemotion 2015 crash y youdebug
Codemotion 2015   crash y youdebugCodemotion 2015   crash y youdebug
Codemotion 2015 crash y youdebug
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Gestión de proyectos con Maven
Gestión de proyectos con MavenGestión de proyectos con Maven
Gestión de proyectos con Maven
 

Similar a OpenVidu Commitconf 2018

Experiencia de uso de WebRTC en la educación
Experiencia de uso de WebRTC en la educaciónExperiencia de uso de WebRTC en la educación
Experiencia de uso de WebRTC en la educaciónJorge Rubiano
 
herramientas tecnológicas
herramientas tecnológicasherramientas tecnológicas
herramientas tecnológicasGerardo Linares
 
Telepresencia segmento activo
Telepresencia segmento activoTelepresencia segmento activo
Telepresencia segmento activojuanes333
 
Presentacion tecnica microsoft.net
Presentacion tecnica microsoft.netPresentacion tecnica microsoft.net
Presentacion tecnica microsoft.netRulo Rosaz
 
Framework .NET 3.5 01 Conceptos básicos y entorno
Framework .NET 3.5 01 Conceptos básicos y entornoFramework .NET 3.5 01 Conceptos básicos y entorno
Framework .NET 3.5 01 Conceptos básicos y entornoAntonio Palomares Sender
 
Desarrollo de una aplicación Web para organizar Eventos Deportivos
Desarrollo de una aplicación Web para organizar Eventos DeportivosDesarrollo de una aplicación Web para organizar Eventos Deportivos
Desarrollo de una aplicación Web para organizar Eventos DeportivosAdrian Alonso Vega
 
Introducción a silverlight
Introducción a silverlightIntroducción a silverlight
Introducción a silverlightricardomeanaG9
 
Fundamentos tecnologías web
Fundamentos tecnologías webFundamentos tecnologías web
Fundamentos tecnologías webDavid Hurtado
 
365663015-Presentacion-Windows-Form-C-convertido.pptx
365663015-Presentacion-Windows-Form-C-convertido.pptx365663015-Presentacion-Windows-Form-C-convertido.pptx
365663015-Presentacion-Windows-Form-C-convertido.pptxBrandonContreras19
 
webinar "Microsoft Centro Experto.Presente y futuro de las Aplicaciones NET e...
webinar "Microsoft Centro Experto.Presente y futuro de las Aplicaciones NET e...webinar "Microsoft Centro Experto.Presente y futuro de las Aplicaciones NET e...
webinar "Microsoft Centro Experto.Presente y futuro de las Aplicaciones NET e...atSistemas
 
Sistemas Microsoft Windows
Sistemas Microsoft WindowsSistemas Microsoft Windows
Sistemas Microsoft WindowsAsier Marqués
 

Similar a OpenVidu Commitconf 2018 (20)

Experiencia de uso de WebRTC en la educación
Experiencia de uso de WebRTC en la educaciónExperiencia de uso de WebRTC en la educación
Experiencia de uso de WebRTC en la educación
 
Software libre y_e-meetings_v2.0
Software libre y_e-meetings_v2.0Software libre y_e-meetings_v2.0
Software libre y_e-meetings_v2.0
 
Juegos html5
Juegos html5Juegos html5
Juegos html5
 
herramientas tecnológicas
herramientas tecnológicasherramientas tecnológicas
herramientas tecnológicas
 
PresentacionPFC_ppt
PresentacionPFC_pptPresentacionPFC_ppt
PresentacionPFC_ppt
 
Telepresencia segmento activo
Telepresencia segmento activoTelepresencia segmento activo
Telepresencia segmento activo
 
Presentacion tecnica microsoft.net
Presentacion tecnica microsoft.netPresentacion tecnica microsoft.net
Presentacion tecnica microsoft.net
 
Framework .NET 3.5 01 Conceptos básicos y entorno
Framework .NET 3.5 01 Conceptos básicos y entornoFramework .NET 3.5 01 Conceptos básicos y entorno
Framework .NET 3.5 01 Conceptos básicos y entorno
 
Red coorporativa
Red coorporativaRed coorporativa
Red coorporativa
 
DotNetDom: El futuro de Xamarin
DotNetDom: El futuro de XamarinDotNetDom: El futuro de Xamarin
DotNetDom: El futuro de Xamarin
 
Desarrollo de una aplicación Web para organizar Eventos Deportivos
Desarrollo de una aplicación Web para organizar Eventos DeportivosDesarrollo de una aplicación Web para organizar Eventos Deportivos
Desarrollo de una aplicación Web para organizar Eventos Deportivos
 
Oracle Application Framework
Oracle Application FrameworkOracle Application Framework
Oracle Application Framework
 
Introducción a silverlight
Introducción a silverlightIntroducción a silverlight
Introducción a silverlight
 
Fundamentos tecnologías web
Fundamentos tecnologías webFundamentos tecnologías web
Fundamentos tecnologías web
 
365663015-Presentacion-Windows-Form-C-convertido.pptx
365663015-Presentacion-Windows-Form-C-convertido.pptx365663015-Presentacion-Windows-Form-C-convertido.pptx
365663015-Presentacion-Windows-Form-C-convertido.pptx
 
Autobuses de Madrid en tiempo real con Azure Relay
Autobuses de Madrid en tiempo real con Azure RelayAutobuses de Madrid en tiempo real con Azure Relay
Autobuses de Madrid en tiempo real con Azure Relay
 
webinar "Microsoft Centro Experto.Presente y futuro de las Aplicaciones NET e...
webinar "Microsoft Centro Experto.Presente y futuro de las Aplicaciones NET e...webinar "Microsoft Centro Experto.Presente y futuro de las Aplicaciones NET e...
webinar "Microsoft Centro Experto.Presente y futuro de las Aplicaciones NET e...
 
Olivares
OlivaresOlivares
Olivares
 
Sistemas Microsoft Windows
Sistemas Microsoft WindowsSistemas Microsoft Windows
Sistemas Microsoft Windows
 
.Net Conf Sevilla 2018
.Net Conf Sevilla 2018.Net Conf Sevilla 2018
.Net Conf Sevilla 2018
 

Más de Micael Gallego

La evaluación con realimentación y posibilidad de recuperación para evitar el...
La evaluación con realimentación y posibilidad de recuperación para evitar el...La evaluación con realimentación y posibilidad de recuperación para evitar el...
La evaluación con realimentación y posibilidad de recuperación para evitar el...Micael Gallego
 
Testing cloud and kubernetes applications - ElasTest
Testing cloud and kubernetes applications - ElasTestTesting cloud and kubernetes applications - ElasTest
Testing cloud and kubernetes applications - ElasTestMicael Gallego
 
Introducción a las Pruebas Software
Introducción a las Pruebas SoftwareIntroducción a las Pruebas Software
Introducción a las Pruebas SoftwareMicael Gallego
 
Testing fácil con Docker: Gestiona dependencias y unifica entornos
Testing fácil con Docker: Gestiona dependencias y unifica entornosTesting fácil con Docker: Gestiona dependencias y unifica entornos
Testing fácil con Docker: Gestiona dependencias y unifica entornosMicael Gallego
 
Using Docker to build and test in your laptop and Jenkins
Using Docker to build and test in your laptop and JenkinsUsing Docker to build and test in your laptop and Jenkins
Using Docker to build and test in your laptop and JenkinsMicael Gallego
 
Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009Micael Gallego
 
Como ser mas productivo en el desarrollo de aplicaciones
Como ser mas productivo en el desarrollo de aplicacionesComo ser mas productivo en el desarrollo de aplicaciones
Como ser mas productivo en el desarrollo de aplicacionesMicael Gallego
 
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: Un lenguaje aburrido para programadores torpes y tristesTypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: Un lenguaje aburrido para programadores torpes y tristesMicael Gallego
 
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...Micael Gallego
 
El mundo real en el aula, con la ayuda del profesor
El mundo real en el aula, con la ayuda del profesorEl mundo real en el aula, con la ayuda del profesor
El mundo real en el aula, con la ayuda del profesorMicael Gallego
 
Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016Micael Gallego
 
GRASP con PR para el SRFLP en el MAEB 2016
GRASP con PR para el SRFLP en el MAEB 2016GRASP con PR para el SRFLP en el MAEB 2016
GRASP con PR para el SRFLP en el MAEB 2016Micael Gallego
 
TypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browser
TypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browserTypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browser
TypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browserMicael Gallego
 
TypeScript - Angular 2 - ionic 2
TypeScript - Angular 2 - ionic 2TypeScript - Angular 2 - ionic 2
TypeScript - Angular 2 - ionic 2Micael Gallego
 
Desarrollo web front-end con TypeScript, Angular 2 e Ionic
Desarrollo web front-end con TypeScript, Angular 2 e IonicDesarrollo web front-end con TypeScript, Angular 2 e Ionic
Desarrollo web front-end con TypeScript, Angular 2 e IonicMicael Gallego
 
TypeScript para Javeros: Cómo programar web front-end y sentirse como en casa
TypeScript para Javeros: Cómo programar web front-end y sentirse como en casaTypeScript para Javeros: Cómo programar web front-end y sentirse como en casa
TypeScript para Javeros: Cómo programar web front-end y sentirse como en casaMicael Gallego
 
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?Micael Gallego
 

Más de Micael Gallego (17)

La evaluación con realimentación y posibilidad de recuperación para evitar el...
La evaluación con realimentación y posibilidad de recuperación para evitar el...La evaluación con realimentación y posibilidad de recuperación para evitar el...
La evaluación con realimentación y posibilidad de recuperación para evitar el...
 
Testing cloud and kubernetes applications - ElasTest
Testing cloud and kubernetes applications - ElasTestTesting cloud and kubernetes applications - ElasTest
Testing cloud and kubernetes applications - ElasTest
 
Introducción a las Pruebas Software
Introducción a las Pruebas SoftwareIntroducción a las Pruebas Software
Introducción a las Pruebas Software
 
Testing fácil con Docker: Gestiona dependencias y unifica entornos
Testing fácil con Docker: Gestiona dependencias y unifica entornosTesting fácil con Docker: Gestiona dependencias y unifica entornos
Testing fácil con Docker: Gestiona dependencias y unifica entornos
 
Using Docker to build and test in your laptop and Jenkins
Using Docker to build and test in your laptop and JenkinsUsing Docker to build and test in your laptop and Jenkins
Using Docker to build and test in your laptop and Jenkins
 
Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009
 
Como ser mas productivo en el desarrollo de aplicaciones
Como ser mas productivo en el desarrollo de aplicacionesComo ser mas productivo en el desarrollo de aplicaciones
Como ser mas productivo en el desarrollo de aplicaciones
 
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: Un lenguaje aburrido para programadores torpes y tristesTypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
 
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
 
El mundo real en el aula, con la ayuda del profesor
El mundo real en el aula, con la ayuda del profesorEl mundo real en el aula, con la ayuda del profesor
El mundo real en el aula, con la ayuda del profesor
 
Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016
 
GRASP con PR para el SRFLP en el MAEB 2016
GRASP con PR para el SRFLP en el MAEB 2016GRASP con PR para el SRFLP en el MAEB 2016
GRASP con PR para el SRFLP en el MAEB 2016
 
TypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browser
TypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browserTypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browser
TypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browser
 
TypeScript - Angular 2 - ionic 2
TypeScript - Angular 2 - ionic 2TypeScript - Angular 2 - ionic 2
TypeScript - Angular 2 - ionic 2
 
Desarrollo web front-end con TypeScript, Angular 2 e Ionic
Desarrollo web front-end con TypeScript, Angular 2 e IonicDesarrollo web front-end con TypeScript, Angular 2 e Ionic
Desarrollo web front-end con TypeScript, Angular 2 e Ionic
 
TypeScript para Javeros: Cómo programar web front-end y sentirse como en casa
TypeScript para Javeros: Cómo programar web front-end y sentirse como en casaTypeScript para Javeros: Cómo programar web front-end y sentirse como en casa
TypeScript para Javeros: Cómo programar web front-end y sentirse como en casa
 
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
 

Último

COMO PUBLICAR UNA PRESENTACION GRAFICA EN INTERNET .pptx
COMO PUBLICAR UNA PRESENTACION GRAFICA EN INTERNET .pptxCOMO PUBLICAR UNA PRESENTACION GRAFICA EN INTERNET .pptx
COMO PUBLICAR UNA PRESENTACION GRAFICA EN INTERNET .pptxPaolaRamirez127635
 
Presentacion De Imagenes Digitales Y Navegadores De Internet.
Presentacion De Imagenes Digitales Y Navegadores De Internet.Presentacion De Imagenes Digitales Y Navegadores De Internet.
Presentacion De Imagenes Digitales Y Navegadores De Internet.Universidad De Sonora
 
PerezGallegos_Claudia_M1S3Al6.pptx las tic en la vida cotidiana
PerezGallegos_Claudia_M1S3Al6.pptx las tic en la vida cotidianaPerezGallegos_Claudia_M1S3Al6.pptx las tic en la vida cotidiana
PerezGallegos_Claudia_M1S3Al6.pptx las tic en la vida cotidiana241544382
 
sistema político Mariangel Adjam Mapa mental
sistema político Mariangel Adjam Mapa mentalsistema político Mariangel Adjam Mapa mental
sistema político Mariangel Adjam Mapa mentalMariangelAdjam
 
Distribucion fisica internacional .pptx
Distribucion fisica internacional  .pptxDistribucion fisica internacional  .pptx
Distribucion fisica internacional .pptxRicardoCastellanosDr
 
ciberseguridad y seguridad informatica- alex jaren.pptx
ciberseguridad y seguridad informatica- alex jaren.pptxciberseguridad y seguridad informatica- alex jaren.pptx
ciberseguridad y seguridad informatica- alex jaren.pptxdiazalexci00
 
PARTES DE LA PANTALLA DE POWER POINT.pptx
PARTES DE LA PANTALLA DE POWER POINT.pptxPARTES DE LA PANTALLA DE POWER POINT.pptx
PARTES DE LA PANTALLA DE POWER POINT.pptxdsap2008
 
Manual-Microsoft-Office-Excel-2i010-basico.pdf
Manual-Microsoft-Office-Excel-2i010-basico.pdfManual-Microsoft-Office-Excel-2i010-basico.pdf
Manual-Microsoft-Office-Excel-2i010-basico.pdfCristinaOgandoMorale
 
Imagen creada en photopea con el fin de informar acerca de los navegadores web.
Imagen creada en photopea con el fin de informar acerca de los navegadores web.Imagen creada en photopea con el fin de informar acerca de los navegadores web.
Imagen creada en photopea con el fin de informar acerca de los navegadores web.UNIVERSIDAD
 

Último (10)

COMO PUBLICAR UNA PRESENTACION GRAFICA EN INTERNET .pptx
COMO PUBLICAR UNA PRESENTACION GRAFICA EN INTERNET .pptxCOMO PUBLICAR UNA PRESENTACION GRAFICA EN INTERNET .pptx
COMO PUBLICAR UNA PRESENTACION GRAFICA EN INTERNET .pptx
 
Dominios_De_Internet.pdf
Dominios_De_Internet.pdfDominios_De_Internet.pdf
Dominios_De_Internet.pdf
 
Presentacion De Imagenes Digitales Y Navegadores De Internet.
Presentacion De Imagenes Digitales Y Navegadores De Internet.Presentacion De Imagenes Digitales Y Navegadores De Internet.
Presentacion De Imagenes Digitales Y Navegadores De Internet.
 
PerezGallegos_Claudia_M1S3Al6.pptx las tic en la vida cotidiana
PerezGallegos_Claudia_M1S3Al6.pptx las tic en la vida cotidianaPerezGallegos_Claudia_M1S3Al6.pptx las tic en la vida cotidiana
PerezGallegos_Claudia_M1S3Al6.pptx las tic en la vida cotidiana
 
sistema político Mariangel Adjam Mapa mental
sistema político Mariangel Adjam Mapa mentalsistema político Mariangel Adjam Mapa mental
sistema político Mariangel Adjam Mapa mental
 
Distribucion fisica internacional .pptx
Distribucion fisica internacional  .pptxDistribucion fisica internacional  .pptx
Distribucion fisica internacional .pptx
 
ciberseguridad y seguridad informatica- alex jaren.pptx
ciberseguridad y seguridad informatica- alex jaren.pptxciberseguridad y seguridad informatica- alex jaren.pptx
ciberseguridad y seguridad informatica- alex jaren.pptx
 
PARTES DE LA PANTALLA DE POWER POINT.pptx
PARTES DE LA PANTALLA DE POWER POINT.pptxPARTES DE LA PANTALLA DE POWER POINT.pptx
PARTES DE LA PANTALLA DE POWER POINT.pptx
 
Manual-Microsoft-Office-Excel-2i010-basico.pdf
Manual-Microsoft-Office-Excel-2i010-basico.pdfManual-Microsoft-Office-Excel-2i010-basico.pdf
Manual-Microsoft-Office-Excel-2i010-basico.pdf
 
Imagen creada en photopea con el fin de informar acerca de los navegadores web.
Imagen creada en photopea con el fin de informar acerca de los navegadores web.Imagen creada en photopea con el fin de informar acerca de los navegadores web.
Imagen creada en photopea con el fin de informar acerca de los navegadores web.
 

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
  • 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
  • 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
  • 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
  • 31.
  • 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
  • 34.
  • 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
  • 44.
  • 47.
  • 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
  • 51.
  • 52. Arquitectura de una web app con OpenVidu App code (Backend) App code (Frontend) JavaScript Library Server
  • 53. Un poco más a fondo...
  • 54.
  • 55.
  • 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
  • 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
  • 64.
  • 65. 65
  • 66.
  • 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
  • 68.
  • 73. ¿Quién desarrolla OpenVidu? Proyectos con financiación pública
  • 74. MAD · NOV 23-24 · 2018 Gracias!! MAD · NOV 23-24 · 2018