Presentation of my last talk at MilanoJS event. It is the case history of a project where we used the WebRTC to make a chat skype style, using also WebSockets with Socket.io on NodeJS
7. MEDIASTREAM (AKA GETUSERMEDIA)
Acquiring audio and video
Can contain multiple 'tracks'
var constraints = {
video: {
mandatory: {
minWidth: 640,
minHeight: 360
}
};
function successCallback(stream) {
var video = document.querySelector("video");
video.src = window.URL.createObjectURL(stream);
}
function errorCallback(error) {
console.log("navigator.getUserMedia error: ", error);
}
Constraints controls the contents of the MediaStream
10. SIGNALING
Exchanging 'session description' objects
What formats I support, what I want to send
Network information for peer-to-peer setup
Any message mechanism and protocol
20. WEBRTC LIBRARIES & CO.
by
by
by
by
...
adapter.js webrtc
rtc-everywhere contra
SimpleWebRTC &Yet
RTCMultiConnection Muaz Khan
21. RTCMULTICONNECTION
A javascript wrapper library supporting
approximately all possible peer-to-peer
features.
WEBRTC EXPERIMENTS
Tons of open source experiments based on
RTCMultiConnection:
webrtc-experiment.com
24. SOCKET.IO
A popular open source library with client and server
implementations
Server side written in Node and easy to start
var server = require('http').createServer();
var io = require('socket.io')(server);
io.on('connection', function(socket){
socket.on('hi!', function(data){
socket.emit('a-message', {hello: 'world'});
});
socket.on('disconnect', function(){});
});
server.listen(3000);
25. SOCKET.IO CLIENT
var socket = io.connect('http://localhost:3000/');
socket.on('connect', function () {
socket.emit('hi!');
});
socket.on('a-message', function (data) {
console.log(data.hello);
});
27. MAIN ISSUES
WebRTC architecture like IRC
rooms with shared chat: text, video and data
direct chat: only one to one
room managed by initiator
conversation type can change without agreement: text to
video
29. STEP 1
UserA is logged in and is connected to the socket server
30. STEP 2
The app sends a "presence" event to other users through
the socket
The server forwards the message only to user's contacts
Each present user replies with the same "presence" event
33. STEP 4
When a user receives a "presence" event, it automatically
knows that the sender is online
Also the server sends the “presence” event to all, when a
user socket is disconnected
34. STEP 5
UserA starts a conversation and the app creates the webrtc
connection