WebRTC数据通道带有手动信号，请举例？

Question

我真的很难得到一个WebRTC数据通道示例的完整示例，我可以复制/粘贴它的工作原理。

我想要一个带有手动信号的WebRTC数据通道的Javascript示例，即当示例加载时，它在一个文本框中提供信令数据。我手动复制数据（突出显示，复制）并将其粘贴到对等框的窗口中，该窗口有一个文本框以接受该信令数据。我相信在信令数据中需要有一个“答案”，因此需要有相应的文本框等待该输入。谢谢。

该示例是否可以使用Google的免费STUN服务器。

我对一点一滴的例子感到困惑，我想要一个文件，包含HTML和Javascript（请不要使用CSS或JQuery）。代码仅适用于Chrome就足够了。谢谢。

Answer 1

这里是。点击下面two不同标签/窗口/浏览器/机器中的蓝色按钮：

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>

然后按照下列步骤操作

1. 在窗口A中，按Offer按钮并将商品复制到剪贴板。
2. 在Window B中，将该商品粘贴到“Paste offer here”并点击ENTER键。
3. 复制几秒钟后出现的答案。
4. 返回到窗口A并将答案粘贴到“在此处粘贴答案”，然后按ENTER键。

您现在应该看到一条消息说您已“连接”。输入聊天框进行聊天！

如果您和朋友以某种方式交换提议/答案，您现在可以直接进行点对点连接。这应该适用于全世界（模对称NAT）;没有涉及数据服务器。