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.

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. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
2

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
17

18. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
18

19. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
19

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. 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. 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. 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. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
24

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

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. 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. 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. 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. 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. 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. 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. 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. 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. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
36

37. Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y Kurento
Leganés
12-13 Febrero 2015
37

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