Wie starte ich einen grundlegenden WebRTC-Datenkanal?

Question

Wie startet man einen grundlegenden WebRTC-Datenkanal? Diese

ist, was ich habe, so weit, aber es scheint nicht einmal zu versuchen und zu verbinden. Ich bin mir sicher, dass ich etwas Grundlegendes vermisse.

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 vorausgesetzt, dass Sie eine Möglichkeit haben, (ein Angebot-String senden und eine Antwort-String aus zu erhalten), um zu signalisieren, wen Sie kontaktieren möchten. Ohne einen Server, wie willst du das machen?

zu illustrieren, hier ist ein Code, der alles tut, aber das (funktioniert in Firefox und 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>

öffnen Seite in einer zweiten Registerkarte und Sie können chatten aus ein Tab zum anderen (oder zu einem anderen Rechner auf der ganzen Welt). Was stinkt ist, dass Sie das Angebot bekommen muss es selbst:

• Drücken Sie die Taste Offer in Tab A (nur) und 1-20 Sekunden warten, bis Sie das Angebot Text sehen,
• copy-paste das Angebot -Text von Tab A bis Tab B, und drücken Sie Enter
• copy-paste die Antwort-Text, der von Tab B Tab A erscheint, und drücken Sie Enter.

Sie sollten nun in der Lage sein, ohne einen Server zwischen den Registerkarten zu chatten.

Wie Sie sehen können, ist dies ein unterdurchscnittlich Erfahrung, weshalb Sie einige grundlegende websocket Server benötigen, ist Angebot/Antwort passieren (wie auch Rinnsal Eis Kandidaten, wenn Sie wollen eine Verbindung passieren schnell) zwischen A und B , um Dinge zu beginnen. Sobald Sie eine Verbindung haben, können Sie dafür Datenkanäle verwenden, mit ein wenig zusätzlicher Arbeit.