How to use RTCDataChannel & RTCPeerConnection.js?

Are you interested in a "simple" guide about RTCDataChannel? Read this document.

If you're new to WebRTC; please read this document.

First of all, you need to reference this js-wrapper file for RTCWeb APIs:

Offerer

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) {
        /* event.data */ 
        /* or → JSON.parse( event.data ) */ 
     },
    onChannelOpened: function(channel) {
        window.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');
channel.send( 
    JSON.stringify({ message: "A simple object" }) 
);

// or otherwise

peer.sendData('A simple text message');
peer.sendData( 
    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:

peer.addICE({
    sdpMLineIndex 	: candidate.sdpMLineIndex,
    candidate 		: candidate.candidate
});

Answerer

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) {
        /* event.data */ 
        /* or → JSON.parse( event.data ) */ 
     },
    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 socket.io or WebSocket?" click here.

Are you interested in a "simple" guide about RTCDataChannel? Read this document.