WebRTC y Kurento en el T3cgFest 2015

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

http://creativecommons.org/licenses/by-nc-sa/3.0/

Cómo Incluir Videollamadas en Grupo en tu Página Web con WebRTC y KurentoLeganés

12-13 Febrero 2015

2


12-13 Febrero 2015

3

¿Qué es


12-13 Febrero 2015

WebRTC: Comunicación en tiemporeal 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 permitiruna comunicación directa entre navegadores

• WebRTC es un working draft del W3C

4


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


12-13 Febrero 2015

6

¿Cómo funciona?

Servidor Web

Los browsers se conectan directamente entre sí. Pueden usar UDP , TCP o SCTP2


12-13 Febrero 2015

WebRTC: Comunicación en tiemporeal 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


12-13 Febrero 2015

Fuentes de audio y vídeo en WebRTC

8

Webcam Micrófono Compartición de Escritorio


12-13 Febrero 2015

Can I use WebRTC?

9

(en desarrollo)

También como librerías nativas para apps


12-13 Febrero 2015

10

Tipos de apps WebRTC

Videoconferencia / chat

Emisión de media


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-13 Febrero 2015

12

Servidores de media WebRTC

Servidor de media


12-13 Febrero 2015

13

Servidores de media WebRTC


12-13 Febrero 2015

14

¿Qué suelen hacer los servidores de media?

TranscodificarVP8 H.264

Reenviar(Media Conference Unit)

Grabar


12-13 Febrero 2015

15

¿Qué pueden llegar a hacer?

AnalizarTransformarAlmacenar

EnriquecerAumentarAdaptar

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


12-13 Febrero 2015

16

¿y es muy complicado?


12-13 Febrero 2015

17


12-13 Febrero 2015

18


12-13 Febrero 2015

19


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

http://www.kurento.org/


12-13 Febrero 2015

21

EnviarRecibir

AnalizarAumentarEnriquecer

TransformarTranscodificar

GrabarProcesarReplicar

Entradade media

Salidade media

Kurento Media Server

Arquitectura de Kurento


12-13 Febrero 2015

22

Entradade media

Salidade mediaKurento Media Server

Cliente Java

Las aplicaciones definen cómoprocesar el media que llega a Kurento

Media Server

Cliente JSBrowser

Cliente JSnode.js

Arquitectura de Kurento


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++

Sin

k

SRC


12-13 Febrero 2015

24


12-13 Febrero 2015

25

Media Pipeline• Cadena de elementos que implementan la funcionalidad

deseada

26


12-13 Febrero 2015

27

Media pipeline

Kurento Media Server

¿Cómo implementar un espejo mágico?


12-13 Febrero 2015

28

Transmisión de media

Browser

KurentoMedia Server

Servidor Web

Java Kurento

Client

Código de aplicación Código de aplicación JSON-RPCsobre

WebSockets

Protocolo deseñalización

(AJAX)



12-13 Febrero 2015

29

Browser Servidor Web Kurento

Datos de intercambio

de media (SDP offer)Creación del pipeliney 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


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); }

}); }


12-13 Febrero 2015

31

Servidor web: Controlador Spring MVC

@RestControllerpublic 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;}

}


12-13 Febrero 2015

32

Servidor web: Creación del pipeline y negociación

// Creación del pipelineMediaPipeline 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);


12-13 Febrero 2015

33



12-13 Febrero 2015

34



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


12-13 Febrero 2015

36


12-13 Febrero 2015

37


12-13 Febrero 2015

38

Micael Gallego@micael_gallego

Gracias!!

http://www.kurento.orghttp://www.github.com/kurento

@kurentoms

http://www.kurento.org

http://www.github.com/kurento

WebRTC y Kurento en el T3cgFest 2015

Internet

pgina web

kurento legans12

misma aplicacin web

rest15 cmo

servidores de media

servidor weblos browsers

conexin directa

media webrtc13cmo