WebRTC Data Channels

An brief introduction with RTC.io

Glen Arrowsmith

@garrows

glen.arrowsmith@gmail.com

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

Glen Arrowsmith

@garrows

glen.arrowsmith@gmail.com

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