Getting Started with WebRTC: If you have basic HTML and JavaScript, you're well on the way to adding real time, peer-to-peer communication to your web applications using WebRTC. This book shows you how through a totally practical, structured course.

Although the basis of WebRTC communication is peer-to-peer, the initial step of setting up this communication requires some sort of coordination. This is most commonly provided by a web server and/or a signaling server. This enables two or more WebRTC capable devices or peers to find each other, exchange contact details, negotiate a session that defines how they will communicate, and then finally establish the direct peer-to-peer streams of media that flows between them.

The MediaStream API is designed to allow you to access streams of media from local input devices, such as cameras and microphones. It was initially focused upon the getUserMedia API or gUM for short, but has now been formalized as the broader media capture and streams API, or MediaStream API for short. However, the getUserMedia() method is still the primary way to initiate access to local input devices.

Each MediaStream object can contain a number of different MediaStreamTrack objects that each represents different input media, such as video or audio from different input sources.

Each MediaStreamTrack can then contain multiple channels (for example, the left and right audio channels). These channels are the smallest units that are defined by the MediaStream API.

MediaStream objects can then be output in two key ways. First, they can be used to render output into a MediaElement such as a <video> or <audio> element (although the latter may require pre-processing...

The RTCPeerConnection API is the heart of the peer-to-peer connection between each of the WebRTC enabled browsers or peers. To create an RTCPeerConnection object, you use the var peerconnection = RTCPeerConnection(configuration); constructor. The configuration variable contains at least one key named iceServers, which is an array of URL objects that contain information about STUN, and possibly TURN servers, used during the finding candidates phase.

The peerconnection object is then used in slightly different ways on each client, depending upon whether you are the caller or the callee.

As well as sending media streams between peers using WebRTC, it is also possible to use the DataChannel API to send arbitrary streams of data. Although many people commonly refer to this as the RTCDataChannel API, it is more accurately defined as just the WebRTC DataChannel API and is created by using the var datachannel = peerconnection.createDataChannel(label); constructor. It is a very flexible and powerful solution that has been specifically designed to be similar to the WebSocket API through the send() method and the onmessage event.

At the time of writing this chapter, this API is still in a state of flux with the varying browser implementations still struggling with standardization.

You should now have a clear overview of the various APIs and protocols that combine to make WebRTC work.

Throughout the rest of the book, we will explore the MediaStream, RTCPeerConnection, and RTCDataChannel APIs in more detail as we work to apply these concepts to real world examples.

First, we will start by fleshing out the simple peer-to-peer video call scenario into a fully working application.

Then, we will explore how this can be simplified down to just an audio only call or extended with text-based chat and file sharing.

And then, we will explore two real-world application scenarios based upon e-learning and team communication.