Universidad Manuela Beltrán - UMB Virtual (Col) 
“WebRTC - Una nueva tecnología web al servicio de 
la educación. Caso en ...
Agenda 
● UMB Virtual. 
● VirtualNet 2.0 
● Contextualización tecnológica. 
● Acerca de WebRTC 
○ ¿Qué es? 
○ ¿Cómo funcio...
UMB Virtual
Navegadores 
http://www.navegadoresdeinternet.net/
Complementos (Plugins) 
http://clubajax.org/the-history-of-ria-technologies/
HTML5 + CSS3 + Javascript 
http://www.w3.org/html/logo/
Nuevas Apis - Javascript 
WebAudio 
https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html 
Media Capture &...
WebRTC 
http://www.webrtc.org/
Http/Ajax 
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/
WebSockets Vs WebRTC
WebRTC 
Es una solución tecnológica que resultó de un esfuerzo conjunto entre la World 
Wide Web Consortium (W3C) y el Int...
WebRTC 
1. Adquirir medios. 
2. Comunicación Audio y 
Vídeo 
3. Envío y recepción de 
datos arbitrarios en 
conexiones pun...
WebRTC: Apis Javascript 
1. getUserMedia 
2. RTCPeerConnection 
3. DataChannel 
Libro WebRTC: APIs and RTCWEB Protocols of...
getUserMedia 
http://io13webrtc.appspot.com/#17
Detección de Movimiento. 
http://www.soundstep.com/blog/experiments/jsdetection/ 
https://github.com/ReallyGood/js-motion-...
RTCPeerConnection - Pasos 
comunicación 
Señalización: Mecanismo 
por el cual los pares se 
envían mensajes de 
control en...
RTCPeerConnection - Signaling 
https://code.google.com/p/sipml5/ 
http://www.jssip.net/ 
https://www.gowebrtc.me/ 
+ 
stro...
RTCPeerConnection - Signaling 
webRTC.io https://github.com/webRTC/webRTC.io 
http://simplewebrtc.com/ + signalmaster 
htt...
Comunicación 
“El vídeo permite enriquecer la comunicación con elementos familiares como la 
expresión facial, el contacto...
Comunicación - Plugins/servicios 
http://www.red5.org
Chat Social 
http://virtualnet2-0.blogspot.com/2013/05/nuevo-chat-social.html
Chat Social 
http://virtualnet2-0.blogspot.com/2013/05/nuevo-chat-social.html
Chat Social 
http://nodejs.org/ 
http://socket.io/ 
+ 
webRTC.io 
https://github.com/webRTC/webRTC.io 
http://www.webrtc.o...
DEMO 
Chat Social
Trabajo Colaborativo
Trabajo Colaborativo 
+
Trabajo Colaborativo 
https://plus.google.com/+googleplus/posts/8Qs1Cq8QLqy
EtherPad Lite 
http://etherpad.org/ 
http://nodejs.org/ 
Etherpad plugin manager 
ep_rtc 
https://github.com/JohnMcLear/ep...
Trabajo Colaborativo 
http://etherpad.org/ 
http://nodejs.org/ 
http://www.mongodb.org/ 
http://socket.io/ 
http://www.web...
Trabajo Colaborativo 
http://virtualnet2-0.blogspot.com/2013/08/etherpad-trabajo-colaborativo.html
DEMO 
Trabajo Colaborativo
WebRTC - Soporte 
Adapter.js 
http://caniuse.com/#search=webrtc
Plataformas 
https://vline.com/developer/ 
http://www.snapchat.com/ 
http://bloggeek.me/snapchat-acquires-addlive/
Plataformas 
http://tokbox.com/ 
https://www.tuenti.com 
http://disruptivewireless.blogspot.com/2014/03/tuenti-telefonica-...
Plataformas 
http://bloggeek.me/whatsapp-voice-calling-webrtc/
Google Hangouts HD + WebRTC 
http://gigaom.com/2013/08/28/hangouts-hd-vp8-webrtc/ 
http://sporadicdispatches.blogspot.com/...
Conclusiones 
● Se ha evidenciado que gracias al cambio de de tecnología de 
técnicas como long polling a un entorno de We...
Fuentes 
http://webrtchacks.com/ 
http://www.html5rocks.com/en/tutorials/webrtc/basics/ 
https://www.webrtc-experiment.com...
Gracias por la atención 
Jorge Rubiano 
@ostjh
WebRTC - Una nueva tecnología web al servicio de la educación. Caso en VirtualNet 2.0
Próxima SlideShare
Cargando en…5
×

