帶有手動信令的WebRTC數據通道，請舉例？

Question

我真的很難得到一個 WebRTC 數據通道示例的完整示例，我可以復制/粘貼它並且它可以工作。

我想要一個帶有手動信令的 WebRTC 數據通道的 Javascript 示例，即當示例加載時，它在一個文本框中提供信令數據。 我手動復制數據（突出顯示，復制）並將其粘貼到對等窗口中，該窗口具有一個文本框來接受該信令數據。 我相信信令數據中需要有一個“答案”，因此也需要有相應的文本框等待該輸入。 謝謝你。

該示例能否使用 Google 的免費 STUN 服務器。

我對點點滴滴的示例感到非常困惑，我想要一個包含 HTML 和 Javascript 的文件（請不要使用 CSS 或 JQuery）。 代碼僅在 Chrome 上運行就足夠了。 謝謝。

Answer 1

這里是。 在兩個不同的選項卡/窗口/瀏覽器/機器中單擊下面的藍色按鈕：

 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. 在窗口 B 中，將該報價粘貼到“在此處粘貼報價”並按 ENTER 鍵。
3. 復制幾秒鍾后出現的答案。
4. 返回窗口 A 並將該答案粘貼到“在此處粘貼答案”的位置，然后按 ENTER。

您現在應該會看到一條消息，說您已“已連接”。 在聊天框中輸入聊天內容！

如果您和朋友以某種方式交換了報價/答案，您現在就擁有了直接的點對點連接。 這應該適用於世界各地（模對稱 NAT）； 不涉及數據服務器。