繁体   English   中英

带有手动信令的WebRTC数据通道,请举例?

[英]WebRTC datachannel with manual signaling, example please?

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

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

该示例能否使用 Google 的免费 STUN 服务器。

我对点点滴滴的示例感到非常困惑,我想要一个包含 HTML 和 Javascript 的文件(请不要使用 CSS 或 JQuery)。 代码仅在 Chrome 上运行就足够了。 谢谢。

这里是。 两个不同的选项卡/窗口/浏览器/机器中单击下面的蓝色按钮:

 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); 不涉及数据服务器。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM