Introducción a WebRTCJavier Cerviño Arriba

jcervino@dit.upm.es

@jcague

Grupo de Internet de Nueva Generación

Departamento de Ingeniería de Sistemas Telemáticos

Universidad Politécnica de Madrid

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Índice1. WebRTC para Jefes

1. Definición2. Ejemplo3. Demostración

2. WebRTC para Profesores

1. Cómo funciona?2. Grupos de estandarización3. Protocolos

3. WebRTC para Desarrolladores

1. Implementaciones2. API JavaScript3. Ejemplos

WebRTC para Jefes

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Videoconferencia en el navegador

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Videoconferencia en el navegador

Javier Cerviñojcervino@dit.upm.es – DIT UPM

~30000 usuarios en Steamhttp://store.steampowered.com/stats/

~15 MB por usuario por hora

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Google App Engine WebRTC0

200

400

600

800

1000

1200

1400

Coste diario

WebRTC para Profesores

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Grupos de estandarizaciónWEBRTC:

API para crear aplicaciones de tiempo real

http://dev.w3.org/2011/webrtc/editor/webrtc.html

RTCWEB: Protocolos que harán posible la

comunicación entre los participantes. http://trac.tools.ietf.org/wg/rtcweb/

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Navegador

JS/CSS/HTML

Navegador

JS/CSS/HTML

PROTOCOLOS PROPIETARIOSHTTP/WEBSOCKETS

TRANSMISIÓN

DE MEDIOS

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Panorámica: detalle

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Panorámica: detalle

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Pila de Protocolos• RecomendacionesFunciones de Soporte Local

• Control del navegadorPresentación y configuración

• Negociación de transporte y contenidosGestión de la conexión

• Códecs: H.264, VP8, ..Formatos de Datos

• RTP/RTCP con seguridadContenedores de Datos

• UDP basado en ICETransporte de datos

WebRTC para Desarrolladores

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Implementaciones: Ericsson

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Implementaciones

Proyecto de código libre escrito en C++

Respaldado por Google, Mozilla y Opera entre otros.

Implementación de todo WebRTC+rtcweb (W3C+IETF)

Javier Cerviñojcervino@dit.upm.es – DIT UPM

DesarrolloPrimera Fase• Librería en C++ implementando rtcweb

Segunda Fase• Inclusión de la librería en navegadores

• Implica implementación del API JavaScript

Actualmente:• Primera versión disponible: iteraciones y pruebas

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Arquitectura

Javier Cerviñojcervino@dit.upm.es – DIT UPM

WebRTC W3C: JavaScript API

Obtener flujos multimedia localesGuardar localmenteConectarse a pares remotosEnviar flujosRepresentar FlujosMandar datos arbitrarios

Javier Cerviñojcervino@dit.upm.es – DIT UPM

JavaScript APIEstado Actual

Tres Grandes APIsgetUserMedia

Obtención de flujos locales

StreamAPIManejo de flujos multimedia

PeerConnectionConexiones entre pares

Javier Cerviñojcervino@dit.upm.es – DIT UPM

4

49

912

12

14

Alice Bob

1. getUserMedia()2. pc = new PeerConnection()3. onLocalSignallingMessage(sdpOffer)

5. getUserMedia()6. pc = new PeerConnection()7. pc.processSignalingMessage(sdpOffer)8. onLocalSignallingMessage(sdpAnswer)

10. pc.processSignalingMessage(sdpAnswer)11. onLocalSignallingMessage(sdpOk)

13. pc.processSignalingMessage(sdpOk)

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Acceso a webcam y micrófononavigator.webkitGetUserMedia("video,audio", gotStream, gotStreamFailed);

function gotStream(stream) {var url = webkitURL.createObjectURL(stream);document.getElementById("localView").src = url;trace("User has granted access to local media.”);localStream = stream;

}

function gotStreamFailed(error) {alert("Failed to get access to local media.”);

}

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Inicialización PeerConnection Ifunction createPeerConnection() {

pc = new webkitPeerConnection("STUN stun.l.google.com:19302", onLocalSignalingMessage);

pc.onaddstream = onAddStream;

pc.onremovestream = onRemoveStream;

pc.addStream(localStream);

}

function onAddStream(e) {

var url = webkitURL.createObjectURL(e.stream);

document.getElementById("remoteView").src = url;

}

function onRemoveStream(e) {

document.getElementById("remoteView").src = "”;

}

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Inicialización PeerConnection II

function onLocalSignalingMessage(sdp) {

send(sdp);

}

function receiveSignallingMessage(sdp) {

pc.processSignalingMessage(sdp);

}

Javier Cerviñojcervino@dit.upm.es – DIT UPM

El que llama

function doCall() {

createPeerConnection();

}

Javier Cerviñojcervino@dit.upm.es – DIT UPM

El que contesta

function onCall(sdp) {

createPeerConnection();

pc.processSignalingMessage(sdp);

}

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Conexión WebRTCEl que llama

createPeerConnection();

send(sdpOffer);

pc.processSignalingMessage(sdpAnswer);

send(sdpOk);

onAddStream();

El que contesta

createPeerConnection();

pc.processSignalingMessage(sdpOffer);

send(sdpAnswer);

pc.processSignalingMessage(sdpOk);

onAddStream();

OFFER

ANSWER

OK

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Finalización

function closeCall() {

document.getElementById("remoteView").src = “”;

pc.close();

}

Javier Cerviñojcervino@dit.upm.es – DIT UPM

DEMOS

Javier Cerviñojcervino@dit.upm.es – DIT UPM

WebRTC DEMO

Javier Cerviñojcervino@dit.upm.es – DIT UPM

Javier Cerviñojcervino@dit.upm.es – DIT UPM

GRACIAS