WebRTC datachannel with manual signaling, example please?

Question

I'm really struggling to get a complete example of a WebRTC datachannel example that I can copy/paste and it works.

I would like a Javascript example of WebRTC datachannel with manual signaling i.e. When the example loads, it provides the Signaling data in one text box. I copy data manually (highlight, copy) and paste it in the peer's window which has a text box to accept that signaling data. I believe there needs to be an "answer" in the signaling data, so there need to be corresponding text boxes waiting for that input as well. Thank you.

Could the example use Google's free STUN server please.

I get really confused with bit by bit examples, I want one file please, that contains the HTML and Javascript (no CSS or JQuery please). It is enough for the code to work on Chrome only. Thanks.

I think this basic question about how the data channel API works deserves a simple answer. — jib

jib jib · Accepted Answer · 2019-03-04T14:52:56

Here it is. Click the blue button below in two different tabs/windows/browsers/machines:

const config = {iceServers: [{urls: "stun:stun.1.google.com:19302"}]};
const pc = new RTCPeerConnection(config);
const dc = pc.createDataChannel("chat", {negotiated: true, id: 0});
const log = msg => div.innerHTML += `<br>${msg}`;
dc.onopen = () => chat.select();
dc.onmessage = e => log(`> ${e.data}`);
pc.oniceconnectionstatechange = e => log(pc.iceConnectionState);

chat.onkeypress = function(e) {
  if (e.keyCode != 13) return;
  dc.send(chat.value);
  log(chat.value);
  chat.value = "";
};

async function createOffer() {
  button.disabled = true;
  await pc.setLocalDescription(await pc.createOffer());
  pc.onicecandidate = ({candidate}) => {
    if (candidate) return;
    offer.value = pc.localDescription.sdp;
    offer.select();
    answer.placeholder = "Paste answer here";
  };
}

offer.onkeypress = async function(e) {
  if (e.keyCode != 13 || pc.signalingState != "stable") return;
  button.disabled = offer.disabled = true;
  await pc.setRemoteDescription({type: "offer", sdp: offer.value});
  await pc.setLocalDescription(await pc.createAnswer());
  pc.onicecandidate = ({candidate}) => {
    if (candidate) return;
    answer.focus();
    answer.value = pc.localDescription.sdp;
    answer.select();
  };
};

answer.onkeypress = function(e) {
  if (e.keyCode != 13 || pc.signalingState != "have-local-offer") return;
  answer.disabled = true;
  pc.setRemoteDescription({type: "answer", sdp: answer.value});
};

<button id="button" onclick="createOffer()">Offer:</button>
<textarea id="offer" placeholder="Paste offer here"></textarea>
Answer: <textarea id="answer"></textarea><br><div id="div"></div>
Chat: <input id="chat"><br>

Then follow these steps:

In Window A, press the Offer button and copy the offer to the clipboard.
In Window B, paste that offer into "Paste offer here" and hit the ENTER key.
Copy the answer that appears after a few seconds.
Return to window A and paste that answer where it says "Paste answer here" and hit ENTER.

You should now see a message saying you're "connected". Type in the chat box to chat!

If you and a friend exchange the offer/answer somehow, you now have a direct peer-to-peer connection. This should work around the world (modulo symmetric NATs); no data server involved.

WebRTC datachannel with manual signaling, example please?

1 Answers