1. Introducción a WebRTC
Javier 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
2. Índice
1. WebRTC para Jefes
1. Definición
2. Ejemplo
3. Demostración
2. WebRTC para Profesores
1. Cómo funciona?
2. Grupos de estandarización
3. Protocolos
3. WebRTC para Desarrolladores
1. Implementaciones
2. API JavaScript
3. Ejemplos
Javier Cerviño
jcervino@dit.upm.es – DIT UPM
10. Grupos de estandarización
WEBRTC:
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ño
jcervino@dit.upm.es – DIT UPM
11. PROTOCOLOS PROPIETARIOS
HTTP/WEBSOCKETS
JS/CSS/HTML JS/CSS/HTML
TRANSMISIÓN
Navegador Navegador
DE MEDIOS
Javier Cerviño
jcervino@dit.upm.es – DIT UPM
14. Pila de Protocolos
Funciones de Soporte Local • Recomendaciones
Presentación y configuración • Control del navegador
Gestión de la conexión • Negociación de transporte y contenidos
Formatos de Datos • Códecs: H.264, VP8, ..
Contenedores de Datos • RTP/RTCP con seguridad
Transporte de datos • UDP basado en ICE
Javier Cerviño
jcervino@dit.upm.es – DIT UPM
17. 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ño
jcervino@dit.upm.es – DIT UPM
18. Desarrollo
Primera 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ño
jcervino@dit.upm.es – DIT UPM
19. Arquitectura
Javier Cerviño
jcervino@dit.upm.es – DIT UPM
20. WebRTC W3C: JavaScript API
Obtener flujos multimedia locales
Guardar localmente
Conectarse a pares remotos
Enviar flujos
Representar Flujos
Mandar datos arbitrarios
Javier Cerviño
jcervino@dit.upm.es – DIT UPM
21. JavaScript API
Estado Actual
Tres Grandes APIs
getUserMedia
Obtención de flujos locales
StreamAPI
Manejo de flujos multimedia
PeerConnection
Conexiones entre pares
Javier Cerviño
jcervino@dit.upm.es – DIT UPM
22. 1. getUserMedia() 5. getUserMedia()
2. pc = new PeerConnection() 6. pc = new PeerConnection()
3. onLocalSignallingMessage(sdpOffer) 7. pc.processSignalingMessage(sdpOffer)
8. onLocalSignallingMessage(sdpAnswer)
10. pc.processSignalingMessage(sdpAnswer) 13. pc.processSignalingMessage(sdpOk)
11. onLocalSignallingMessage(sdpOk)
14
Alice Bob
Javier Cerviño
jcervino@dit.upm.es – DIT UPM
23. Acceso a webcam y micrófono
navigator.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ño
jcervino@dit.upm.es – DIT UPM
24. Inicialización PeerConnection I
function 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ño
jcervino@dit.upm.es – DIT UPM
25. Inicialización PeerConnection II
function onLocalSignalingMessage(sdp) {
send(sdp);
}
function receiveSignallingMessage(sdp) {
pc.processSignalingMessage(sdp);
}
Javier Cerviño
jcervino@dit.upm.es – DIT UPM
26. El que llama
function doCall() {
createPeerConnection();
}
Javier Cerviño
jcervino@dit.upm.es – DIT UPM
27. El que contesta
function onCall(sdp) {
createPeerConnection();
pc.processSignalingMessage(sdp);
}
Javier Cerviño
jcervino@dit.upm.es – DIT UPM
28. Conexión WebRTC
El que llama El que contesta
createPeerConnection();
send(sdpOffer); OFFER
createPeerConnection();
pc.processSignalingMessage(sdpOffer);
ANSWER
send(sdpAnswer);
pc.processSignalingMessage(sdpAnswer);
send(sdpOk); OK
pc.processSignalingMessage(sdpOk);
onAddStream(); onAddStream();
Javier Cerviño
jcervino@dit.upm.es – DIT UPM
29. Finalización
function closeCall() {
document.getElementById("remoteView").src = “”;
pc.close();
}
Javier Cerviño
jcervino@dit.upm.es – DIT UPM
30. DEMOS
Javier Cerviño
jcervino@dit.upm.es – DIT UPM
31. WebRTC DEMO
Javier Cerviño
jcervino@dit.upm.es – DIT UPM
