Experiencia de uso de WebRTC en la educación

Experiencia de uso de WebRTC en la educación

Jorge Rubiano.@ostjh

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

http://www.freshtilledsoil.com/the-future-of-web/

https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

WebAudio

Media Capture & Streams

http://www.w3.org/TR/2012/WD-mediacapture-streams-20120628/

Web Workers

http://www.w3.org/TR/workers/

Device

http://arewemobileyet.com/

WebRTC

http://www.webrtc.org/

Http/Ajax

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

WebSockets Vs WebRTC

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

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

WebRTC RTCWeb

WebRTC1. Adquirir medios.2. Comunicación Audio y

Vídeo3. Envío y recepción de

datos arbitrarios en conexiones punto a punto.

WebRTC: Apis Javascript

1. getUserMedia2. RTCPeerConnection3. DataChannel

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

Pasos comunicación

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

WebRTCEn 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/

Detección de Movimiento.

http://www.soundstep.com/blog/experiments/jsdetection/https://github.com/ReallyGood/js-motion-detection

Captura de Imágenes

http://webcamtoy.com/es/

Juegos

https://www.cubeslam.com/

Comunicación

http://www.webdesignshock.com/online-chat-tools-for-website/

Foros Chat’s

Comunicación

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

“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”

Comunicación

http://ocw.um.es/gat/contenidos/mpazherramientas/documentos/videoymsn.pdf

Castañeda, 2007

Comunicación - Plugins/servicios

http://www.red5.org

Comunicación - Plugins/servicios

http://www.videowhisper.com/?p=Requirements

http://www.adobe.com/es/products/connect/

http://bigbluebutton.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.iohttps://github.com/webRTC/webRTC.io

http://www.webrtc.org/

+

http://www.mongodb.org/

mongodbhttps://npmjs.org/package/mongodb

+

DEMOChat Social

Trabajo Colaborativo

Trabajo Colaborativo

Togetherjs

https://togetherjs.com/

http://codassium.com

Trabajo Colaborativo

+

Trabajo Colaborativo

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

EtherPad

Written in Scala and has quite big system requirements

EtherPad Lite

http://etherpad.org/

http://nodejs.org/

Etherpad plugin manager

ep_rtchttps://github.com/JohnMcLear/ep_rtc

http://etherpad.org/

http://nodejs.org/

http://socket.io/

http://www.webrtc.org/

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

http://www.mongodb.org/

Trabajo Colaborativo

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

Trabajo Colaborativo

DEMOTrabajo Colaborativo

WebRTC - Peer to Peer

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

WebRTC - Mesh

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

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)

WebRTC - Mesh

http://www.slideshare.net/fullscreen/vline/a-practical/1

WebRTC - Star

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

WebRTC - StarA 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)

WebRTC - MCU

http://sourceforge.net/projects/mcumediaserver/

http://lynckia.com/licode/

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)

DataChannel

https://www.sharefest.me/

DataChannel - CDN

http://es.wikipedia.org/wiki/Red_de_entrega_de_contenidos

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

https://peercdn.com/

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

RTCPeerConnection - Signaling

https://code.google.com/p/sipml5/

http://www.jssip.net/

strophe.jinglehttps://github.com/ESTOS/strophe.jingle/

https://www.gowebrtc.me/

+

RTCPeerConnection - Signaling

webRTC.iohttps://github.com/webRTC/webRTC.io

http://simplewebrtc.com/+ signalmaster

https://github.com/andyet/signalmaster

http://www.easyrtc.com/

Plataformas

http://tokbox.com/

https://vline.com/developer/

https://bistri.com/

WebRTC - Soporte

http://caniuse.com/#search=webrtc

Adapter.js

Aplicaciones

http://twelephone.com/

http://maxiamigos.com/

http://webrtchacks.com/baby-motion-detector

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

Fuenteshttp://webrtchacks.com/http://www.html5rocks.com/en/tutorials/webrtc/basics/https://www.webrtc-experiment.com/http://io13webrtc.appspot.com/#1https://hacks.mozilla.org/category/webrtc/http://groups.google.com/group/discuss-webrtc/topicsGoogle I/O 2012: http://www.youtube.com/watch?v=E8C8ouiXHHkGoogle I/O 2013: http://www.youtube.com/watch?v=p2HzZkd2A40

Libro: http://www.webrtcbook.com/Debug: chrome://webrtc-internals

Gracias por la atenciónJorge Rubiano

@ostjh

WebRTC - Seguridad

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

getUserMedia - Compartir Pantalla

WebRTC - Soportehttps://www.sqwiggle.com

https://github.com/rogerwang/node-webkit

Trabajo Colaborativo - WebRTC

Mockup Proyecto

WebRTC