WebRTC Data Channels
An brief introduction with RTC.io
Bam
A two player game that determines who can press the spacebar the fastest
The Bad Old Days
Completely Static
The Bad Old Days
Set Timeout
setTimeout(function() {
$.get('/api/status', function(data) {
...
});
}, 5000);
A New Hope
WebSockets
Socket.IO
Nice wrapper and polyfil for WebSockets
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get(
'/',
function(req, res){
res.sendfile('index.html');
}
);
io.on(
'connection',
function(socket){
socket.on(
'chat message',
function(msg){
io.emit('chat message', msg);
}
);
}
);
http.listen(3000, function(){
console.log('listening on *:3000');
});
...
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" />
<button>Send</button>
</form>
<script src="/socket.io/socket.io.js" />
<script src="://code.jquery.com/jquery-1.11.1.js" />
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
...
Server
Browser
WebSocket
- Bottlenecked
- Not Private
- Non-Transactional
WebRTC
ICE
WebRTC
ICE
Demo
WebRTC
- MediaStream (aka getUserMedia)
- RTCPeerConnection (Audio & Video)
- RTCDataChannel (Just data)
RTCDataChannel
- Same API as WebSockets
- Ultra-low latency
- Unreliable or reliable
- Secure
Introducing rtc.io
rtc.io is a collection of node.js modules that simplify WebRTC development.
- access to local camera(s) and microphone(s)
- create audio and video calls between browsers
- set up data channels between browsers
- provide communication management
- set up a signalling server
[Switch To Code]
https://github.com/garrows/bam
http://caniuse.com/#feat=rtcpeerconnection
Can I Use It?
More Info
- http://www.html5rocks.com/en/tutorials/webrtc/basics/
- http://www.html5rocks.com/en/tutorials/webrtc/datachannels/
- https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC/WebRTC_basics
- http://rtc.io/
- https://github.com/garrows/Bam
- http://nodeup.com/sixtynine
- http://io13webrtc.appspot.com/
Cool Projects
- https://github.com/kzahel/jstorrent
- https://github.com/feross/webtorrent
WebRTC Data Channels intro with RTC.io
By Glen Arrowsmith
WebRTC Data Channels intro with RTC.io
WebRTC Data Channels intro with RTC.io
- 2,057