Question

我正在尝试使用WebRTC设置对等文件共享系统。我能够在每一侧打开数据通道，但我无法从一个用户向另一个用户发送消息。此外，如果一个对等体关闭了另一个对等体，则只为该用户触发onclose事件。

使用webRTC设置和使用数据通道的正确方法是什么？

你能告诉我我的代码中有什么错误或缺失吗？

//create RTC peer objet.
var RTCPeerConnection = webkitRTCPeerConnection;
var RTCIceCandidate = window.RTCIceCandidate;
var RTCSessionDescription = window.RTCSessionDescription;

var iceServers = {
    iceServers: [{
        url: 'stun:stun.l.google.com:19302'
    }]
};
var p2p_connection = new RTCPeerConnection({
      iceServers: [
        { 'url': (IS_CHROME ? 'stun:stun.l.google.com:19302' : 'stun:23.21.150.121') }
  ]
});

// send offer (only executes in one browser)
function initiateConnection() {
    p2p_connection.createOffer(function (description) {
        p2p_connection.setLocalDescription(description);
        server_socket.emit('p2p request', description,my_username);
    });
};

// receive offer and send answer
server_socket.on('p2p request', function(description,sender){ 
    console.log('received p2p request');

    p2p_connection.setRemoteDescription(new RTCSessionDescription(description));

    p2p_connection.createAnswer(function (description) {
        p2p_connection.setLocalDescription(description);
        server_socket.emit('p2p reply', description,sender);
    });
});

// receive answer
server_socket.on('p2p reply', function(description,sender){
    console.log('received p2p reply');
    p2p_connection.setRemoteDescription(new RTCSessionDescription(description));
});

// ICE candidates
p2p_connection.onicecandidate = onicecandidate; // sent event listener

// locally generated
function onicecandidate(event) {
    if (!p2p_connection || !event || !event.candidate) return;
    var candidate = event.candidate;
    server_socket.emit('add candidate',candidate,my_username);
}

// sent by other peer
server_socket.on('add candidate', function(candidate,my_username){

    p2p_connection.addIceCandidate(new RTCIceCandidate({
            sdpMLineIndex: candidate.sdpMLineIndex,
            candidate: candidate.candidate
    }));
});

// data channel 
var dataChannel = p2p_connection.createDataChannel('label');

dataChannel.onmessage = function (event) {
    var data = event.data;
    console.log("I got data channel message: ", data);
};

dataChannel.onopen = function (event) {
    console.log("Data channel ready");
    dataChannel.send("Hello World!");
};
dataChannel.onclose = function (event) {
    console.log("Data channel closed.");
};
dataChannel.onerror = function (event) {
    console.log("Data channel error!");
}

更新

在那里找到解决方案：http://www.html5rocks.com/en/tutorials/webrtc/basics/

p2p_connection.ondatachannel = function (event) {
    receiveChannel = event.channel;
    receiveChannel.onmessage = function(event){
    console.log(event.data);
    };
};

Answer 1

您可以考虑使用simple-peer库来避免将来处理这些复杂问题。 WebRTC API调用令人困惑，订购有时很难做到。

simple-peer支持视频/语音流，数据通道（文本和二进制数据），您甚至可以将数据通道用作node.js样式的双工流。它还支持高级选项，例如禁用涓流ICE候选者（因此每个客户端只需要发送一个提供/应答消息而不是许多重复的冰候选消息）。它没有见解，适用于任何后端。

https://github.com/feross/simple-peer

Answer 2

抽象！

https://github.com/feross/simple-peer（@ Feross上面已指出）
https://github.com/rtc-io/rtc-mesh
https://github.com/dominictarr/scuttlebutt
https://github.com/mafintosh/peervision
https://github.com/muaz-khan/DataChannel

使用webRTC在两个对等体之间创建和使用数据通道

2 个答案: