El documento presenta una introducción a WebRTC, una tecnología que permite la comunicación directa en tiempo real entre navegadores web mediante APIs JavaScript. Se discuten sus componentes principales, como MediaStream y RTCDataChannel, y se describen características y ventajas respecto a VoIP, incluyendo la incorporación de codecs como Opus y VP8. También se abordan aspectos de compatibilidad, seguridad y desafíos relacionados con la señalización y NAT.

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?