Presentación realizada en el marco de la conferencia JSConf Octubre de 2013

1. Experiencia de uso de WebRTC en la educación
Jorge Rubiano.
@ostjh

2. Navegadores
http://www.navegadoresdeinternet.net/

3. Complementos (Plugins)
http://clubajax.org/the-history-of-ria-technologies/

4. HTML5 + CSS3 + Javascript
http://www.w3.org/html/logo/

5. Nuevas Apis - Javascript
WebAudio
Web Workers
https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html
http://www.w3.org/TR/workers/
Media Capture & Streams
http://www.w3.org/TR/2012/WD-mediacapture-streams-20120628/
http://www.freshtilledsoil.com/the-future-of-web/
Device
http://arewemobileyet.com/

6. WebRTC
http://www.webrtc.org/

7. Http/Ajax
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/

8. WebSockets Vs WebRTC

9. WebRTC
Es una solución tecnológica que resultó de un esfuerzo conjunto entre la World
Wide Web Consortium (W3C) y el Internet Engineering Task Force (IETF) por
proporcionar comunicación en tiempo real punto a punto, a través del
navegador.
WebRTC
Estandariza las tecnología desde la perspectiva
de los navegadores y tecnologías web y
definición de APIs para la utilización de
WebRTC
RTCWeb
Estandarización de protocolos y
herramientas a nivel de transporte (SRTP,
STUN/ICE/TURN) y codecs

10. WebRTC
1. Adquirir medios.
2. Comunicación Audio y
Vídeo
3. Envío y recepción de
datos arbitrarios en
conexiones punto a
punto.

11. WebRTC: Apis Javascript
1. getUserMedia
2. RTCPeerConnection
3. DataChannel
Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web

12. Pasos comunicación
Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web

13. WebRTC
En la educación
“En cinco años la mejor educación vendrá de la
Web”
Bill Gates
http://techcrunch.com/2010/08/06/bill-gates-education/

14. Detección de Movimiento.
http://www.soundstep.com/blog/experiments/jsdetection/
https://github.com/ReallyGood/js-motion-detection

15. Captura de Imágenes
http://webcamtoy.com/es/

16. Juegos
https://www.cubeslam.com/

17. Comunicación
Foros
http://www.webdesignshock.com/online-chat-tools-for-website/
Chat’s

18. Comunicación
http://chatroulette.com/
http://www.tokbox.com/blog/creating-chat-roulette-with-node-js-socket-io-and-opentok/

19. Comunicación
“El vídeo permite enriquecer la comunicación con elementos familiares como la
expresión facial, el contacto ocular y el metalenguaje o lenguaje corporal”
Castañeda, 2007
http://ocw.um.es/gat/contenidos/mpazherramientas/documentos/videoymsn.pdf

20. Comunicación - Plugins/servicios
http://www.red5.org

21. Comunicación - Plugins/servicios
http://www.adobe.com/es/products/connect/
http://www.videowhisper.com/?p=Requirements
http://bigbluebutton.org/

22. Chat Social
http://virtualnet2-0.blogspot.com/2013/05/nuevo-chat-social.html

23. Chat Social
http://virtualnet2-0.blogspot.com/2013/05/nuevo-chat-social.html

24. Chat Social
http://nodejs.org/
+
http://socket.io/
+
http://www.webrtc.org/
webRTC.io
https://github.com/webRTC/webRTC.io
+
http://www.mongodb.org/
mongodb
https://npmjs.org/package/mongodb

25. DEMO
Chat Social

26. Trabajo Colaborativo

27. Trabajo Colaborativo
Togetherjs
http://codassium.com
https://togetherjs.com/

28. Trabajo Colaborativo
+

29. Trabajo Colaborativo
https://plus.google.com/+googleplus/posts/8Qs1Cq8QLqy

30. EtherPad
Written in Scala and has quite big system requirements

31. EtherPad Lite
Etherpad plugin manager
http://etherpad.org/
http://nodejs.org/
ep_rtc
https://github.com/JohnMcLear/ep_rtc

32. Trabajo Colaborativo
http://etherpad.org/
http://nodejs.org/
http://www.mongodb.org/
http://socket.io/
http://www.webrtc.org/
http://virtualnet2-0.blogspot.com/2013/08/etherpad-trabajo-colaborativo.html

