Presentación WebRTC y Lynckia

WebRTC
Comunicaciones en tiempo real desde tu navegador

Javier Cerviño Alvaro Alonso Pedro Rodriguez
jcervino@dit.upm.es aalonsog@dit.upm.es prodriguez@dit.upm.es
@jcague @larsonalonso @lodoyun

Nestor Toribio Joaquín Salvachúa
nestortoribioruiz@gmail.com jsr@dit.upm.es
@nehko1 @jsalvachua

Grupo de Internet de Nueva Generación
Departamento de Ingeniería de Sistemas Telemáticos
Universidad Politécnica de Madrid

Previously on GING
Isabel 1995 (o por ahi)
Aplicación de escritorio
Ubuntu/Windows
P2P/Centralizado
Pasarelas SIP

Marte 2007
Aplicación Flash sobre el navegador
Centralizado
Desktop

VaaS 2010
Cloud Computing
Aplicación Flash sobre el navegador
Desktop y Móviles
Javier Cerviño Alvaro Alonso
@jcague @larsonalonso

Índice
1. Introducción a WebRTC
1. Descripción
2. Ejemplo de llamada
3. Estado actual

2. Problemas de WebRTC

3. Videoconferencia multiusuario
1. Lynckia, componentes y API
2. Ejemplos


Videoconferencia en el
navegador


PROTOCOLOS PROPIETARIOS
HTTP/WEBSOCKETS

JS/CSS/HTML JS/CSS/HTML

TRANSMISIÓN
Navegador Navegador
DE MEDIOS

APIs de WebRTC en JavaScript

Tres Grandes APIs
getUserMedia
Obtención de flujos locales

StreamAPI
Manejo de flujos multimedia

PeerConnection
Conexiones entre pares


Ejemplo de llamada
1. getUserMedia() 5. getUserMedia()
2. pc = new PeerConnection() 6. pc = new PeerConnection()
3. onLocalSignallingMessage(sdpOffer) 7. pc.processSignalingMessage(sdpOffer)
8. onLocalSignallingMessage(sdpAnswer)
10. pc.processSignalingMessage(sdpAnswer)
11. onLocalSignallingMessage(sdpOk) 13. pc.processSignalingMessage(sdpOk
)

14

Alice Javier Cerviño Bob
Alvaro Alonso

Google

Proyecto de código libre escrito en C++

Respaldado por Google, Mozilla y Opera entre otros.

Implementación de todo WebRTC


Google

Primera Fase
• Librería en C++ implementando rtcweb

Segunda Fase
• Inclusión de la librería en navegadores
• Implica implementación del API JavaScript

Actualmente:
• Primera versión disponible: iteraciones y pruebas


Ericsson Labs


Ericsson Labs

Bowser

Navegador Web en el móvil

Soporte WebRTC

Disponible para iOS y Android

https://labs.ericsson.com/apps/bowser


Mozilla

Firefox 18 con soporte completo de WebRTC

GetUserMedia
StreamAPI
PeerConnection

Lanzamiento en enero de 2013

https://hacks.mozilla.org/2012/09/full-webrtc-support-is-soon-coming-to-a-web-browser-near-you/


Internet Explorer

Soporte experimental de GetUserMedia

navigator.msGetUserMedia(options, cameraStarted);

function cameraStarted(mediaStream) {
msMediaStream = mediaStream;
document["imgPreview"].src = URL.createObjectURL(mediaStream);
}

http://blogs.msdn.com/b/ie/archive/2012/03/16/media-capture-prototype-improved-support-for-real-world-web-apps.aspx


Opera
Soporta sólo getUserMedia

También tiene soporte en los móviles


Problemas de WebRTC


Problemas de WebRTC

UMTSHSPA+
HSDPA

Problemas de WebRTC

MCU

Lynckia

Erizo

Nuve


Lynckia - Salas

Una sala es una MCU

Permite publicar streams
Video, audio, datos

Permite subscribirse a ellos

Control desde el navegador

Permitirá transcodificar/grabar

Lynckia - Nuve API

Accesible a través del Backend

Dirigido a servicios

Administración de salas
Nuve
Gestiona la escalabilidad
Monitoriza

Creación de tokens

Lynckia - Erizo

Accesible a traves del
Frontend
Erizo

Contiene las MCU
Cada sala es una de ellas

