Comprehensive guide to WebRTC. Part 5/5.

In this tutorial, we are going to focus on the transferring arbitrary data using WebRTC Data Channel Protocol.

The WebRTC introduces the SCTP (Stream Control Transmission Protocol) as a way of sending data through the peer connection. SCTP is built on top of the DTLS (Datagram Transport Layer Security), which is sitting on top of the UDP stack.

We can establish the RTCDataChannel API this way:

And that’s it! The RTCDataChannel is established. This will happen once signaling has been performed and the connection has been successfully created.

The data channel can be in the following states:
1. connecting A default state, data channel waits for a connection.
2. open The connection is established.
3. closing The channel is being destroyed.
4. closed The channel is closed and communication is not possible.

When the other peer creates a channel, the ondatachannel event of the RTCPeerConnection object is fired. The RTCDataChannel object also provides a few straightforward events:

You can configure your data channel options using the second parameter in the constructor. They are:
1. reliable Guarantee or not message delivery. (TCP or UDP)
2. ordered Whether messages should be sent and received the right order.
3. maxRetransmitTime Max time to resend a failed message.
4. maxRetransmits Max number of times to resend a failed message.
5. protocol Will force a different subprotocol. Will show an error if it is not supported.
6. negotiated Whether the developer is responsible for creating data channels on both peers or the browser should perform this step automatically.
7. id Channel ID

The send method of the data channel allows to send different javascript types over the transport layer:
1. String A simpe javascript string
2. Blob A file-like format of raw data
3. ArrayBuffer A typed-array
4. ArrayBufferView A view frame of the ArrayBuffer

You can identify the type this way:

So let’s add a text chat in our application. It will look something like this:


Run our signaling server, which we created in part 3. Add the following index.html file:

Add the following client.js file:

Then login with 2 users. Call one to another and try to send messages. This example works for Chome only.

That’s all. Hope this series was helpful to you.

Leave a Reply

Your email address will not be published. Required fields are marked *