WebRTC - JSConf Brazil 2013

Slide 1

Slide 1 text

@HenrikJoreteg WebRTC Saturday, June 22, 13

Slide 2

Slide 2 text

HI! Saturday, June 22, 13

Slide 3

Slide 3 text

Saturday, June 22, 13

Slide 4

Slide 4 text

WEBRTC IS THE BIGGEST THING TO HAPPEN TO THE WEB SINCE THE WEB Saturday, June 22, 13

Slide 5

Slide 5 text

WHY?! Saturday, June 22, 13

Slide 6

Slide 6 text

BETTER COMMUNICATION MEANS A BETTER WEB Saturday, June 22, 13

Slide 7

Slide 7 text

WHAT IS A PHONE? Saturday, June 22, 13

Slide 8

Slide 8 text

DEVICE CAPABLE OF REALTIME AUDIO COMMUNICATION Saturday, June 22, 13

Slide 9

Slide 9 text

PHONE NUMBER? Saturday, June 22, 13

Slide 10

Slide 10 text

IT’S AN ADDRESS FOR A PHONE Saturday, June 22, 13

Slide 11

Slide 11 text

IN THE OLD DAYS Saturday, June 22, 13

Slide 12

Slide 12 text

ONE PHONE/ENDPOINT = ONE NUMBER Saturday, June 22, 13

Slide 13

Slide 13 text

ENTER: MOBILE PHONES Saturday, June 22, 13

Slide 14

Slide 14 text

ONE NUMBER = ONE PERSON Saturday, June 22, 13

Slide 15

Slide 15 text

ENTER: WEBRTC Saturday, June 22, 13

Slide 16

Slide 16 text

ENDPOINTS ARE COMMODITIES Saturday, June 22, 13

Slide 17

Slide 17 text

BUT THERE IS NO STANDARD ADDRESSING SCHEME Saturday, June 22, 13

Slide 18

Slide 18 text

SO IT’S THE WILD WILD WEST Saturday, June 22, 13

Slide 19

Slide 19 text

SO WHAT DO YOU GET? Saturday, June 22, 13

Slide 20

Slide 20 text

PEER TO PEER AUDIO/VIDEO PEER TO PEER DATA STREAMING Saturday, June 22, 13

Slide 21

Slide 21 text

YOU CAN NOW BUILD A TELECOM WITH HTML, JAVASCRIPT, AND A SIMPLE SERVER Saturday, June 22, 13

Slide 22

Slide 22 text

ATT.JS Saturday, June 22, 13

Slide 23

Slide 23 text

WHO ARE THE NEXT TELECOMS? Saturday, June 22, 13

Slide 24

Slide 24 text

Google Facebook Microsoft Apple Saturday, June 22, 13

Slide 25

Slide 25 text

How does it all work? (it’s a tad messy, stay with me) Saturday, June 22, 13

Slide 26

Slide 26 text

https://github.com/HenrikJoreteg/jsconfbr Saturday, June 22, 13

Slide 27

Slide 27 text

Step #1 Decide you want to call your mother Saturday, June 22, 13

Slide 28

Slide 28 text

Henrik pc = new RTCPeerConnection() Henrik’s Mom Step #2 You, and your mother both create a peer connection object pc = new RTCPeerConnection() Saturday, June 22, 13

Slide 29

Slide 29 text

Step #3 getUserMedia var localVideo = document.getElementById(‘local’); navigator.getUserMedia( { video: true, audio: true }, function (stream) { peerConnection.addStream(stream); attachMediaStream(localVideoEl, stream); }, function () { console.log("failed to get local media"); } ); Saturday, June 22, 13

Slide 30

Slide 30 text

Henrik // establish socket.io connection conn = io.connect(“http://sigserver.com”); // identify yourself to the server conn.emit(“id”, “henrik”); Henrik’s Mom Step #4 Signaling Server Signaling Server Saturday, June 22, 13

Slide 31

Slide 31 text

Signaling Server?! (sounds more complicated than it is) Saturday, June 22, 13

Slide 32

Slide 32 text

Slide 33

Slide 33 text

// create a new peer connection var pc = new RTCPeerConnection(); // tell our browser to describe our session pc.createOffer(function (sessionDescription) { // send it through our socket.io connection conn.emit(“message”, { to: “mom”, type: “offer”, body: sessionDescription }); }); Step #5 Send offer to mom Saturday, June 22, 13

Slide 34

Slide 34 text

// socket.io handler for incoming message conn.on(“message”, function (msg) { if (msg.type === “offer”) { var desc = new RTCSessionDescription(msg.payload); pc.setRemoteDescription(desc); pc.createAnswer(function (sessionDescription) { pc.setLocalDescription(sessionDescription); conn.emit(“message”, { to: msg.from, type: “answer”, payload: sessionDescription }); }); } }); Step #6 Mom answers (if she still loves you) Saturday, June 22, 13

Slide 35

Slide 35 text

// socket.io handler for incoming message conn.on(“message”, function (msg) { if (msg.type === “answer”) { var desc = new RTCSessionDescription(msg.payload); pc.setRemoteDescription(desc); } }); Step #7 Process mom’s reply Saturday, June 22, 13

Slide 36

Slide 36 text

And we’re done! Saturday, June 22, 13

Slide 37

Slide 37 text

Saturday, June 22, 13

Slide 38

Slide 38 text

pc.onicecandidate = function (event) { if (event.candidate) { conn.emit(“message”, { type: “ice”, to: “mom”, payload: { label: event.candidate.sdpMLineIndex, id: event.candidate.sdpMid, candidate: event.candidate.candidate } }); } }; Step #7 Make the ice ﬂow Saturday, June 22, 13

Slide 39

Slide 39 text

Step #7.1 process the ice messages // socket.io handler for incoming message conn.on(“message”, function (msg) { if (msg.type === “ice”) { var candidate = new RTCIceCandidate({ sdpMLineIndex: message.payload.label, candidate: message.payload.candidate }); pc.addIceCandidate(candidate); } }); Saturday, June 22, 13

Slide 40

Slide 40 text

DEMO Saturday, June 22, 13

Slide 41

Slide 41 text

THE CODE https://github.com/HenrikJoreteg/jsconfbr Saturday, June 22, 13

Slide 42

Slide 42 text

DATA CHANNELS var pc = new RTCPeerConnection(servers, { optional: [{RtpDataChannels: true}] }); pc.ondatachannel = function(event) { var channel = event.channel; channel.onmessage = function(event){ console.log(‘got data’, event.data); }; }; var sendChannel = pc.createDataChannel("sendDataChannel", {reliable: true}); Saturday, June 22, 13

Slide 43

Slide 43 text

SimpleWebRTC http://simplewebrtc.com/ https://github.com/HenrikJoreteg/SimpleWebRTC https://github.com/andyet/signalmaster Saturday, June 22, 13