33. Trabajo Colaborativo
http://virtualnet2-0.blogspot.com/2013/08/etherpad-trabajo-colaborativo.html

34. DEMO
Trabajo Colaborativo

35. WebRTC - Peer to Peer
Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web

36. WebRTC - Mesh
Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web

37. WebRTC - Mesh
A favor.
● Infraestructura requerida es
más simple y de bajo costo.
En Contra.
● Administración de sesiones
más compleja.
● Resultados óptimos con tan
sólo 4 participantes.
● Pobre resultados en
dispositivos móviles (Los
cuales a veces en conexiones
punto a punto enfrentan
dificultades)
http://www.slideshare.net/fullscreen/vline/a-practical/1

38. WebRTC - Star
Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web

39. WebRTC - Star
A favor.
●
●
●
●
Menos carga de procesamiento y
de red en los clientes.
Mayor calidad en dispositivos de
gama baja.
Mayor cantidad de usuarios
concurrentes.
Posibilidad de grabación.
En Contra.
●
Uso de servidores extra (MCU Unidad de Control Multipunto)

40. WebRTC - MCU
http://sourceforge.net/projects/mcumediaserver/
http://lynckia.com/licode/

41. DataChannel
Permite el intercambio “peer-to-peer” de datos arbitrarios,
con baja latencia y alto rendimiento.
Aplicaciones
●
●
●
●
●
Juegos
Aplicaciones de escritorio remoto
Chat de texto en tiempo real
Transferencia de archivos
CDN (Red de entrega de contenidos)

42. DataChannel
https://www.sharefest.me/

43. DataChannel - CDN
Conjunto de servidores ubicados en diferentes puntos de una red que contienen
copias locales de ciertos contenidos (vídeos, imágenes, música, documentos,
etc.)
http://es.wikipedia.org/wiki/Red_de_entrega_de_contenidos

44. DataChannel - CDN
Se encarga de servir contenidos
estáticos (imágenes, vídeos y
descargas de archivos) usando
el ancho de banda de los
usuarios que están accediendo
a esos contenidos, junto con el
de los servidores principales
https://peercdn.com/

45. RTCPeerConnection - Signaling
https://www.gowebrtc.me/
https://code.google.com/p/sipml5/
+
strophe.jingle
https://github.com/ESTOS/strophe.jingle/
http://www.jssip.net/

46. RTCPeerConnection - Signaling
webRTC.io
https://github.com/webRTC/webRTC.io
http://simplewebrtc.com/
+
signalmaster
https://github.com/andyet/signalmaster
http://www.easyrtc.com/

47. Plataformas
http://tokbox.com/
https://vline.com/developer/
https://bistri.com/

48. WebRTC - Soporte
Adapter.js
http://caniuse.com/#search=webrtc

49. Aplicaciones
http://maxiamigos.com/
http://twelephone.com/
http://webrtchacks.com/baby-motion-detector

50. Google Hangouts HD + WebRTC
http://gigaom.com/2013/08/28/hangouts-hd-vp8-webrtc/
http://sporadicdispatches.blogspot.com/2013/05/google-hangouts-testing-webrtc-based.html

51. Fuentes
http://webrtchacks.com/
http://www.html5rocks.com/en/tutorials/webrtc/basics/
https://www.webrtc-experiment.com/
http://io13webrtc.appspot.com/#1
https://hacks.mozilla.org/category/webrtc/
http://groups.google.com/group/discuss-webrtc/topics
Google I/O 2012: http://www.youtube.com/watch?v=E8C8ouiXHHk
Google I/O 2013: http://www.youtube.com/watch?v=p2HzZkd2A40
Libro: http://www.webrtcbook.com/
Debug: chrome://webrtc-internals

52. Gracias por la atención
Jorge Rubiano
@ostjh

53. WebRTC - Seguridad
http://io13webrtc.appspot.com/
http://www.ietf.org/proceedings/82/slides/rtcweb-13.pdf

54. getUserMedia - Compartir Pantalla

55. WebRTC - Soporte
https://www.sqwiggle.com
https://github.com/rogerwang/node-webkit

56. Trabajo Colaborativo - WebRTC
Mockup Proyecto

57. WebRTC