Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

VideoChat WebRTC

No description
by

David Moreno

on 17 June 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of VideoChat WebRTC

WebRTC es un proyecto de software libre que permite a los navegadores mantener comunicaciones en tiempo real a través de una API Javascript.
¿Qué es WebRTC,?
La API está siendo definida por la W3C, y actualmente le dan soporte Google, Mozilla y Opera en sus respectivos navegadores.


¿Quiénes están detrás?
RTCDataChannel

Además de audio y vídeo, WebRTC soporta la comunicación en tiempo real de otros tipos de datos.




3 APIs
Estos navegadores tienen instalada la API de manera nativa, lo que quiere decir que no será necesaria la instalación de ningún otro software
Sin plugins
WebRTC y otras tecnologías
David Moreno Lora
MediaStream (conocida como getUserMedia)

Permite al navegador acceder a la cámara y al micrófono. Representa un flujo de audio y vídeo
.
3 APIs
3 APIs
RTCPeerConnection

Es el componente que maneja la comunicación entre los pares.
Antes de una conexión peer-to-peer es necesario un intercambio de metadatos, a este proceso se le llama señalización.

La información que intercambian puede ser de tres tipos:
Mensajes de control
Configuración de red
Capacidades
Señalización
Señalización
WebRTC no define el mecanismo de intercambio de SDP, por lo tanto esta elección corresponde al desarrollador.

En mi caso he usado WebSocket.
¿Sobre qué he montado WebRTC?
El vídeo chat ha sido implementado en Node.js, un entorno de programación en la capa del servidor basado en Javascript.

Además, he usado Express, un framework web para Node.js.
Base de datos
He usado MongoDB, un sistema de bases de datos NoSQL orientado a documentos.

En vez de guardar los datos en tablas como los sistemas de bases de datos relacionales, mongoDB los guarda en documentos tipo JSON.
Socket.io
Socket.io es una librería Javascript que facilita el uso de WebSocket.

Básicamente, Socket.io permite abrir un canal de comunicación bidireccional permanente entre el servidor y el cliente, siendo una alternativa a AJAX.
Funcionamiento de la aplicación
Cliente
Servidor
Cliente envía evento
Servidor envía evento
Cliente envía evento
Servidor envía evento
Introducción
Se trata de un proyecto de investigación cuyo objetivo han sido las nuevas tecnologías que han ido apareciendo en el mundo del desarrollo web.

En especial el estudio se ha dedicado a WebRTC, aunque se han trabajado otras tantas, como Node.js, Express, MongoDB, Jade y Socket.io.
Objetivos del proyecto
Los objetivos son los siguientes:
Investigación sobre WebRTC
Investigación de otras nuevas tecnologías
Implementación de una aplicación a modo de ejemplo
Elaboración de material de aprendizaje accesible desde la web
Aplicación de ejemplo
A modo de ejemplo sobre todas estas tecnologías, he implementado un vídeo-chat que hace uso de WebRTC.
La aplicación está implementada en Node.js, que, junto a Socket.io, hace la mayoría del trabajo.
Funcionalidades
En la aplicación, cada usuario tendrá que registrarse en la base de datos antes de poder acceder al vídeo-chat.

Cada usuario tendrá un ID único, aunque el nombre si podrá coincidir.

Una vez dentro, cuando dos usuarios están de acuerdo en iniciar una videollamada, se crea automáticamente una sala cuyo nombre es el ID de ambos unido por un guión bajo.

Cualquiera de ellos podrá colgar en cualquier momento.
Material de aprendizaje
He creado también un tutorial con la herramienta Exelearning.

Exelearning permite crear de manera muy intuitiva un sitio web en el que añadir contenidos a modo de temario.
Material de aprendizaje
En este tutorial he mostrado como crear paso a paso la aplicación de demostración que he desarrollado.

Desde la instalación de Node.js y MongoDB hasta el código para implementar las funciones de WebRTC.
El tutorial está alojado en:
tutorialvideochatwebrtc.esy.es
Bibliografía
www.html5rocks.com
www.webrtc.org
simpl.info
www.creativebloq.com
embat.es
rtcamp.com
cwbuecheler.com
donflopez.tumblr.com
psitsmike.com
bitbucket.org
codehero.co
stackoverflow.com
www.npmjs.org
www.slideshare.net
www.3cx.es
www.presenceco.com
Final de la presentación
Gracias por escuchar
Pasemos ahora a la demostración
Full transcript