webrtc学习笔记二（datachannel）
程序员文章站
2022-07-08 16:45:39
...
https://www.webrtc-experiment.com/DataChannel/
https://www.npmjs.com/package/datachannel.io
datachannel.io
官方：
http://www.html5rocks.com/en/tutorials/webrtc/datachannels/?redirect_from_locale=zh
本地调用的传数据的datachannel
https://www.npmjs.com/package/datachannel.io
datachannel.io
官方：
http://www.html5rocks.com/en/tutorials/webrtc/datachannels/?redirect_from_locale=zh
本地调用的传数据的datachannel
<!DOCTYPE html>
<html>
<head><title>RTCDataChannel</title></head>
<body>
<button id="startButton" onclick="createConnection()">Start</button>
<button id="sendButton" onclick="sendData()">Send</button>
<button id="closeButton" onclick="closeDataChannels()">Stop</button>
<textarea id="dataChannelSend" >abc</textarea>
<textarea id="dataChannelReceive" ></textarea>
<script type="text/javascript">
var localPeerConnection, remotePeerConnection;//用于peer跟peer之间呼叫和建立连接以便传输音视频数据流
var sendChannel, receiveChannel;//用于peer跟peer之间传输音视频之外的一般数据。
function trace(text) {
console.log((window.performance.now() / 1000).toFixed(3) + ': ' + text);
}
function createConnection() {
var servers = null;
localPeerConnection = window.localPeerConnection =new webkitRTCPeerConnection(servers,{optional: [{RtpDataChannels: true}]});
remotePeerConnection = window.remotePeerConnection = new webkitRTCPeerConnection(servers,{optional: [{RtpDataChannels: true}]});
try {
sendChannel = localPeerConnection.createDataChannel('sendDataChannel',{reliable: false});
} catch (e) {
alert('createDataChannel() failed with exception: ' + e.message);
}
localPeerConnection.onicecandidate = function(event) {
if (event.candidate) {
remotePeerConnection.addIceCandidate(event.candidate);
trace('★★★★★Local ICE candidate: \n' + event.candidate.candidate);
}
}
remotePeerConnection.onicecandidate = function(event) {
if (event.candidate) {
localPeerConnection.addIceCandidate(event.candidate);
trace('★★★Remote ICE candidate: \n ' + event.candidate.candidate);
}
};
sendChannel.onopen = trace('--Send channel open state is : ' +sendChannel.readyState);;
sendChannel.onclose = trace('--Send channel close state is: ' +sendChannel.readyState);;
remotePeerConnection.ondatachannel = function(event) {
receiveChannel = event.channel;
receiveChannel.onmessage = function(event) {
document.getElementById('dataChannelReceive').value = event.data;
};
receiveChannel.onopen = trace('--Receive channel open state is: ' + receiveChannel.readyState);;
receiveChannel.onclose = trace('--Receive channel close state is: ' + receiveChannel.readyState);;
};
localPeerConnection.createOffer(gotLocalDescription);//
}
function sendData() {
var data = document.getElementById('dataChannelSend').value;
sendChannel.send(data);
}
function closeDataChannels() {
console.log("------close");
sendChannel.close();
receiveChannel.close();
localPeerConnection.close();
remotePeerConnection.close();
localPeerConnection = null;
remotePeerConnection = null;
}
function gotLocalDescription(desc) {
trace("createOffer gotLocalDescription--->");
localPeerConnection.setLocalDescription(desc);
// trace('------|||||----Offer from localPeerConnection \n' + desc.sdp);
remotePeerConnection.setRemoteDescription(desc);
remotePeerConnection.createAnswer(gotRemoteDescription);//
}
function gotRemoteDescription(desc) {
trace("createAnswer gotRemoteDescription--->");
remotePeerConnection.setLocalDescription(desc);
//trace('------------->>>>>>>>>>>>Answer from remotePeerConnection \n' + desc.sdp);
localPeerConnection.setRemoteDescription(desc);
}
</script>
</body>
</html>