如何啟動基本的WebRTC數據通道？

Question

如何啟動基本的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);

Answer 1

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中的“ Offer按鈕（僅限）並等待1-20秒，直到看到要約文本為止，
• 將商品 - 文本從標簽A復制粘貼到標簽B，然后Enter
• 將選項卡B中顯示的答案文本復制粘貼到選項卡A，然后Enter 。

您現在應該能夠在沒有服務器的選項卡之間聊天。

正如你所看到的，這是一個低於標准的體驗，這就是為什么你需要一些基本的websocket服務器來傳遞提議/答案（以及如果你想快速連接的涓流冰候選人）A和B之間的事情開始。 一旦建立了連接，就可以使用數據通道進行一些額外的工作。