Chapter 6. Sending Data with WebRTC

Up to this point, we have focused solely on the audio and video capabilities of WebRTC. However, there is an entire subject that we have not even started to talk about— arbitrary data. It turns out that WebRTC is good at transferring data; not just audio and video streams, but any data we might have.

In this chapter, we are going to cover the WebRTC Data Channel Protocol and how it can be utilized in our communication application. Over the course of this chapter, we will cover the following topics:

• How the data channel fits into the WebRTC puzzle

• How to create a data channel object from a peer connection

• What are the encryption and security concerns

• What are the potential use cases for the data channel

Stream Control Transmission Protocol and data transportation

As it turns out, sending data over a peer connection is somewhat of a hard task. Typically, sending data between users today is done through the use of a strict TCP connection. This means using technologies such as AJAX and WebSockets to send data to a server and then receive it at the other end. This can often be a slow and cumbersome issue for high-performance applications. To transfer data between the two users, the developer has to pay for a server network to do this for them. This can be expensive since even a small distributed network of servers can cost thousands of dollars a month.

In our WebRTC model, we have already covered the need for a higher speed, lower latency connection between users. With this connection, we have the ability to send audio and video data quickly between our peers. The protocol used today for audio and video data, however, is specifically designed for frames of a video and audio stream. This is why...

The RTCDataChannel object

Now that we understand the underlying technologies at play, we can start learning how the actual RTCDataChannel object API works. The great thing is that this API is much less complex than the underlying workings of the SCTP. The main function to create a channel comes from an already established RTCPeerConnection object:

var peerConnection = new RTCPeerConnection();

// Establish your peer connection using signaling here

var dataChannel = peerConnection.createDataChannel("myLabel", dataChannelOptions);

This is all you need to get started! The WebRTC API will take care of everything else on the browser's internal layer. This will all happen once signaling has been performed and the connection has been established. You can create a data channel at any point in the process until the RTCPeerConnection object is closed. Though it is closed, it will throw an error when trying to create a new channel.

There are a number of states that a data channel can be in:

• connecting...

Encryption and security

Having messages transmitted in a secure way is one of high importance for the designers of the WebRTC protocol. The reasoning behind this is that many large companies would not consider using a WebRTC application without the right level of security implementation. To get the widest adoption rate possible meant that security had to be implemented right into the design of the API itself.

One thing that you will notice in working with WebRTC is that encryption has been made a mandatory process for all implementations of the protocol. This means that each and every peer connection created between browsers is automatically using a good level of security. The encryption technology used had to satisfy several requirements for being used in peer applications:

• Messages should not be readable if they are stolen while in transit between peers

• A third party should not be able to forge messages to look as if they were sent by the connected peer

• Messages should not be editing-enabled...

Adding text-based chat

Now we will use what we have learned in this chapter to add data channel support to our communication application. Since the data channel can be used for any arbitrary data, we are going to add text-based chat as another feature of our application. The users will have a text box to enter a message into and a display of all the messages in the current call. When we are finished, it will end up looking something similar to this:

To get started, we will change the call page of our application. We will add three new elements—an input text field, a button, and a div. The input area and button will allow the user to enter text while div will hold all the messages between each user.

<div id="call-page" class="page">
      <video id="yours" autoplay></video>
      <video id="theirs" autoplay></video>
      <input type="text" id="their-username" />
      <button id="call">Call</button>
      <button id="hang-up">Hang Up<...

Use cases

This is just the tip of the iceberg when using the WebRTC data channel. Adding text-based chat is the easiest extension of the protocol with what we have learned so far. Since the specification is just the arbitrary data between two users, the possibilities are almost limitless with what you can do.

Gaming is one of the first logical extensions of the data channel protocol. In fact, peer-to-peer networking has been a common sight in many multiplayer games. Previously, games such as Quake 3 relied on peer-to-peer networks to send data between players when playing a game. The reasons behind this were the server cost and speed of transport.

With each player paying the expense of their Internet connection, this meant that the company did not have to implement complex servers to transfer data back and forth. Games could be played on any network where computers could reach each other over the Internet. It also gave the fastest speed of transportation at a time when local area networks...

Self-test questions

Q1. The data channel is not encrypted or secured at all, making it easy for hackers to modify the data being sent between users. True or false?

Q2. Which is not a correct state that RTCDataChannel can be in?

1. reconnecting

2. closed

3. connecting

4. open

Q3. The data channel can be run in reliable, unreliable, ordered, and unordered modes, giving it robust data transfer capabilities. True or false?

Q4. The biggest reason why TLS is not used in a WebRTC application is because of how hard it is to implement. True or false?

Q5. Common use cases for RTCDataChannel could include:

1. Multiplayer gaming

2. File transferring

3. Delivering content

4. All of the above

Summary

Upon finishing this chapter, you should have a firm grasp of yet another piece of the WebRTC puzzle—data transfer. It is an often overlooked, yet extremely powerful part of the WebRTC specification that can bring new light to web-based applications. In this chapter, we have used the data channel to bring text-based chat to our currently running WebRTC demo.

Now, you can officially say goodbye to our communication application, as this is the last time you will see it while reading this book. It is quite an amazing feat that we built over the course of just a few hundred pages. Not only have we built a multiuser application, but also one with many of the features found in popular communication applications built and used all over the world. This is really the power of not only web applications but also WebRTC.

If you have not done so already, this is yet another great opportunity to put down this book and start experimenting with our example. From here, there are a number of features...