Your SlideShare is downloading. ×
Webrtc sur.gdgdevfest.com - @dperilla
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Webrtc sur.gdgdevfest.com - @dperilla

570
views

Published on

Presentación sobre WebRTC en el Google Developer Fest Sur celebrado en Córdoba (España) el 31 de Octubre de 2013.

Presentación sobre WebRTC en el Google Developer Fest Sur celebrado en Córdoba (España) el 31 de Octubre de 2013.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
570
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web 3.0: WebRTC David Muñoz Padín @dperilla
  • 2. ¿Quién soy? • David Muñoz - CEO Quaip - @dperilla • VoipEngineer con Asterisk / Kamailio desde 2003 • SysAdmin Linux desde 1999 • Formador online de Asterisk, Virtualización y Linux desde 2007 • Coworker en @Cosfera desde Mayo de 2013
  • 3. · Desarrollo e infraestructuras avanzadas de Voip ! · Sistemas avanzados de E-learning ! · Servidores de streaming de radio y TV
 · Web Hosting Avanzado, VPS y Servidores Dedicados! 
 · Housing ! · Clientes en USA, UK, Venezuela y España
  • 4. WebRTC Fase actual: Pruebas de vuelo Ready to fly in 2014
  • 5. Pero.. ¿Qué es WebRTC?
  • 6. Pero.. ¿Qué es WebRTC? ! • Comunicación directa entre navegadores web • Comunicaciones en tiempo real • Sencillas APIS Javascript! • Especificación de HTML5! • Proyecto Libre y Abierto, liberado por Google.! • Skype en la web
  • 7. Navegadores soportados • Escritorio! • • Mozilla Firefox 22 • • Google Chrome 23 Opera 12 Android! • Google Chrome 28 • Mozilla Firefox 24 • Opera Mobile 12 • Google Chrome OS! • Firefox OS! • Próximamente Aplicaciones nativas
  • 8. Evolución de WebRTC PCs Smartphones Tablets Millones de dispositivos 4000 3000 2000 1000 0 2012 2013 2014 Fuente: Disruptive Analysis WebRTC Strategy Report. Feb 2013 2015
  • 9. El camino hacia WebRTC Fuente: jimmylee.info
  • 10. Algunos Datos • API desarrollada por: • W3C (APIS para aplicaciones web) • IETF (Protocolos y formatos) • Plugin Free. #noflashplayer #nosilverlight ! • Soportado por Google, Mozilla y Opera • Protocolo en estado de arte
  • 11. WebRTC APIs principales • MediaStream (getUserMedia) ! • Permite a un navegador web acceder a la cámara y el micrófono! ! • RTCPeerConnection! • Establece la comunicación de audio / vídeo! ! • RTCDataChannel! • Permite a los navegadores compartir datos a través de P2P
  • 12. getUserMedia ! ! var constraints = {video: true}; ! function successCallback(localMediaStream) { var video = document.querySelector("video"); video.src = window.URL.createObjectURL(localMediaStream); } ! function errorCallback(error){ console.log("navigator.getUserMedia error: ", error); } ! navigator.getUserMedia(constraints, successCallback, errorCallback); !
  • 13. https://simpl.info/getusermedia/
  • 14. http://idevelop.ro/ascii-camera/
  • 15. http://shinydemos.com/facekat/
  • 16. www.webcamtoy.com
  • 17. Compartir Escritorio
  • 18. RTCPeerConnection pc = new RTCPeerConnection(null); pc.onaddstream = gotRemoteStream; pc.addStream(localStream); pc.createOffer(gotOffer); ! function gotOffer(desc) { pc.setLocalDescription(desc); sendOffer(desc); } ! function gotAnswer(desc) { pc.setRemoteDescription(desc); } ! function gotRemoteStream(e) { attachMediaStream(remoteVideo, e.stream); }
  • 19. simpl.info/pc
  • 20. RTCDataChannel var pc = new webkitRTCPeerConnection(servers, {optional: [{RtpDataChannels: true}]}); ! pc.ondatachannel = function(event) { receiveChannel = event.channel; receiveChannel.onmessage = function(event){ document.querySelector("div#receive").innerHTML = event.data; }; }; ! sendChannel = pc.createDataChannel("sendDataChannel", {reliable: false}); ! document.querySelector("button#send").onclick = function (){ var data = document.querySelector("textarea#send").value; sendChannel.send(data); };
  • 21. simpl.info/dc
  • 22. sharefest.me
  • 23. Arquitectura WebRTC Fuente: ramonmillan.com
  • 24. WebRTC vs Voip Característica Voip WebRTC Señalización SIP y H.323 (principalmente) Sin definir Medios RTP/RTCP RTP/RTCP Codecs de voz G.711 y Opus Codecs de vídeo Serie G.7xxx (principalmente) H.263, H.264 Seguridad de los medios SRTP/TLS/IPsec SRTP Fuente: ramonmillan.com VP8
  • 25. SIP over WebRTC • Draft IETF: websockets draft-ietf-sipcore-sip-websockets. (Iñaki Baz, J.L. Millán, …) ! • Señalización SIP enviada vía websockets ! • Ejemplos de Uso: JSSIP, SIPML5
  • 26. sipml5.org
  • 27. Codecs soportados (A fecha de hoy) • Audio! • • G.711 • iLBC • • Opus iSAC Video! • VP8 • ¿H.264?
  • 28. Codecs War (Octubre 2013) Patrocinadores de VP8 Patrocinadores de H.264 Google Ericsson Nokia BlackBerry Qualcomm Orange Cisco Microsoft Apple Fuente: webrtchacks.com
  • 29. Opus: el codec definitivo Fuente: opus-codec.org
  • 30. Opus Codec • Codec abierto y libre • Desarrollado por IETF • Bit-rates desde 6 kb/s a 510 kb/s • Frecuencias de muestreo desde 8 kHz (narrowband) a 48 kHz (fullband) • Soporta bit-rate constante (CBR) y bit-rate variable (VBR) • Basado en ILK de Skype y CELT de xiph.org
  • 31. VP8 • Codec Abierto liberado por Google • Parte de WebM: junto con el codec de audio Vorbis y dentro de un contenedor Matroska. • High Quality • Optimizado para Real Time • Usado por Google Hangouts HD! • Soportado en Firefox, Chrome y Opera.
  • 32. Sin NAT
  • 33. Con NAT
  • 34. Soluciones al NAT • STUN • TURN • ICE
  • 35. STUN • permite a clientes NAT encontrar su dirección IP pública! • Económico • Datos van por directamente P2P
  • 36. TURN • permite solucionar problemas de NAT donde STUN no puede! • Caro • Los datos pasan por el servidor y usa su ancho de banda
  • 37. ICE • Un framework para buscar la mejor solución • Si puede usará STUN, si no puede TURN • La mayoría de las llamadas irán por STUN
  • 38. Desplegando STUN/TURN • stun.l.google.com:19302 • WebRTC stunserver, turnserver • rfc5766-turn-server • restund
  • 39. Seguridad en WEBRTC
  • 40. P2P: Uno a Uno
  • 41. Malla
  • 42. Estrella
  • 43. Media Server
  • 44. ¿Podemos ver algunos ejemplos?
  • 45. talky.io/quaip
  • 46. twelephone.com
  • 47. Gracias a la organización de GDG DevFest Sur
  • 48. ¿Preguntas?