2014-12-03 53 views
4

我正在嘗試使用WebRTC來建立對等文件共享系統。我可以在每一邊打開一個數據通道,但是我不能將消息從一個用戶發送到另一個用戶。而且,如果一個節點關閉該頻道,另一個節點只會爲該用戶觸發onclose事件。使用WebRTC在兩個對等點之間創建和使用數據通道

什麼是使用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); 
    }; 
}; 
+0

很高興你能找到你的答案:)。繼續發佈你自己的答案,你可以爲了後代而接受它。 – 2014-12-04 02:32:33

回答

1

你可能會考慮使用simple-peer庫,以避免處理這些在未來的複雜性。 WebRTC API調用很混亂,而且排序有時很難正確。

simple-peer支持視頻/語音流,數據通道(文本和二進制數據),甚至可以使用數據通道作爲node.js樣式的雙工流。它還支持高級選項,如禁用滴流ICE候選項(因此每個客戶端只需發送一個要約/應答消息,而不是許多重複的候選冰消息)。它沒有固執己見,可以與任何後端一起工作。

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

相關問題