Gestiona los streams
Audio, video y datos


Lynckia - Erizo

Erizo
Disponible en:
https://github.com/ging/erizo
Erizo Codigo C++
Protocolos WebRTC
Linux/Mac

Erizo API
Disponible en:
https://github.com/ging/erizoAPI
Wrapper en Node.js
Pronto a traves de NPM


Lynckia API

API Servidor Streams
Rooms Rooms
Tokens Events
Users
API Cliente Javier Cerviño Alvaro Alonso

API Servidor
Comunicación con Nuve
API para gestión del Servicio
Salas videoconferencia
Tokens autenticación
Usuarios
Código
Node.js
Python
(Ruby)

API Servidor - Room

Propiedades Funciones
Room._id createRoom (name)
Room.name getRooms ()
getRoom (roomId)
deleteRoom (roomId)

Ejemplo
var N = require('./nuve');
N.API.init(serviceId, serviceKey);

var roomName = 'myFirstRoom';

N.API.createRoom(roomName, function(room) {
console.log('Room created with id: ', room._id);
});


API Servidor - Token

String con las credenciales de autenticación
Funciones
createToken (roomId, name, role)

Ejemplo
var roomId = '30121g51113e74fff3115502';
var name = 'userName';
var role = '';

N.API.createToken(room, name, role, function(token) {
console.log('Token created: ', token);
});


API Servidor - User

Propiedades Funciones
User.name getUsers (roomId)
User.role

Ejemplo
var roomId = '30121g51113e74fff3115502';

N.API.getUsers(roomId, function(users) {
console.log('This room has ', users.length, 'users');

for (var i in users) {
console.log('User ', i, ':', users[i].name,
'role: ', users[i].role);
}
});

API Cliente
Comunicación con Erizo
Manejo flujos (Streams)
Audio
Vídeo
Datos
Interacción salas (Rooms)
Conexión
Intercambio flujos
Captura eventos (Events)
En flujos
En salas

API Cliente - Stream (I)

Crear un Stream
var stream = Erizo.Stream({audio:false, video:true, data: true,
attributes: {name:'myStream', type: 'public'}});

Iniciar y mostrar el Stream
stream.addEventListener('access-accepted', function(event) {
console.log("Access to webcam and microphone granted");

stream.show('myVideoId');

});

stream.addEventListener('access-denied', function(event) {
console.log("Access to webcam and microphone rejected");
});

stream.init();


API Cliente - Stream (II)

