WebRTC Fundamentals

Introducing the WebRTC API
Videoconferencing isn't easy, if it was we'd all be creating our own personal Skype apps and stop putting up with all the adds Microsoft has started pushing on us during our calls with grandma. For a successful, seamless, and clear video call to happen lots of details need to be handled, things like echo cancellation, audio gain control and noise reduction, error handling, dynamic video and audio buffering, and of course network traversal, and connecting peers, exchanging information about what media formats, optimal resolution, bandwidth, and so on, that each client can handle. That's a pretty long list of things that need to happen to make video conferencing work reliably, luckily for us WebRTC handles all of this and abstracts most of it so you never have to worry about these details. I don't want to over simplify though, there's plenty you can tinker with under the hood if you need to, and yes you may need to, and remember that this speck is still in development, so expect some changes in how things are implemented as it evolves. That being said there are three APIs implemented in WebRTC, MediaStream, RTCPeerConnection, and RTCDataChannel, MediaStream handles access to the users web cam and microphone, RTCPeerConnection enables audio or video calls between devices with bandwidth management and encryption built in, and RTCDataChannel allows peers to efficiently pass generic data back and forth. In this module we'll explore these three WebRTC APIs, what they do and how you can use them to create amazing real time communication apps of your own.

Setting Up Your Development Environment
Let's have some fun creating some real WebRTC applications; first we'll create a two person chat room using the Peer. js framework, then we'll create a multiparty chat room using the simple WebRTC framework, in both cases the complexities of WebRTC are wrapped up nicely for you into an easy to use API. They're both open source to so you can dig deeper if you need to, to build a more customized app. Peer. js and simple WebRTC are just two of many options for WebRTC abstraction out there, but they're two that I found to be the most assessable, getting you up and running with your own app easily without having to set up your own signaling and servers just to get two peers to talk to each other. Let's take a look at what you need to get started building these apps, and what tools you might find useful along the way.

Create a Two-person Video Chat Using Peer.js
In this exercise we'll create a fully functional two way video chat application. You can take this code and imbed it into your own website, creating your own personal branded conference room, we'll use the Peer. js WebRTC library, which wraps up WebRTC functionality into a complete configurable and easy to use peer to peer connection API. In this example we're just using an old fashioned sneaker net, we're just using that for signaling, we're manually sharing a peer id with the person we want to chat with, you can do this via email, chat, text, or however you like, then we'll just use the free and open STUN and TURN servers to make our connections. So for this app you don't have to worry about anything, but the JavaScript and HTML. So let's start by building our HTML page.

Create a Multi-person Chat Application Using SimpleWebRTC
Creating a two person chat room is fairly straight forward, you connect two peers to each other and away you go. But once you start adding additional peers things can get tricky, you need to design the UI in a way that you can dynamically add and remove video objects as needed, and behind the scenes you need to connect all peers to each other using an efficient topography so you don't overload anyone's bandwidth. Thankfully there are frameworks that have solved some of these problems for you, one that I found to be nice and assessable is SimpleWebRTC, it's comprised of a bunch of modules that together give you a very flexible yet easy to use solution for building your own custom real-time communications apps. Let's take a quick look at the modules included with SimpleWebRTC. Signalmaster is a node. js with SocketIO powered signaling server that you can deploy yourself, SimpleWebRTC wraps and normalizes WebRTC between browsers using WebRTC. js and associated APIs, webrtcsupport allows you to check browser compatibility and grab appropriate constructors, as well as checking support for data channels. getScreenMedia extends getUserMedia to allow you to access the screen for screen sharing. MediaStream-gain gives you a simple controller for your local mikes volume, and hark is a handy little library that can detect who's speaking, like Google hangouts does, so for example you can adjust the UI like they do making the speakers video bigger. And WildEmitter handles custom events and push messages, so all of these modules are wrapped up in a simple API, let's put together a multi person chat room now using WebRTC and see how it works.