webrtc学习笔记二（datachannel）

最新推荐文章于 2025-11-14 02:45:52 发布

原创最新推荐文章于 2025-11-14 02:45:52 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webrtc

webrtc 专栏收录该内容

9 篇文章

订阅专栏

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


<!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>