How to use RTCDataChannel & RTCPeerConnection.js?

This tutorial is out-dated (written in 2013). Please check this tutorial instead: https://codelabs.developers.google.com/codelabs/webrtc-web/#0

| 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 ↑

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](#channel). **send** ('A simple text message');[channel](#channel). **send** ( 
    JSON. **stringify** ( **{ message: "A simple object" }** ) 
);// or otherwisepeer. **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:

Copy

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

Send MessageEnter your email too; if you want "direct" reply!