如何启动基本的WebRTC数据通道？
这是我到目前为止所拥有的，但它似乎甚至没有尝试连接。我确信我只是缺少一些基本的东西。
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>
在第二个选项卡中打开此页面，您可以从一个选项卡与另一个选项卡（或与世界各地的另一台计算机）聊天。糟糕的是你必须自己去那里拿到offer：
- 按
Offer按钮（仅限选项卡 A）并等待 1-20 秒，直到您看到优惠文本，
- 将报价文本从选项卡 A 复制粘贴到选项卡 B，然后点击
Enter
- 将选项卡 B 中出现的答案文本复制粘贴到选项卡 A，然后点击
Enter.
您现在应该能够在选项卡之间聊天，而无需服务器。
正如你所看到的，这是一种低于标准的体验，这就是为什么你需要一些基本的 websocket 服务器来在 A 和 B 之间传递报价/答案（以及滴流冰候选人，如果你想快速连接），以获得东西开始了。一旦建立连接，您就可以使用数据通道来实现此目的，但需要做一些额外的工作。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
