WebRTC - JSConf Brazil 2013

Explains basics of WebRTC and how to use it.

Transcript

1. @HenrikJoreteg WebRTC Saturday, June 22, 13
2. HI! Saturday, June 22, 13
3. Saturday, June 22, 13
4. WEBRTC IS THE BIGGEST THING TO HAPPEN TO THE WEB SINCE THE WEB Saturday, June 22, 13
5. WHY?! Saturday, June 22, 13
6. BETTER COMMUNICATION MEANS A BETTER WEB Saturday, June 22, 13
7. WHAT IS A PHONE? Saturday, June 22, 13
8. DEVICE CAPABLE OF REALTIME AUDIO COMMUNICATION Saturday, June 22, 13
9. PHONE NUMBER? Saturday, June 22, 13
10. IT’S AN ADDRESS FOR A PHONE Saturday, June 22, 13
11. IN THE OLD DAYS Saturday, June 22, 13
12. ONE PHONE/ENDPOINT = ONE NUMBER Saturday, June 22, 13
13. ENTER: MOBILE PHONES Saturday, June 22, 13
14. ONE NUMBER = ONE PERSON Saturday, June 22, 13
15. ENTER: WEBRTC Saturday, June 22, 13
16. ENDPOINTS ARE COMMODITIES Saturday, June 22, 13
17. BUT THERE IS NO STANDARD ADDRESSING SCHEME Saturday, June 22, 13
18. SO IT’S THE WILD WILD WEST Saturday, June 22, 13
19. SO WHAT DO YOU GET? Saturday, June 22, 13
20. PEER TO PEER AUDIO/VIDEO PEER TO PEER DATA STREAMING Saturday, June 22, 13
21. YOU CAN NOW BUILD A TELECOM WITH HTML, JAVASCRIPT, AND A SIMPLE SERVER Saturday, June 22, 13
22. ATT.JS Saturday, June 22, 13
23. WHO ARE THE NEXT TELECOMS? Saturday, June 22, 13
24. Google Facebook Microsoft Apple Saturday, June 22, 13
25. How does it all work? (it’s a tad messy, stay with me) Saturday, June 22, 13
26. https://github.com/HenrikJoreteg/jsconfbr Saturday, June 22, 13
27. Step #1 Decide you want to call your mother Saturday, June 22, 13
28. 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
29. 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
30. 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
31. Signaling Server?! (sounds more complicated than it is) Saturday, June 22, 13
32. var io = require(‘socket.io’).listen(3000), users = {}; io.on(‘connection’, function (client) { client.on(‘id’, function (name) { users[name] = client; client.name = name; }); client.on(‘message’, function (msg) { var otherClient = users[msg.to]; if (otherClient) { delete msg.to; msg.from = client.name; otherClient.emit(‘message’, msg); } }); }); Saturday, June 22, 13
33. // 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
34. // 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
35. // 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
36. And we’re done! Saturday, June 22, 13
37. Saturday, June 22, 13
38. 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 flow Saturday, June 22, 13
39. 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
40. DEMO Saturday, June 22, 13
41. THE CODE https://github.com/HenrikJoreteg/jsconfbr Saturday, June 22, 13
42. 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
43. SimpleWebRTC http://simplewebrtc.com/ https://github.com/HenrikJoreteg/SimpleWebRTC https://github.com/andyet/signalmaster Saturday, June 22, 13
44. Saturday, June 22, 13
45. Talky.io Saturday, June 22, 13
46. FUTURE PLANS Saturday, June 22, 13
47. THANKS! @HenrikJoreteg, @andyet on twitter Saturday, June 22, 13