webrtc sur.gdgdevfest.com - @dperilla

48
Web 3.0: WebRTC David Muñoz Padín @dperilla

Upload: dperilla

Post on 18-Nov-2014

535 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Webrtc sur.gdgdevfest.com - @dperilla

Web 3.0: WebRTC

David Muñoz Padín @dperilla

Page 2: Webrtc sur.gdgdevfest.com - @dperilla

¿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

· 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

Fase actual: Pruebas de vueloReady to fly in 2014

WebRTC

Page 5: Webrtc sur.gdgdevfest.com - @dperilla

Pero.. ¿Qué es WebRTC?

Page 6: Webrtc sur.gdgdevfest.com - @dperilla

!

• 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

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

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

El camino hacia WebRTC

Fuente: jimmylee.info

Page 10: Webrtc sur.gdgdevfest.com - @dperilla

• 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

• 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

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 13: Webrtc sur.gdgdevfest.com - @dperilla

https://simpl.info/getusermedia/

Page 14: Webrtc sur.gdgdevfest.com - @dperilla

http://idevelop.ro/ascii-camera/

Page 15: Webrtc sur.gdgdevfest.com - @dperilla

http://shinydemos.com/facekat/

Page 16: Webrtc sur.gdgdevfest.com - @dperilla

www.webcamtoy.com

Page 18: Webrtc sur.gdgdevfest.com - @dperilla

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 19: Webrtc sur.gdgdevfest.com - @dperilla

simpl.info/pc

Page 20: Webrtc sur.gdgdevfest.com - @dperilla

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 21: Webrtc sur.gdgdevfest.com - @dperilla

simpl.info/dc

Page 22: Webrtc sur.gdgdevfest.com - @dperilla

sharefest.me

Page 23: Webrtc sur.gdgdevfest.com - @dperilla

Arquitectura WebRTC

Fuente: ramonmillan.com

Page 24: Webrtc sur.gdgdevfest.com - @dperilla

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

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 26: Webrtc sur.gdgdevfest.com - @dperilla

sipml5.org

Page 27: Webrtc sur.gdgdevfest.com - @dperilla

Codecs soportados (A fecha de hoy)

• Audio!• Opus • G.711 • iLBC • iSAC

• Video!• VP8 • ¿H.264?

Page 28: Webrtc sur.gdgdevfest.com - @dperilla

Codecs War (Octubre 2013)

Patrocinadores de VP8

Patrocinadores de H.264

Google

Ericsson Nokia

BlackBerry Qualcomm

Orange Cisco

Microsoft Apple

Fuente: webrtchacks.com

Page 29: Webrtc sur.gdgdevfest.com - @dperilla

Opus: el codec definitivo

Fuente: opus-codec.org

Page 30: Webrtc sur.gdgdevfest.com - @dperilla

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

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

Sin NAT

Page 33: Webrtc sur.gdgdevfest.com - @dperilla

Con NAT

Page 34: Webrtc sur.gdgdevfest.com - @dperilla

Soluciones al NAT

• STUN

• TURN

• ICE

Page 35: Webrtc sur.gdgdevfest.com - @dperilla

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

• 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

• 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

• stun.l.google.com:19302

• WebRTC stunserver, turnserver

• rfc5766-turn-server

• restund

Desplegando STUN/TURN

Page 39: Webrtc sur.gdgdevfest.com - @dperilla

Seguridad en WEBRTC

Page 40: Webrtc sur.gdgdevfest.com - @dperilla

P2P: Uno a Uno

Page 41: Webrtc sur.gdgdevfest.com - @dperilla

Malla

Page 42: Webrtc sur.gdgdevfest.com - @dperilla

Estrella

Page 43: Webrtc sur.gdgdevfest.com - @dperilla

Media Server

Page 44: Webrtc sur.gdgdevfest.com - @dperilla

¿Podemos ver algunos ejemplos?

Page 45: Webrtc sur.gdgdevfest.com - @dperilla

talky.io/quaip

Page 46: Webrtc sur.gdgdevfest.com - @dperilla

twelephone.com

Page 47: Webrtc sur.gdgdevfest.com - @dperilla

Gracias a la

organización de GDG DevFest Sur

Page 48: Webrtc sur.gdgdevfest.com - @dperilla

¿Preguntas?