Este documento presenta WebRTC, una nueva tecnología web para comunicación en tiempo real que ha sido implementada en la plataforma educativa VirtualNet 2.0 de la Universidad Manuela Beltrán. WebRTC permite compartir audio, video y datos entre navegadores sin necesidad de plugins a través de APIs Javascript. Se describen aplicaciones como un chat social basado en WebSockets y MongoDB, y herramientas de trabajo colaborativo como EtherPad que usan WebRTC.

1. Universidad Manuela Beltrán - UMB Virtual (Col)
“WebRTC - Una nueva tecnología web al servicio de
la educación. Caso en VirtualNet 2.0”
TICAL 2014
Jorge Rubiano.
Andrés Mena.
Juan Hernández

2. Agenda
● UMB Virtual.
● VirtualNet 2.0
● Contextualización tecnológica.
● Acerca de WebRTC
○ ¿Qué es?
○ ¿Cómo funciona?
○ Apis Javascript - WebRTC
○ Ejemplos de Uso.
● Chat Social
○ Tecnologías
■ WebSockets.
■ NOSql
● Trabajo Colaborativo
● Soporte WebRTC
● Conclusiones.

3. UMB Virtual

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

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

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

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

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

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

11. WebSockets Vs WebRTC

12. 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 RTCWeb
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
Estandarización de protocolos y
herramientas a nivel de transporte (SRTP,
STUN/ICE/TURN) y codecs

13. 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.

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

15. getUserMedia
http://io13webrtc.appspot.com/#17

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

17. RTCPeerConnection - Pasos
comunicación
Señalización: Mecanismo
por el cual los pares se
envían mensajes de
control entre sí con el
propósito de establecer el
protocolo, canal, y
método de comunicación
Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web

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

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

20. 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

21. Comunicación - Plugins/servicios
http://www.red5.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/
+
webRTC.io
https://github.com/webRTC/webRTC.io
http://www.webrtc.org/
+
http://www.mongodb.org/
mongodb https://npmjs.org/package/mongodb
+

25. DEMO
Chat Social

26. Trabajo Colaborativo

27. Trabajo Colaborativo
+

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

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

30. 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

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

32. DEMO
Trabajo Colaborativo

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

34. Plataformas
https://vline.com/developer/
http://www.snapchat.com/
http://bloggeek.me/snapchat-acquires-addlive/

35. Plataformas
http://tokbox.com/
https://www.tuenti.com
http://disruptivewireless.blogspot.com/2014/03/tuenti-telefonica-and-zero-rated-mobile.html

36. Plataformas
http://bloggeek.me/whatsapp-voice-calling-webrtc/

37. 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

38. Conclusiones
● Se ha evidenciado que gracias al cambio de de tecnología de
técnicas como long polling a un entorno de WebSockets, libera de
peticiones innecesarias al sistema.
● En la experiencia docente encontramos que el Chat de la
plataforma VirtualNet 2.0. Potencia una de las capacidades
humanas de mayor relevancia adaptativa: la resiliencia, entendida
como la capacidad mental de respuesta del ser humano a
situaciones adversas. De forma tal que la construcción del
conocimiento de forma autónoma, así como en sí misma la
autonomía puede desarrollarse enormemente a través de la
virtualidad, habilitada por la tecnología digital y las redes sociales,
que se establecen en el chat (Castañeda, 2010).

39. 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

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