COMMUNICATE ALL THE THINGS!!!

http://goo.gl/apJFN7​

Follow Along

#JSConf

@geekgonenomad

Who Is This Guy?

#JSConf

@geekgonenomad

Kyle Tyacke

Flash / Web Dev

Developer Evangelist Respoke

Beer Geek

#JSConf

@geekgonenomad

What the Heck Is WebRTC?

#JSConf

@geekgonenomad

WebRTC

“is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple JavaScript APIs.”

#JSConf

@geekgonenomad

WebRTC

“is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple JavaScript APIs.”

#JSConf

@geekgonenomad

WebRTC

“is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple JavaScript APIs.”

#JSConf

@geekgonenomad

WebRTC

“is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple JavaScript APIs.”

#JSConf

@geekgonenomad

WebRTC

“is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple JavaScript APIs.”

#JSConf

@geekgonenomad

Contributors

#JSConf

@geekgonenomad

WebRTC in the Wild

#JSConf

@geekgonenomad

Amazon Mayday

#JSConf

@geekgonenomad

GoogleHangouts

https://plus.google.com/hangouts

#JSConf

@geekgonenomad

Apollo

https://github.com/respoke/apollo

#JSConf

@geekgonenomad

PeerCDN

https://peercdn.com/

#JSConf

@geekgonenomad

Cubeslam

https://www.cubeslam.com

#JSConf

@geekgonenomad

How Does WebRTC Work?

#JSConf

@geekgonenomad

When Bob Met Alice

#JSConf

@geekgonenomad

An Ideal World!

#JSConf

@geekgonenomad

The Real World...

#JSConf

@geekgonenomad

ICE, ICE, Baby

#JSConf

@geekgonenomad

The Complete Connection

#JSConf

@geekgonenomad

Simple Right?

#JSConf

@geekgonenomad

#JSConf

@geekgonenomad

Like WebRTC?

#JSConf

@geekgonenomad

Remember This?

#JSConf

@geekgonenomad

#JSConf

@geekgonenomad

<CODE/>

Create a Respoke Account

www.respoke.io

Getting Connected

http://goo.gl/fajmx8

#JSConf

@geekgonenomad

 // App ID value from the dev portal. You can play
 // around with the supplied ID or replace it with
 // your own.
 var appid = "b4931d40-ff2b-4c46-8487-bf955a75501d";
 var endpointId;

 // Create the client object using the App ID 
 var client = respoke.createClient({
     appId: appid,
     developmentMode: true
 });

 // "connect" event fired after successful connection to Respoke
 client.listen('connect', function() {
     $("#status").html("Connected to Respoke as \"" + endpointId + "\"");
 });

 // Connect to Respoke when the user clicks "connect"
 $("#doLogin").click(function() {
     // Update the status message
     $("#status").html("Connecting...");

     // Grab our username
     endpointId = $("#endpoint").val();

     // Connect to Respoke
     client.connect({
         endpointId: endpointId
     });
 });

Messaging

http://goo.gl/vq8XCy

#JSConf

@geekgonenomad

// Listen for incoming messages
client.listen('message', function(evt) {
    $("#messages").append(
        "<li>" + evt.message.message + "</li>"
    );
});

// Send message
$("#sendMessage").click(function() {
    // Get the recipients name
    var remote = $("#remoteId").val();

    // Make an endpoint for that recipient
    var endpoint = client.getEndpoint({
        id: remote
    });

    // Grab the text to send
    var messageText = $("#textToSend").val();

    // Send it
    endpoint.sendMessage({
        message: messageText
    });

    // Show yourself the message
    $("#messages").append(
        "<li>" + messageText + "</li>"
    );

    // Clear the text you just sent
    $("#textToSend").val('');
});

Group Messaging

http://goo.gl/DNxVuc

#JSConf

@geekgonenomad

// "connect" event fired after successful connection to Respoke
client.listen('connect', function() {
    $("#status").html("Connected to Respoke as \"" + endpointId + "\"");

    // Update group status message
    $('#groupStatus').html('Joining group ' + groupId);

    // Automatically join the group once connected
    client.join({
        id: groupId,
        onSuccess: function(grp) {
            $('#groupStatus').html('Joined group ' + grp.id);

            // Store reference to the Group object
            this.group = grp;
        },
        onMessage: function(evt) {
            $("#messages").append(
                "<li>" + evt.message.message + "</li>"
            );
        }
    });
});

// Send message
$("#sendMessage").click(function() {
    // Grab the message to send
    var groupMsg = $('#groupMsg').val();

    // Send message to the entire group
    group.sendMessage({
        message: groupMsg
    });

    // Show yourself the message
    $("#messages").append(
        "<li>" + groupMsg + "</li>"
    );

    // Clear the message input
    $("#groupMsg").val('');
});

// Leave the group
$("#leaveGroup").click(function() {
    group.leave({
        onSuccess: function(evt) {
            $('#groupStatus').html('Left group ' + groupId);
        }
    });
});

Video Calling

http://goo.gl/m4tZwX

#JSConf

@geekgonenomad

// The options for our video call including constraints and callbacks
var callOptions = {
    constraints: {
        audio: true,
        video: true
    },

    // Your video
    onLocalMedia: function(evt) {
        setVideo('localVideoSource', evt.element)
    },

    // Their video
    onConnect: function(evt) {
        setVideo('remoteVideoSource', evt.element)
    }
};

// Listen for incoming calls
client.listen('call', function(evt) {
    activeCall = evt.call;

    // We only want to answer if we didn't initiate the call
    if (activeCall.caller !== true) {
        activeCall.answer(callOptions);

        // The hangup event indicates the call is over
        activeCall.listen('hangup', function() {
            hangUp();
        });
    }
});

// Call the recipient
$("#doCall").click(function() {
    var recipientId = $("#remoteId").val();
    var recipientEndpoint = client.getEndpoint({
        id: recipientId
    });
    activeCall = recipientEndpoint.startVideoCall(callOptions);
});

// Hangup the call
$("#doHangUp").click(hangUp);

// Adds the supplied video element as a child of the supplied element
function setVideo(elementId, videoElement) {
    var videoParent = document.getElementById(elementId);
    videoParent.innerHTML = "";
    videoParent.appendChild(videoElement);
}

// End the current call and clean up the DOM
function hangUp() {
    activeCall.hangup();
    activeCall = null;

    // Remove the video elements
    $("#localVideoSource").html("");
    $("#remoteVideoSource").html("");
}

Docs and Additional Examples

https://docs.respoke.io/

#JSConf

@geekgonenomad

What's It All Mean?

#JSConf

@geekgonenomad

Faster Development

#JSConf

@geekgonenomad

Better User Experience

#JSConf

@geekgonenomad

Happy Bosses

#JSConf

@geekgonenomad

Happy Bosses Users!

#JSConf

@geekgonenomad