| <!DOCTYPE html> |
| <html> |
| <head> |
| <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> |
| <button id="startButton" onclick="createConnection()">Start</button> |
| <button id="sendButton" onclick="sendData()">Send Data</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; |
| 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: [{RtpDataChannels: 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", |
| {reliable: false}); |
| 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: [{RtpDataChannels: 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 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; |
| 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; |
| closeButton.disabled = false; |
| } else { |
| document.getElementById("dataChannelSend").disabled = true; |
| sendButton.disabled = true; |
| closeButton.disabled = true; |
| } |
| } |
| |
| function onReceiveChannelStateChange() { |
| var readyState = receiveChannel.readyState; |
| trace('Receive channel state is: ' + readyState); |
| } |
| |
| </script> |
| </body> |
| </html> |
| |