DataChannel in webRtc javascript

Question

I'm facing issue in integration of video and chat in WebRtc using javascript. I'm using this example

https://github.com/oney/react-native-webrtc-server/blob/master/index.html

video is working fine but sending messages fails neither receive error!!!!. As datachannel shared in the above example as these functions:

Line #115 to 142 of above link
if (pc.textDataChannel) {
  return;
}
var dataChannel = pc.createDataChannel("text");

dataChannel.onerror = function (error) {
};

dataChannel.onmessage = function (event) {
  console.log('open state2')

  var content = document.getElementById('textRoomContent');
  content.innerHTML = content.innerHTML + '<p>' + socketId + ': ' + event.data + '</p>';
};

dataChannel.send = function (event) {
  console.log('open state2')
  exchange(event)
};

dataChannel.onopen = function () {
  console.log('open state')
  var textRoom = document.getElementById('textRoom');
  textRoom.style.display = "block";
};

dataChannel.onclose = function () {
};
pc.textDataChannel = dataChannel;

while sending message its uses :

pc.textDataChannel.send(text);//Line #218 of above link

What exactly I should implement that it works I think this send is nothing that is why message fails and video wroks

Answer 1

You should call createDataChannel before createOffer.

The simpler way is to create dataChannel as soon you create the RTCPeerConnection

var pc = new RTCPeerConnection(configuration);
var dataChannel = pc.createDataChannel("text");
...

Then createOffer will include datachannel description, in the SDP you should see something like :

m=application 9 DTLS/SCTP 5000
...
a=sctpmap:5000 webrtc-datachannel 1024