WebRTC
- 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
- 4. Javier Cerviño jcervino@dit.upm.es – DIT UPM
- 5. Videoconferencia en el navegador Javier Cerviño jcervino@dit.upm.es – DIT UPM
- 6. Videoconferencia en el navegador Javier Cerviño jcervino@dit.upm.es – DIT UPM
- 7. ~30000 usuarios en Steam http://store.steampowered.com/stats/ ~15 MB por usuario por hora Javier Cerviño jcervino@dit.upm.es – DIT UPM
- 8. Coste diario 1400 1200 1000 800 600 400 200 0 Google App Engine WebRTC 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
- 12. Panorámica: detalle Javier Cerviño jcervino@dit.upm.es – DIT UPM
- 13. Panorámica: detalle 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
- 16. Implementaciones: Ericsson 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
- 32. Javier Cerviño jcervino@dit.upm.es – DIT UPM
- 33. GRACIAS Javier Cerviño jcervino@dit.upm.es – DIT UPM