Webrtc sur.gdgdevfest.com - @dperilla
-
Upload
dperilla -
Category
Technology
-
view
539 -
download
0
description
Transcript of Webrtc sur.gdgdevfest.com - @dperilla
![Page 1: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/1.jpg)
Web 3.0: WebRTC
David Muñoz Padín @dperilla
![Page 2: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/2.jpg)
¿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
![Page 3: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/3.jpg)
· 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
![Page 4: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/4.jpg)
Fase actual: Pruebas de vueloReady to fly in 2014
WebRTC
![Page 5: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/5.jpg)
Pero.. ¿Qué es WebRTC?
![Page 6: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/6.jpg)
!
• 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
Pero.. ¿Qué es WebRTC?
![Page 7: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/7.jpg)
Navegadores soportados• Escritorio!
• Google Chrome 23
• Mozilla Firefox 22
• Opera 12
• Android!
• Google Chrome 28
• Mozilla Firefox 24
• Opera Mobile 12
• Google Chrome OS!
• Firefox OS!
• Próximamente Aplicaciones nativas
![Page 8: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/8.jpg)
Evolución de WebRTCMillones de dispositivos
0
1000
2000
3000
4000
2012 2013 2014 2015
PCs Smartphones Tablets
Fuente: Disruptive Analysis WebRTC Strategy Report. Feb 2013
![Page 9: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/9.jpg)
El camino hacia WebRTC
Fuente: jimmylee.info
![Page 10: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/10.jpg)
• 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
Algunos Datos
![Page 11: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/11.jpg)
• 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
WebRTC APIs principales
![Page 12: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/12.jpg)
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); !
![Page 18: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/18.jpg)
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); }
RTCPeerConnection
![Page 20: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/20.jpg)
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); };
RTCDataChannel
![Page 24: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/24.jpg)
WebRTC vs Voip
Fuente: ramonmillan.com
Característica Voip WebRTC
Señalización SIP y H.323 (principalmente) Sin definir
Medios RTP/RTCP RTP/RTCP
Codecs de voz Serie G.7xxx (principalmente) G.711 y Opus
Codecs de vídeo H.263, H.264 VP8
Seguridad de los medios SRTP/TLS/IPsec SRTP
![Page 25: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/25.jpg)
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
![Page 27: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/27.jpg)
Codecs soportados (A fecha de hoy)
• Audio!• Opus • G.711 • iLBC • iSAC
• Video!• VP8 • ¿H.264?
![Page 28: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/28.jpg)
Codecs War (Octubre 2013)
Patrocinadores de VP8
Patrocinadores de H.264
Ericsson Nokia
BlackBerry Qualcomm
Orange Cisco
Microsoft Apple
Fuente: webrtchacks.com
![Page 30: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/30.jpg)
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
![Page 31: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/31.jpg)
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.
![Page 32: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/32.jpg)
Sin NAT
![Page 33: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/33.jpg)
Con NAT
![Page 34: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/34.jpg)
Soluciones al NAT
• STUN
• TURN
• ICE
![Page 35: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/35.jpg)
STUN
• permite a clientes NAT encontrar su dirección IP pública!
• Económico
• Datos van por directamente P2P
![Page 36: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/36.jpg)
• permite solucionar problemas de NAT donde STUN no puede!
• Caro
• Los datos pasan por el servidor y usa su ancho de banda
TURN
![Page 37: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/37.jpg)
• 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
ICE
![Page 38: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/38.jpg)
• stun.l.google.com:19302
• WebRTC stunserver, turnserver
• rfc5766-turn-server
• restund
Desplegando STUN/TURN
![Page 39: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/39.jpg)
Seguridad en WEBRTC
![Page 40: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/40.jpg)
P2P: Uno a Uno
![Page 41: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/41.jpg)
Malla
![Page 42: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/42.jpg)
Estrella
![Page 43: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/43.jpg)
Media Server
![Page 44: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/44.jpg)
¿Podemos ver algunos ejemplos?
![Page 47: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/47.jpg)
Gracias a la
organización de GDG DevFest Sur
![Page 48: Webrtc sur.gdgdevfest.com - @dperilla](https://reader034.fdocumento.com/reader034/viewer/2022051411/546d63a5af795953298b526b/html5/thumbnails/48.jpg)
¿Preguntas?