How to use RTCDataChannel & RTCPeerConnection.js?

HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?

This tutorial is out-dated (written in 2013). Please check this tutorial instead:
If you're newcomer, newbie or beginner; you're suggested to try RTCMultiConnection.js or DataChannel.js libraries.
Are you interested in a "simple" guide about RTCDataChannel? Read this document.
If you're new to WebRTC; please read this document.
Here is a simple one-page chat demo uses RTCDataChannel APIs. View Source Code
First of all, you need to reference this js-wrapper file for RTCWeb APIs:
<script src=""></script>
You JUST need to write below code! Your project will work fine on Firefox Aurora/Nightly and Chrome Canary!


You need to use offer/answer model to exchange SDP/ICE. For "offerer": use code like this:
var peer = RTCPeerConnection({
    onICE: function (candidate) {},
    onOfferSDP: function(sdp) {},

    onChannelMessage: function(event) {
        /* */ 
        /* or → JSON.parse( ) */ 
    onChannelOpened: function(channel) { = channel;
Here is the short explanation of above code ↑
  1. onICE: It returns locally generated ICE candidates; so you can share them with other peer(s).
    candidate object contains two properties:
    1. candidate.sdpMLineIndex
    2. candidate.candidate
  2. onOfferSDP: returns offer sdp; so you can send it to other peer to get answer sdp.
  3. onChannelMessage: The message sent by other peer/channel.
  4. onChannelOpened: On data channel gets ready. It returns channel object.

You can send messages like this:
channel.send('A simple text message');
    JSON.stringify({ message: "A simple object" }) 

// or otherwise

peer.sendData('A simple text message');
    JSON.stringify({ message: "A simple object" }) 

Some extra options:
var peer = RTCPeerConnection({
    // On DataChannel close event fires
    onChannelClosed      : function(event) {},
    // On DataChannel Error
    onChannelError       : function(event) {},
    // channel name; by default it is "RTCDataChannel"
    channel               : 'ABCDEF',
    // Extend second argument passed to RTCPeerConnection object
    optional             : { optional: [{ RtpDataChannels: true}] }

By default optional value is "{ optional: [{ RtpDataChannels: true}] }" --- so you don't need to change it.
You don't need to attach client stream. You JUST need to exchange SDP/ICE and that's all you need to do!!
YOU can use WebSocket or XHR for SDP/ICE exchange.

On Getting Answer SDP:

Now assume that other peer generated answer sdp and sent to you; you can pass that sdp to this function:
peer.addAnswerSDP( answer_sdp );

On Getting ICE:

Now assume that other peer generated ICE and sent to you; you can pass that ICE to this function:
    sdpMLineIndex 	: candidate.sdpMLineIndex,
    candidate 		: candidate.candidate


99% process is the same for peer who "creates answer sdp"; the only difference is: for that peer you don't need "onOfferSDP" and also you don't need to call "peer.addAnswerSDP( answer_sdp );". What extra you need to do is here:
var peer = RTCPeerConnection({
    // see below two additions ↓
    offerSDP      	: offer_sdp,
    onAnswerSDP   	: function(sdp) {},
    onICE     		: function (candidate) {},
    onChannelMessage    : function(event) {
        /* */ 
        /* or → JSON.parse( ) */ 
    onChannelOpened       : function(channel) {}

Let me elaborate:
  1. offerSDP: you need to pass offer sdp sent by other peer (offerer).
  2. onAnswerSDP: returns answer sdp so you can send it to other peer (offerer).
Note: For a detailed document about "How to write a realtime WebRTC app using or WebSocket?" click here.
Are you interested in a "simple" guide about RTCDataChannel? Read this document.


Enter your email too; if you want "direct" reply!