WebRTC Fundamentals

In this course, I’ll introduce you to WebRTC, a powerful open-source project that seamlessly enables real-time communication (RTC) – baked right into modern web browsers. In this course, I'll show you what you can do with WebRTC and walk you through creating peer-to-peer video chatrooms, with no plug-ins required.
Course info
Rating
(321)
Level
Intermediate
Updated
Feb 20, 2014
Duration
1h 40m
Table of contents
Description
Course info
Rating
(321)
Level
Intermediate
Updated
Feb 20, 2014
Duration
1h 40m
Description

WebRTC is a powerful new open-source project that seamlessly enables real-time communication (RTC) – baked right into modern web browsers. This means web developers can now incorporate video, voice and data sharing using peer-to-peer connectivity via simple JavaScript APIs, with no plugins or additional installs required. In this course, Lisa Larson-Kelley introduces you to the fundamentals of WebRTC, explaining its elements and capabilities in easy-to-understand terms, and gets you started building simple ‘hello world’ applications using the WebRTC API. With over 10 years of experience building RTC apps using Flash Media Server, Lisa brings her perspective and enthusiasm for RTC to this rapidly emerging open source technology that is poised revolutionize how we communicate on the web.

About the author
About the author

Lisa is a consultant, teacher, and speaker with a passion for empowering people with knowledge, and supporting them in making their goals and aspirations a reality. Whether it's a technology startup, a major corporation, or an entrepreneur with a dream, she lights up the path to success.

More from the author
Taking The Leap from Flash to HTML5 Video
Intermediate
2h 48m
22 Aug 2013
Section Introduction Transcripts
Section Introduction Transcripts

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.