Successfully reported this slideshow.

WebRTC

2,241 views

Published on

  • Be the first to comment

WebRTC

  1. 1. Introducción a WebRTCJavier Cerviño Arriba jcervino@dit.upm.es @jcagueGrupo de Internet de Nueva GeneraciónDepartamento de Ingeniería de Sistemas TelemáticosUniversidad Politécnica de Madrid
  2. 2. Índice1. WebRTC para Jefes 1. Definición 2. Ejemplo 3. Demostración2. WebRTC para Profesores 1. Cómo funciona? 2. Grupos de estandarización 3. Protocolos3. WebRTC para Desarrolladores 1. Implementaciones 2. API JavaScript 3. Ejemplos Javier Cerviño jcervino@dit.upm.es – DIT UPM
  3. 3. WebRTC para Jefes
  4. 4. Javier Cerviñojcervino@dit.upm.es – DIT UPM
  5. 5. Videoconferencia en el navegador Javier Cerviño jcervino@dit.upm.es – DIT UPM
  6. 6. Videoconferencia en el navegador Javier Cerviño jcervino@dit.upm.es – DIT UPM
  7. 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. 8. Coste diario140012001000800600400200 0 Google App Engine WebRTC Javier Cerviño jcervino@dit.upm.es – DIT UPM
  9. 9. WebRTC para Profesores
  10. 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. 11. PROTOCOLOS PROPIETARIOS HTTP/WEBSOCKETSJS/CSS/HTML JS/CSS/HTML TRANSMISIÓN Navegador Navegador DE MEDIOS Javier Cerviño jcervino@dit.upm.es – DIT UPM
  12. 12. Panorámica: detalle Javier Cerviño jcervino@dit.upm.es – DIT UPM
  13. 13. Panorámica: detalle Javier Cerviño jcervino@dit.upm.es – DIT UPM
  14. 14. Pila de ProtocolosFunciones de Soporte Local • RecomendacionesPresentació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
  15. 15. WebRTC para Desarrolladores
  16. 16. Implementaciones: Ericsson Javier Cerviño jcervino@dit.upm.es – DIT UPM
  17. 17. ImplementacionesProyecto 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. 18. 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ño jcervino@dit.upm.es – DIT UPM
  19. 19. Arquitectura Javier Cerviño jcervino@dit.upm.es – DIT UPM
  20. 20. WebRTC W3C: JavaScript APIObtener flujos multimedia localesGuardar localmenteConectarse a pares remotosEnviar flujosRepresentar FlujosMandar datos arbitrarios Javier Cerviño jcervino@dit.upm.es – DIT UPM
  21. 21. JavaScript API Estado ActualTres 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. 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. 23. 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ño jcervino@dit.upm.es – DIT UPM
  24. 24. 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ño jcervino@dit.upm.es – DIT UPM
  25. 25. Inicialización PeerConnection IIfunction onLocalSignalingMessage(sdp) { send(sdp);}function receiveSignallingMessage(sdp) { pc.processSignalingMessage(sdp);} Javier Cerviño jcervino@dit.upm.es – DIT UPM
  26. 26. El que llamafunction doCall() { createPeerConnection();} Javier Cerviño jcervino@dit.upm.es – DIT UPM
  27. 27. El que contestafunction onCall(sdp) { createPeerConnection(); pc.processSignalingMessage(sdp);} Javier Cerviño jcervino@dit.upm.es – DIT UPM
  28. 28. Conexión WebRTC El que llama El que contestacreatePeerConnection();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. 29. Finalizaciónfunction closeCall() { document.getElementById("remoteView").src = “”; pc.close();} Javier Cerviño jcervino@dit.upm.es – DIT UPM
  30. 30. DEMOS Javier Cerviño jcervino@dit.upm.es – DIT UPM
  31. 31. WebRTC DEMO Javier Cerviño jcervino@dit.upm.es – DIT UPM
  32. 32. Javier Cerviñojcervino@dit.upm.es – DIT UPM
  33. 33. GRACIAS Javier Cerviño jcervino@dit.upm.es – DIT UPM

×