如何启动基本的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>
在第二个选项卡中打开此页面,您可以从一个选项卡与另一个选项卡(或世界各地的其他计算机)进行聊天.什么臭,你必须自己得到报价：
>按Tab A中的“优惠”按钮(仅限),等待1-20秒,直到看到优惠文字为止,
>将商品标签从标签A复制粘贴到标签B,然后按Enter键
>将选项卡B中显示的答案文本复制粘贴到选项卡A,然后按Enter键.
您现在应该能够在没有服务器的选项卡之间聊天.
正如你所看到的,这是一个低于标准的体验,这就是为什么你需要一些基本的websocket服务器来传递A / B之间的提供/回答(以及如果想要快速连接的涓冰候选者)来获取东西开始.一旦建立了连接,就可以使用数据通道进行一些额外的工作.