WebRTC - Una nueva tecnología web al servicio de la educación. Caso en VirtualNet 2.0

514 visualizaciones

Publicado el

Ponencia realizada en el marco del congreso TICAL 2014 Cancún México.

http://tical2014.redclara.net/en/index.html

Publicado en: Educación
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
514
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
6
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

WebRTC - Una nueva tecnología web al servicio de la educación. Caso en VirtualNet 2.0

  1. 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. 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. 3. UMB Virtual
  4. 4. Navegadores http://www.navegadoresdeinternet.net/
  5. 5. Complementos (Plugins) http://clubajax.org/the-history-of-ria-technologies/
  6. 6. HTML5 + CSS3 + Javascript http://www.w3.org/html/logo/
  7. 7. 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/
  8. 8. WebRTC http://www.webrtc.org/
  9. 9. Http/Ajax http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/
  10. 10. WebSockets Vs WebRTC
  11. 11. 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
  12. 12. 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.
  13. 13. WebRTC: Apis Javascript 1. getUserMedia 2. RTCPeerConnection 3. DataChannel Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web
  14. 14. getUserMedia http://io13webrtc.appspot.com/#17
  15. 15. Detección de Movimiento. http://www.soundstep.com/blog/experiments/jsdetection/ https://github.com/ReallyGood/js-motion-detection
  16. 16. 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
  17. 17. RTCPeerConnection - Signaling https://code.google.com/p/sipml5/ http://www.jssip.net/ https://www.gowebrtc.me/ + strophe.jingle https://github.com/ESTOS/strophe.jingle/
  18. 18. RTCPeerConnection - Signaling webRTC.io https://github.com/webRTC/webRTC.io http://simplewebrtc.com/ + signalmaster https://github.com/andyet/signalmaster http://www.easyrtc.com/
  19. 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. 20. Comunicación - Plugins/servicios http://www.red5.org
  21. 21. Chat Social http://virtualnet2-0.blogspot.com/2013/05/nuevo-chat-social.html
  22. 22. Chat Social http://virtualnet2-0.blogspot.com/2013/05/nuevo-chat-social.html
  23. 23. 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 +
  24. 24. DEMO Chat Social
  25. 25. Trabajo Colaborativo
  26. 26. Trabajo Colaborativo +
  27. 27. Trabajo Colaborativo https://plus.google.com/+googleplus/posts/8Qs1Cq8QLqy
  28. 28. EtherPad Lite http://etherpad.org/ http://nodejs.org/ Etherpad plugin manager ep_rtc https://github.com/JohnMcLear/ep_rtc
  29. 29. 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
  30. 30. Trabajo Colaborativo http://virtualnet2-0.blogspot.com/2013/08/etherpad-trabajo-colaborativo.html
  31. 31. DEMO Trabajo Colaborativo
  32. 32. WebRTC - Soporte Adapter.js http://caniuse.com/#search=webrtc
  33. 33. Plataformas https://vline.com/developer/ http://www.snapchat.com/ http://bloggeek.me/snapchat-acquires-addlive/
  34. 34. Plataformas http://tokbox.com/ https://www.tuenti.com http://disruptivewireless.blogspot.com/2014/03/tuenti-telefonica-and-zero-rated-mobile.html
  35. 35. Plataformas http://bloggeek.me/whatsapp-voice-calling-webrtc/
  36. 36. 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
  37. 37. 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).
  38. 38. 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
  39. 39. Gracias por la atención Jorge Rubiano @ostjh

×