WebRTC - JSConf Brazil 2013

WebRTC - JSConf Brazil 2013

Explains basics of WebRTC and how to use it.

229ec15028bae7f1d4cdcfe91e2380b0?s=128

Henrik Joreteg

June 22, 2013
Tweet

Transcript

  1. 4.

    WEBRTC IS THE BIGGEST THING TO HAPPEN TO THE WEB

    SINCE THE WEB Saturday, June 22, 13
  2. 21.

    YOU CAN NOW BUILD A TELECOM WITH HTML, JAVASCRIPT, AND

    A SIMPLE SERVER Saturday, June 22, 13
  3. 25.

    How does it all work? (it’s a tad messy, stay

    with me) Saturday, June 22, 13
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  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