Micael Gallego
Cómo Incluir Videollamadas en Grupo en tu
Página Web con WebRTC y Kurento
Except where otherwise noted, thi...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
2
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
3
¿Qué es
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
WebRTC: Comunicación ...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
5
¿Cómo funciona?
Ser...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
6
¿Cómo funciona?
Ser...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
WebRTC: Comunicación ...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
Fuentes de audio y ví...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
Can I use WebRTC?
9
(...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
10
Tipos de apps WebR...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
11
Tipos de apps WebR...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
12
Servidores de medi...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
13
Servidores de medi...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
14
¿Qué suelen hacer ...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
15
¿Qué pueden llegar...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
16
¿y es muy complica...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
17
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
18
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
19
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
20
Servidor de media ...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
21
Enviar
Recibir
Ana...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
22
Entrada
de media
S...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
23
Media Element
• Pr...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
24
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
25
Media Pipeline
• C...
26
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
27
Media pipeline
Kur...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
28
Transmisión de med...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
29
Browser Servidor W...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
30
Cliente web: Petic...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
31
Servidor web: Cont...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
32
Servidor web: Crea...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
33
¿Cómo implementar ...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
34
¿Cómo implementar ...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
35
WebRTC ofrece la o...
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
36
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
37
Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
38
Micael Gallego
@mi...
Próxima SlideShare
Cargando en…5
×

WebRTC y Kurento en el T3cgFest 2015

903 visualizaciones

Publicado el

En esta presentación se describe la tecnología WebRTC y el servidor de media Kurento. Se ilustran diferentes tipos de aplicaciones que pueden desarrollarse con esta tecnología, como un espejo mágico y un completo sistema de videoconferencia en grupo.

Publicado en: Internet
0 comentarios
6 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
903
En SlideShare
0
De insertados
0
Número de insertados
77
Acciones
Compartido
0
Descargas
18
Comentarios
0
Recomendaciones
6
Insertados 0
No insertados

No hay notas en la diapositiva.

WebRTC y Kurento en el T3cgFest 2015

  1. 1. Micael Gallego Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Except where otherwise noted, this work is licensed under: http://creativecommons.org/licenses/by-nc-sa/3.0/ Leganés 12-13 Febrero 2015
  2. 2. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 2
  3. 3. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 3 ¿Qué es
  4. 4. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 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 • WebRTC es un working draft del W3C 4
  5. 5. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 5 ¿Cómo funciona? Servidor Web Los browsers se conocen conectándose a la misma aplicación web usando Websockets o REST 1
  6. 6. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 6 ¿Cómo funciona? Servidor Web Los browsers se conectan directamente entre sí. Pueden usar UDP , TCP o SCTP2
  7. 7. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 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 7
  8. 8. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 Fuentes de audio y vídeo en WebRTC 8 Webcam Micrófono Compartición de Escritorio
  9. 9. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 Can I use WebRTC? 9 (en desarrollo) También como librerías nativas para apps
  10. 10. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 10 Tipos de apps WebRTC Videoconferencia / chat Emisión de media
  11. 11. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 11 Tipos de apps WebRTC Videoconferencia / chat Emisión de media La conexión directa entre browsers es adecuada en todos los casos ?
  12. 12. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 12 Servidores de media WebRTC Servidor de media
  13. 13. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 13 Servidores de media WebRTC
  14. 14. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 14 ¿Qué suelen hacer los servidores de media? Transcodificar VP8 H.264 Reenviar (Media Conference Unit) Grabar
  15. 15. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 15 ¿Qué pueden llegar a hacer? Analizar Transformar Almacenar Enriquecer Aumentar Adaptar Sensores Eventos • Procesamiento del media • Realidad aumentada • Mezcla de fuentes de vídeo • Análisis • Detección de movimientos • Visión artificial • Etc… Servidor de media
  16. 16. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 16 ¿y es muy complicado?
  17. 17. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 17
  18. 18. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 18
  19. 19. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 19
  20. 20. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 20 Servidor de media WebRTC Software libre (LGPL 2.1) Fácil de usar: se controla con librerías Java o Node.js Protocolo de red JSON-RPC sobre websockets Ampliable a elementos de visión artificial personalizados http://www.kurento.org
  21. 21. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 21 Enviar Recibir Analizar Aumentar Enriquecer Transformar Transcodificar Grabar Procesar Replicar Entrada de media Salida de media Kurento Media Server Arquitectura de Kurento
  22. 22. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 22 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 Arquitectura de Kurento
  23. 23. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 23 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
  24. 24. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 24
  25. 25. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 25 Media Pipeline • Cadena de elementos que implementan la funcionalidad deseada
  26. 26. 26
  27. 27. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 27 Media pipeline Kurento Media Server ¿Cómo implementar un espejo mágico?
  28. 28. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 28 Transmisión de media Browser Kurento Media Server Servidor Web Java Kurento Client Código de aplicación Código de aplicación JSON-RPC sobre WebSockets Protocolo de señalización (AJAX) ¿Cómo implementar un espejo mágico?
  29. 29. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 29 Browser Servidor Web Kurento Datos de intercambio de media (SDP offer) Creación del pipeline y negociación de la transmisión de media Resultado de la negociación de media (SDP Answer) Fase de creación del pipeline Fase de intercambio de media 1 2 Intercambio de media entre el browser y Kurento
  30. 30. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 30 Cliente web: Petición AJAX var webRtcPeer; function start() { webRtcPeer = kurentoUtils.WebRtcPeer.startSendRecv(videoInput, videoOutput, onOffer, onError); } function onOffer(sdpOffer) { $.ajax({ url : location.protocol + '/magicmirror', type : 'POST', dataType : 'text', contentType : 'application/sdp', data : sdpOffer, success : function(sdpAnswer) { webRtcPeer.processSdpAnswer(sdpAnswer); } }); }
  31. 31. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 31 Servidor web: Controlador Spring MVC @RestController public class MagicMirrorController { @Autowired private KurentoClient kurento; @RequestMapping(value = "/magicmirror", method = RequestMethod.POST) private String processRequest(@RequestBody String sdpOffer) throws IOException { // Creación del pipeline // Negociación del media (SDP) return responseSdp; } }
  32. 32. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 32 Servidor web: Creación del pipeline y negociación // Creación del pipeline MediaPipeline pipeline = kurento.createMediaPipeline(); WebRtcEndpoint webRtcEndpoint = new WebRtcEndpoint.Builder(pipeline).build(); FaceOverlayFilter faceOverlayFilter = new FaceOverlayFilter.Builder(pipeline).build(); faceOverlayFilter.setOverlayedImage("http://files.kurento.org/imgs/mario-wings.png", -0.35F, -1.2F, 1.6F, 1.6F); webRtcEndpoint.connect(faceOverlayFilter); faceOverlayFilter.connect(webRtcEndpoint); // Negociación del media (SDP) String responseSdp = webRtcEndpoint.processOffer(sdpOffer);
  33. 33. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 33 ¿Cómo implementar un espejo mágico?
  34. 34. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 34 ¿Cómo implementar un espejo mágico?
  35. 35. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 35 WebRTC ofrece la oportunidad de ofrecer servicios avanzados de comunicación multimedia a cualquier persona (vía web) Kurento facilita la implementación de esos servicios ofreciendo una API familiar a los desarrolladores de aplicaciones web
  36. 36. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 36
  37. 37. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 37
  38. 38. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento Leganés 12-13 Febrero 2015 38 Micael Gallego @micael_gallego Gracias!! http://www.kurento.org http://www.github.com/kurento @kurentoms

×