ctrox/dc.html

## dc.html
<!DOCTYPE html>
<title>Data Channel Demo 1</title>
<style>
button {
  font: 18px sans-serif;
  padding: 8px;
}
textarea {
  font-family: monospace;
  margin: 2px;
  width: 480px;
  height: 640px;
}
#left { position: absolute; left: 0; top: 0; width: 50%; }
#right { position: absolute; right: 0; top: 0; width: 50%; }

</style>
</head>
<body>
<div id="left">
<br>
<h2>Send data</h2>
<textarea id="dataChannelSend" rows="5" cols="15" disabled="true">
</textarea><br>
<input type="file" id="fileToSend"></input><br>
<button id="startButton" onclick="createConnection()">Start</button>
<button id="sendButton" onclick="sendData()">Send Data</button>
<button id="sendFileButton" onclick="sendFile()">Send File</button>
<button id="closeButton" onclick="closeDataChannels()">Stop Send Data
</button>
<br>
</div>
<div id="right">
<br>
<h2>Received Data</h2>
<textarea id="dataChannelReceive" rows="5" cols="15" disabled="true">
</textarea><br>
</div>
<script>
var pc1, pc2, sendChannel, receiveChannel;
startButton.disabled = false;
sendButton.disabled = true;
sendFileButton.disabled = true;
closeButton.disabled = true;

function trace(text) {
  // This function is used for logging.
  if (text[text.length - 1] == '\n') {
    text = text.substring(0, text.length - 1);
  }
  console.log((performance.now() / 1000).toFixed(3) + ": " + text);
}

function createConnection() {
  var servers = null;
  pc1 = new webkitRTCPeerConnection(servers,
                                    {optional: [{DtlsSrtpKeyAgreement: true}]});
  trace('Created local peer connection object pc1');

  try {
    // Reliable Data Channels not yet supported in Chrome
    // Data Channel api supported from Chrome M25.
    // You need to start chrome with  --enable-data-channels flag.
    sendChannel = pc1.createDataChannel("sendDataChannel",
                                         {});
    trace('Created send data channel');
  } catch (e) {
    alert('Failed to create data channel. ' +
          'You need Chrome M25 or later with --enable-data-channels flag');
    trace('Create Data channel failed with exception: ' + e.message);
  }
  pc1.onicecandidate = iceCallback1;
  sendChannel.onopen = onSendChannelStateChange;
  sendChannel.onclose = onSendChannelStateChange;

  pc2 = new webkitRTCPeerConnection(servers,
                                    {optional: [{DtlsSrtpKeyAgreement: true}]});
  trace('Created remote peer connection object pc2');

  pc2.onicecandidate = iceCallback2;
  pc2.ondatachannel = receiveChannelCallback;

  pc1.createOffer(gotDescription1);
  startButton.disabled = true;
  closeButton.disabled = false;
}

function sendData() {
  var data = document.getElementById("dataChannelSend").value;
  sendChannel.send(data);
  trace('Sent Data: ' + data);
}

function sendFile() {
  var file = document.getElementById("fileToSend").files[0];
  var reader = new FileReader();

  reader.onload = (function(file) {
    if(reader.readyState == FileReader.DONE)
      sendChannel.send(file.target.result);
      trace("Sent File");
    });

  reader.readAsArrayBuffer(file);
}

function closeDataChannels() {
  trace('Closing data Channels');
  sendChannel.close();
  trace('Closed data channel with label: ' + sendChannel.label);
  receiveChannel.close();
  trace('Closed data channel with label: ' + receiveChannel.label);
  pc1.close();
  pc2.close();
  pc1 = null;
  pc2 = null;
  trace('Closed peer connections');
  startButton.disabled = false;
  sendButton.disabled = true;
  sendFileButton.disabled = true;
  closeButton.disabled = true;
  document.getElementById("dataChannelSend").value = "";
  document.getElementById("dataChannelReceive").value = "";
  document.getElementById("dataChannelSend").disabled = true;
}

