Webrtc sur.gdgdevfest.com - @dperilla
0 recomendaciones1,253 vistas
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.
![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);
};](https://image.slidesharecdn.com/presentacionwebrtcdef-131110090858-phpapp01/85/Webrtc-sur-gdgdevfest-com-dperilla-20-320.jpg)
Webrtc sur.gdgdevfest.com - @dperilla
- 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); !
- 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
- 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
- 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
- 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?