javascript - 如何启动基本的WebRTC数据 channel ？

如何启动基本的WebRTC数据 channel ？

到目前为止，这是我所拥有的，但它似乎甚至没有尝试连接。我确定我只是缺少一些基本的东西。

var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection || window.msRTCPeerConnection;

var peerConnection = new RTCPeerConnection({
    iceServers: [
        {url: 'stun:stun1.l.google.com:19302'},
        {url: 'stun:stun2.l.google.com:19302'},
        {url: 'stun:stun3.l.google.com:19302'},
        {url: 'stun:stun4.l.google.com:19302'},
    ]
});
peerConnection.ondatachannel  = function () {
    console.log('peerConnection.ondatachannel');
};
peerConnection.onicecandidate = function () {
    console.log('peerConnection.onicecandidate');
};

var dataChannel = peerConnection.createDataChannel('myLabel', {
});

dataChannel.onerror = function (error) {
    console.log('dataChannel.onerror');
};

dataChannel.onmessage = function (event) {
    console.log('dataChannel.onmessage');
};

dataChannel.onopen = function () {
    console.log('dataChannel.onopen');
    dataChannel.send('Hello World!');
};

dataChannel.onclose = function () {
    console.log('dataChannel.onclose');
};
console.log(peerConnection, dataChannel);

最佳答案

WebRTC 假设您有一种方法可以向您希望联系的任何人发送信号(向其发送报价字符串并从其接收答案字符串)。没有一些服务器，你将如何做到这一点？

为了说明这一点，这里有一些代码可以做除此之外的所有事情(适用于 Firefox 和 Chrome 45):

var config = { iceServers: [{ urls: "stun:stun.l.google.com:19302" }]};
var dc, pc = new RTCPeerConnection(config);
pc.ondatachannel = e => {
  dc = e.channel;
  dc.onopen = e => (log("Chat!"), chat.select());
  dc.onmessage = e => log(e.data);
}

function createOffer() {
  button.disabled = true;
  pc.ondatachannel({ channel: pc.createDataChannel("chat") });
  pc.createOffer().then(d => pc.setLocalDescription(d)).catch(failed);
  pc.onicecandidate = e => {
    if (e.candidate) return;
    offer.value = pc.localDescription.sdp;
    offer.select();
    answer.placeholder = "Paste answer here";
  };
};

offer.onkeypress = e => {
  if (e.keyCode != 13 || pc.signalingState != "stable") return;
  button.disabled = offer.disabled = true;
  var obj = { type:"offer", sdp:offer.value };
  pc.setRemoteDescription(new RTCSessionDescription(obj))
  .then(() => pc.createAnswer()).then(d => pc.setLocalDescription(d))
  .catch(failed);
  pc.onicecandidate = e => {
    if (e.candidate) return;
    answer.focus();
    answer.value = pc.localDescription.sdp;
    answer.select();
  };
};

answer.onkeypress = e => {
  if (e.keyCode != 13 || pc.signalingState != "have-local-offer") return;
  answer.disabled = true;
  var obj = { type:"answer", sdp:answer.value };
  pc.setRemoteDescription(new RTCSessionDescription(obj)).catch(failed);
};

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

var log = msg => div.innerHTML += "<p>" + msg + "</p>";
var failed = e => log(e + ", line " + e.lineNumber);

<script src="https://rawgit.com/webrtc/adapter/master/adapter.js"></script>
<button id="button" onclick="createOffer()">Offer:</button>
<textarea id="offer" placeholder="Paste offer here"></textarea><br>
Answer: <textarea id="answer"></textarea><br><div id="div"></div>
Chat: <input id="chat"></input><br>

在第二个选项卡中打开此页面，您可以从一个选项卡到另一个选项卡(或世界各地的不同机器)聊天。令人讨厌的是，您必须自己在那里获得报价:

按下选项卡A中的Offer按钮(仅)，然后等待1到20秒，直到看到报价文本

将报价文本从选项卡 A 复制粘贴到选项卡 B，然后点击 Enter

将出现在 Tab B 的答案文本复制粘贴到 Tab A，然后点击 Enter 。

您现在应该可以在没有服务器的情况下在选项卡之间聊天。

如您所见，这是一种低于标准的体验，这就是为什么您需要一些基本的 websocket 服务器来在 A 和 B 之间传递提供/答案(如果您想快速连接，还需要流冰候选)，以获取信息开始了。建立连接后，您可以为此使用数据 channel ，只需做一些额外的工作。

关于javascript - 如何启动基本的WebRTC数据 channel ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31718574/