function gotDescription1(desc) {
  pc1.setLocalDescription(desc);
  trace('Offer from pc1 \n' + desc.sdp);
  pc2.setRemoteDescription(desc);
  pc2.createAnswer(gotDescription2);
}

function gotDescription2(desc) {
  pc2.setLocalDescription(desc);
  trace('Answer from pc2 \n' + desc.sdp);
  pc1.setRemoteDescription(desc);
}

function iceCallback1(event) {
  trace('local ice callback');
  if (event.candidate) {
    pc2.addIceCandidate(event.candidate);
    trace('Local ICE candidate: \n' + event.candidate.candidate);
  }
}

function iceCallback2(event) {
  trace('remote ice callback');
  if (event.candidate) {
    pc1.addIceCandidate(event.candidate);
    trace('Remote ICE candidate: \n ' + event.candidate.candidate);
  }
}

function receiveChannelCallback(event) {
  trace('Receive Channel Callback');
  receiveChannel = event.channel;
  receiveChannel.onmessage = onReceiveMessageCallback;
  receiveChannel.onopen = onReceiveChannelStateChange;
  receiveChannel.onclose = onReceiveChannelStateChange;
}

function onReceiveMessageCallback(event) {
  trace('Received Message');
  document.getElementById("dataChannelReceive").value = event.data;
}

function onSendChannelStateChange() {
  var readyState = sendChannel.readyState;
  trace('Send channel state is: ' + readyState);
  if (readyState == "open") {
    document.getElementById("dataChannelSend").disabled = false;
    sendButton.disabled = false;
    sendFileButton.disabled = false;
    closeButton.disabled = false;
  } else {
    document.getElementById("dataChannelSend").disabled = true;
    sendButton.disabled = true;
    sendFileButton.disabled = true;
    closeButton.disabled = true;
  }
}

function onReceiveChannelStateChange() {
  var readyState = receiveChannel.readyState;
  trace('Receive channel state is: ' + readyState);
}

