How to use RTCDataChannel & RTCPeerConnection.js?

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

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="https://www.webrtc-experiment.com/RTCPeerConnection-v1.5.js"></script>
You JUST need to write below code! Your project will work fine on Firefox Aurora/Nightly and Chrome Canary!

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.

Feedback

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