177 lines
4.9 KiB
HTML
177 lines
4.9 KiB
HTML
|
<!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>
|
||
|
|
|