</script>
</body>
</html>
	<!DOCTYPE html>
	<title>Data Channel Demo 1</title>
	<style>
	button {
	font: 18px sans-serif;
	padding: 8px;
	}
	textarea {
	font-family: monospace;
	margin: 2px;
	width: 480px;
	height: 640px;
	}
	#left { position: absolute; left: 0; top: 0; width: 50%; }
	#right { position: absolute; right: 0; top: 0; width: 50%; }

	</style>
	</head>
	<body>
	<div id="left">
	<br>
	<h2>Send data</h2>
	<textarea id="dataChannelSend" rows="5" cols="15" disabled="true">
	</textarea><br>
	<input type="file" id="fileToSend"></input><br>
	<button id="startButton" onclick="createConnection()">Start</button>
	<button id="sendButton" onclick="sendData()">Send Data</button>
	<button id="sendFileButton" onclick="sendFile()">Send File</button>
	<button id="closeButton" onclick="closeDataChannels()">Stop Send Data
	</button>
	<br>
	</div>
	<div id="right">
	<br>
	<h2>Received Data</h2>
	<textarea id="dataChannelReceive" rows="5" cols="15" disabled="true">
	</textarea><br>
	</div>
	<script>
	var pc1, pc2, sendChannel, receiveChannel;
	startButton.disabled = false;
	sendButton.disabled = true;
	sendFileButton.disabled = true;
	closeButton.disabled = true;

	function trace(text) {
	// This function is used for logging.
	if (text[text.length - 1] == '\n') {
	text = text.substring(0, text.length - 1);
	}
	console.log((performance.now() / 1000).toFixed(3) + ": " + text);
	}

	function createConnection() {
	var servers = null;
	pc1 = new webkitRTCPeerConnection(servers,
	{optional: [{DtlsSrtpKeyAgreement: true}]});
	trace('Created local peer connection object pc1');

	try {
	// Reliable Data Channels not yet supported in Chrome
	// Data Channel api supported from Chrome M25.
	// You need to start chrome with --enable-data-channels flag.
	sendChannel = pc1.createDataChannel("sendDataChannel",
	{});
	trace('Created send data channel');
	} catch (e) {
	alert('Failed to create data channel. ' +
	'You need Chrome M25 or later with --enable-data-channels flag');
	trace('Create Data channel failed with exception: ' + e.message);
	}
	pc1.onicecandidate = iceCallback1;
	sendChannel.onopen = onSendChannelStateChange;
	sendChannel.onclose = onSendChannelStateChange;

	pc2 = new webkitRTCPeerConnection(servers,
	{optional: [{DtlsSrtpKeyAgreement: true}]});
	trace('Created remote peer connection object pc2');

	pc2.onicecandidate = iceCallback2;
	pc2.ondatachannel = receiveChannelCallback;

	pc1.createOffer(gotDescription1);
	startButton.disabled = true;
	closeButton.disabled = false;
	}

	function sendData() {
	var data = document.getElementById("dataChannelSend").value;
	sendChannel.send(data);
	trace('Sent Data: ' + data);
	}

	function sendFile() {
	var file = document.getElementById("fileToSend").files[0];
	var reader = new FileReader();

	reader.onload = (function(file) {
	if(reader.readyState == FileReader.DONE)
	sendChannel.send(file.target.result);
	trace("Sent File");
	});

	reader.readAsArrayBuffer(file);
	}

	function closeDataChannels() {
	trace('Closing data Channels');
	sendChannel.close();
	trace('Closed data channel with label: ' + sendChannel.label);
	receiveChannel.close();
	trace('Closed data channel with label: ' + receiveChannel.label);
	pc1.close();
	pc2.close();
	pc1 = null;
	pc2 = null;
	trace('Closed peer connections');
	startButton.disabled = false;
	sendButton.disabled = true;
	sendFileButton.disabled = true;
	closeButton.disabled = true;
	document.getElementById("dataChannelSend").value = "";
	document.getElementById("dataChannelReceive").value = "";
	document.getElementById("dataChannelSend").disabled = true;
	}

	function gotDescription1(desc) {
	pc1.setLocalDescription(desc);
	trace('Offer from pc1 \n' + desc.sdp);
	pc2.setRemoteDescription(desc);
	pc2.createAnswer(gotDescription2);
	}

	function gotDescription2(desc) {
	pc2.setLocalDescription(desc);
	trace('Answer from pc2 \n' + desc.sdp);
	pc1.setRemoteDescription(desc);
	}

	function iceCallback1(event) {
	trace('local ice callback');
	if (event.candidate) {
	pc2.addIceCandidate(event.candidate);
	trace('Local ICE candidate: \n' + event.candidate.candidate);
	}
	}

	function iceCallback2(event) {
	trace('remote ice callback');
	if (event.candidate) {
	pc1.addIceCandidate(event.candidate);
	trace('Remote ICE candidate: \n ' + event.candidate.candidate);
	}
	}

	function receiveChannelCallback(event) {
	trace('Receive Channel Callback');
	receiveChannel = event.channel;
	receiveChannel.onmessage = onReceiveMessageCallback;
	receiveChannel.onopen = onReceiveChannelStateChange;
	receiveChannel.onclose = onReceiveChannelStateChange;
	}

	function onReceiveMessageCallback(event) {
	trace('Received Message');
	document.getElementById("dataChannelReceive").value = event.data;
	}

	function onSendChannelStateChange() {
	var readyState = sendChannel.readyState;
	trace('Send channel state is: ' + readyState);
	if (readyState == "open") {
	document.getElementById("dataChannelSend").disabled = false;
	sendButton.disabled = false;
	sendFileButton.disabled = false;
	closeButton.disabled = false;
	} else {
	document.getElementById("dataChannelSend").disabled = true;
	sendButton.disabled = true;
	sendFileButton.disabled = true;
	closeButton.disabled = true;
	}
	}

	function onReceiveChannelStateChange() {
	var readyState = receiveChannel.readyState;
	trace('Receive channel state is: ' + readyState);
	}

	</script>
	</body>
	</html>