Usando el Stream
stream.addEventListener('stream-data', function(evt) {
console.log('Received data ', evt.msg, 'from stream ', evt.stream.getID());
}

stream.sendData({text:'Hello world', timestamp:12321312});

var frame;
var url;
var ctx = document.getElementById('myCanvas').getContext('2d');
var img = document.getElementById('myImg');

setInterval (function() {
frame = stream.getVideoFrame();
ctx.putImageData(frame, 0, 0);

url = stream.getVideoFrameURL();
img.src = url;

}, 100);

API Cliente - Room (I)

Conectarse a una sala
var room = Erizo.Room({token:'213h8012hwduahd-321ueiwqewq'});

room.addEventListener('room-connected', function(roomEvent) {
console.log('Connected! Streams in the room: ', roomEvent.streams);
}

room.connect();

Publicar mi stream

room.addEventListener('stream-added', function(streamEvent) {
if (localStream.getID() === streamEvent.stream.getID()) {
console.log('Published!');
}
}

room.publish(localStream);


API Cliente - Room (II)

Suscribirse a un Stream
room.addEventListener('stream-subscribed', function(streamEvent) {
console.log('Subscribed to stream: ', streamEvent.stream.getID());
}

room.subscribe(stream);

Y además…

room.addEventListener('stream-removed', function(streamEvent) {
console.log('Removed stream: ', streamEvent.stream.getID());
}

room.unpublish(localStream);

room.unsubscribe(stream);

room.disconnect();


API Cliente - Events
Yo ERIZO Otros
Clientes localStream.init()
access-accepted

room.connect()
room-connected (streams)

room.subscribe (stream)
stream-subscribed

room.publish (localStream)
stream-added stream-added

room.unpublish (stream)
stream-removed stream-removed

stream.sendData (msg) stream-data

ViaS
<html><head><title>Lynckia Example</title> room.addEventListener("stream-added", function (streamEvent) {
<script type="text/javascript" src="http://…/erizo.js"></script> var streams = [];
<script type="text/javascript”> streams.push(streamEvent.stream);
window.onload = function () { subscribeToStreams(streams);
});
var localStream = Erizo.Stream({audio: true, video: true, data: true}); room.addEventListener("stream-removed", function (streamEvent) {
var room = Erizo.Room({token: '213h8012hwduahd-321ueiwqewq'}); var stream = streamEvent.stream;
if (stream.elementID !== undefined) {
localStream.addEventListener("access-accepted", function () {
var element = document.getElementById(stream.elementID);
var subscribeToStreams = function (streams) { document.body.removeChild(element);
for (var index in streams) { }
var stream = streams[index]; });
if (localStream.getID() !== stream.getID())
room.subscribe(stream);
} room.connect();
}; localStream.show("myVideo");
room.addEventListener("room-connected", function (roomEvent) { });
room.publish(localStream);
subscribeToStreams(roomEvent.streams);
localStream.init();
});
};
room.addEventListener("stream-subscribed", function(streamEvent) { </head>
var stream = streamEvent.stream; </script>
<body>
var div = document.createElement('div');
div.setAttribute("style", "width: 320px; height: 240px;"); <div id="myVideo" style="width:320px; height: 240px;”></div>
div.setAttribute("id", "test" + stream.getID()); </body>
document.body.appendChild(div); </html>

stream.show("test" + stream.getID());
}); Javier Cerviño Alvaro Alonso

Demo: Guess Who!

http://www.youtube.com/watch?v=e3tn-uh5Wbo

Demo: Guess Who!

myConfigStream = Erizo.Stream({audio: false, video: false, data: true,
attributes: {name: 'configStream'}});
room.publish(myConfigStream);

for (var cs in configStreams) {
room.subscribe(configStreams[cs]);
configStreams[cs].addEventListener("stream-data", function(evt) {

var msg = evt.msg; var stream = evt.stream;
if (msg.state === 'free') {
myConfigStream.sendData({state: 'selected', yourID: stream.getID()});

} else if (msg.state === 'selected' && msg.yourID === myConfigStream.getID()) {
myConfigStream.sendData({state: 'ok', yourID: stream.getID()});
startPlaying(stream);

} else if (msg.state === 'ok’ && msg.yourID === myConfigStream.getID()) {
startPlaying(stream);
}
});
}
myConfigStream.sendData({state: 'free'});
Basado en threede.js @jcague @larsonalonso

MashMeTV

http://www.youtube.com/watch?v=3XZ-ffdPFH0

Demo: MashMe TV

var canvas = document.createElement('canvas');
canvas.id = "testing";
canvas.width = "100px";
canvas.height = "50px";
document.body.appendChild(canvas);

var context = canvas.getContext('2d');
document.getElementById("myVideo").onclick = function() {

var frame = stream.getVideoFrame();
context.putImageData(frame, 0, 0);
} Javier Cerviño Alvaro Alonso

Demo CSS 3D

http://www.youtube.com/watch?v=7wLTUaGJfQ0

room.addEventListener("stream-subscribed", function(streamEvent) {

var winDiv = document.createElement('div');
winDiv.setAttribute("style", "width: 345x; height: 3D Game
Demo: 305px;");
winDiv.setAttribute("id", "window");

world.addPlane( new PlaneVideo(winDiv, 345, 305, 30, 588, -400,90,0,0));
streamEvent.stream.show('window');
}

function PlaneVideo(videodiv, w,h,x,y,z,rx,ry,rz, options) {

this.node = document.createElement("div");
this.node.appendChild(videodiv);
…
this.node.style.cssText +=
"-webkit-transform:" +
"translate3d(" + x + "px," + y + "px," + z + "px)" +
"rotateX(" + rx + "deg)" +
"rotateY(" + ry + "deg)" +
"rotateZ(" + rz + "deg);" +
"-webkit-filter: blur(2px);";
}

Muchas gracias!!
Preguntas???

jcervino@dit.upm.es aalonsog@dit.upm.es

Presentación WebRTC y Lynckia

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (10)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Presentación WebRTC y Lynckia

Ähnlich wie Presentación WebRTC y Lynckia (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (16)

Presentación WebRTC y Lynckia