Web RTC Summit 2016

Luis Montes

@MONTESLU


Web RTC & The IoT

Web Browsers & IoT ?


<meta http-equiv="refresh" content="30">
					
or

function refresh(){
	document.location.href = document.location.href;
}
					

LOVE

NPM

347622 modules, 495/day

But I dont want slow janky web tech!

But I want my users to have to install something!

  • Electron/Node-Webkit
  • Phonegap/Cordova/Ionic
  • React Native

Progressive Web Apps

PWA

  • Instant loading / Work offline - Service Workers
  • Add to homescreen - manifest.json
  • Push Notifications
  • Fast
  • Secure
  • Responsive

IoT messaging is JSON


{
  "topic" : "IoT",
  "payload" : "Hello World!"
}
					

Web networking for IoT...

Bi-directional Communication

  • MQTT
  • AMPQ
  • XMPP
  • COAP
  • Websockets

Web RTC

  • Voice
  • Video
  • ...

Secure P2P Voice and Video:

A long time ago...

RTCPeerConnection


const CONFIG = {'iceServers': [{'url': 'stun:23.21.150.121'}]};
const CON_CONFIG = { 'optional': [{'DtlsSrtpKeyAgreement': true}] };
const pc = new PeerConnection(CONFIG, CON_CONFIG);

const offer = pc.createOffer(successCallback, failure...);

					

Offer Data


{
	"type":"offer",
	"sdp":"... ~5.5K of text"
}

					

Get that offer to a friend.

Create Answer


const pc = new PeerConnection(CONFIG, CON_CONFIG);

//plug in our offer data
const offerDesc = new RTCSessionDescription(offer);
pc.setRemoteDescription(offerDesc);
pc.createAnswer(successCallback, failure...);

					

Answer Data


{
  "type":"answer",
  "sdp":"... ~3.7K of text"
}

					

Communicate!


const answerDesc = new RTCSessionDescription(answer);
pc.setRemoteDescription(answerDesc);
...
pc.onaddstream = function(e){
	//do stuff with e.stream
}

					

Yay. Video conferencing with Web RTC

I thought this talk was about IoT...

Send in the clones DRONES !

PeerConnection DataChannel !


pc.ondatachannel = function (e) {
  const datachannel = e.channel;
  datachannel.onmessage = function (e) {
    //do something cool with data events
  };

  //send something
  datachannel.send('{"launch": "proton torpedoes"}');
};

					

PageNodes.com

More IoT APIs!

Geolocation


const options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

navigator.geolocation.getCurrentPosition(success, error, options);

					

Text-to-Speech


const phrase = new SpeechSynthesisUtterance("hello world");

window.speechSynthesis.speak(phrase);
					

Voice Recognition


const recognition = new SpeechRecognition();
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;

recognition.onerror = function(event) {
  //handle error
}

recognition.onend = function() {
	//keep it running?
  recognition.start();
}

recognition.onresult = function(event) {
  const text = event.results[0][0].transcript;
  console.log(text);
}

recognition.start();

					

Web MIDI


navigator.requestMIDIAccess({sysex: false})
.then(function(midi){

	midi.inputs

	midi.outputs

}, failure);


					

Robotics

Nodebots in the beginning...

node-serialport

Johnny-Five


var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {
	var led = new five.Led(13);
	led.blink(500);
});
					
Servos, Accelerometers, Sensors, LCDs, etc...

Bluetooth Low Energy (BLE)

  • Advertise Data / Beacons
  • Services
  • Characteristics

Web Bluetooth

Physical Web

Web USB

  • Firmware itself must specify URLs.
  • The URLs must be HTTPS or localhost for development.
  • User interaction prompted via a browser dialog.
  • Dialog only on a DOM event (button click).

Web USB


const FILTERS = [
  { 'vendorId': 0x2341, 'productId': 0x8036 }, // Arduino Leonardo
];

navigator.usb.requestDevice({filters: FILTERS });
.then(function(device){

	//read
	device.transferIn(5, 64).then(...);

	//write
	device.transferOut(4, data);

});
					

MOAR DEMOS!

Thank You !

Luis Montes

@MONTESLU