webrtc sur.gdgdevfest.com - @dperilla

Web 3.0: WebRTC

David Muñoz Padín @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

· 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

Fase actual: Pruebas de vueloReady to fly in 2014

WebRTC

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

Pero.. ¿Qué es WebRTC?

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

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

El camino hacia WebRTC

Fuente: jimmylee.info

• 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

• 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

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); !

https://simpl.info/getusermedia/

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

http://shinydemos.com/facekat/

www.webcamtoy.com

Compartir Escritorio

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

simpl.info/pc

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

simpl.info/dc

sharefest.me

Arquitectura WebRTC

Fuente: ramonmillan.com

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

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

sipml5.org

Codecs soportados (A fecha de hoy)

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

• Video!• VP8 • ¿H.264?

Codecs War (Octubre 2013)

Patrocinadores de VP8

Patrocinadores de H.264

Google

Ericsson Nokia

BlackBerry Qualcomm

Orange Cisco

Microsoft Apple

Fuente: webrtchacks.com

Opus: el codec definitivo

Fuente: opus-codec.org

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

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.

Sin NAT

Con NAT

Soluciones al NAT

• STUN

• TURN

• ICE

STUN

• permite a clientes NAT encontrar su dirección IP pública!

• Económico

• Datos van por directamente P2P

• permite solucionar problemas de NAT donde STUN no puede!

• Caro

• Los datos pasan por el servidor y usa su ancho de banda

TURN

• 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

• stun.l.google.com:19302

• WebRTC stunserver, turnserver

• rfc5766-turn-server

• restund

Desplegando STUN/TURN

Seguridad en WEBRTC

P2P: Uno a Uno

Malla

Estrella

Media Server

¿Podemos ver algunos ejemplos?

talky.io/quaip

twelephone.com

Gracias a la

organización de GDG DevFest Sur

¿Preguntas?