generic-library/webrtc
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updated dc1.html to support SCTP transport.

Browse Source 
R=dutton@google.com

Review URL: https://webrtc-codereview.appspot.com/2058004

git-svn-id: http://webrtc.googlecode.com/svn/trunk@4814 4adac7df-926f-26a2-2b94-8c16560cd09d
This commit is contained in:
vikasmarwaha@webrtc.org
2013-09-23 18:03:33 +00:00
parent 334865e2a1
commit 7a7b929882
1 changed files with 85 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
samples/js/demos/html/dc1.html
View File

@@ -10,58 +10,99 @@ button {
textarea { textarea {
font-family: monospace; font-family: monospace;
margin: 2px; margin: 2px;
width: 480px; height: 400px;
height: 640px; width: 300px;
}
div#send {
float: left;
margin-right: 20px;
}
div#receive {
}
div#sendreceive {
margin: 0 0 20px 0;
}
h2 {
margin: 0 0 10px 0;
} }
#left { position: absolute; left: 0; top: 0; width: 50%; }
#right { position: absolute; right: 0; top: 0; width: 50%; }
</style> </style>
</head> </head>
<body> <body>
<div id="left"> <div id="sendreceive">
<br> <div id="send">
<h2>Send data</h2> <h2>Send data</h2>
<textarea id="dataChannelSend" rows="5" cols="15" disabled="true"> <textarea id="dataChannelSendId" rows="5" cols="15" disabled="true"
</textarea><br> placeholder="Press Start, enter some text, then press Send Data.">
<button id="startButton" onclick="createConnection()">Start</button> </textarea>
<button id="sendButton" onclick="sendData()">Send Data</button>
<button id="closeButton" onclick="closeDataChannels()">Stop Send Data
</button>
<br>
</div> </div>
<div id="right"> <div id="receive">
<br>
<h2>Received Data</h2> <h2>Received Data</h2>
<textarea id="dataChannelReceive" rows="5" cols="15" disabled="true"> <textarea id="dataChannelReceiveId" rows="5" cols="15" disabled="true">
</textarea><br> </textarea>
</div> </div>
</div>
<form>
<p>Choose SCTP or RTP for transmitting data.</p>
<input type="radio" id="useSctp" name="transportbtn" checked/>
<label for="useSctp">Use SCTP</label>
<input type="radio" id="useRtp" name="transportbtn"/>
<label for="useRtp">Use RTP</label>
</form>
<button id="startButton">Start</button>
<button id="sendButton" disabled>Send Data</button>
<button id="closeButton" disabled>Stop</button>
<!-- Load the polyfill to switch-hit between Chrome and Firefox -->
<script src='../../base/adapter.js'></script>
<script> <script>
var pc1, pc2, sendChannel, receiveChannel; var pc1, pc2, sendChannel, receiveChannel, pcConstraint, dataConstraint;
startButton.disabled = false; var dataChannelSend = document.getElementById("dataChannelSendId");
sendButton.disabled = true; var dataChannelReceive = document.getElementById("dataChannelReceiveId");
closeButton.disabled = true; var sctp_select = document.getElementById('useSctp');
var rtp_select = document.getElementById('useRtp');
var startButton = document.querySelector('button#startButton');
var sendButton = document.querySelector('button#sendButton');
var closeButton = document.querySelector('button#closeButton');
startButton.onclick = createConnection;
sendButton.onclick = sendData;
closeButton.onclick = closeDataChannels;
rtp_select.onclick = enableStartButton;
sctp_select.onclick = enableStartButton;
function trace(text) { function enableStartButton() {
// This function is used for logging. startButton.disabled = false;
if (text[text.length - 1] == '\n') {
text = text.substring(0, text.length - 1);
}
console.log((performance.now() / 1000).toFixed(3) + ": " + text);
} }
function createConnection() { function createConnection() {
dataChannelSendId.placeholder = "";
var servers = null; var servers = null;
pc1 = new webkitRTCPeerConnection(servers, pcConstraint = {optional: [{RtpDataChannels: true}]};
{optional: [{RtpDataChannels: true}]}); dataConstraint = {reliable: false};
if (sctp_select.checked &&
webrtcDetectedBrowser === 'chrome' &&
webrtcDetectedVersion >= 31) {
// SCTP is supported from Chrome M31. In current canary builds,
// you might need to enable it through flag #enable-sctp-data-channels.
// Use SCTP with reliable set to true.
pcConstraint = {optional: [{DtlsSrtpKeyAgreement: true}]};
dataConstraint = {reliable: true};
trace('Using SCTP based Data Channels');
} else {
if (!rtp_select.checked) {
// Use rtp data channels for chrome versions older than M31.
trace('Using RTP based Data Channels,' +
'as you are on an older version than M31.');
alert('Reverting to RTP based data channels,' +
'as you are on an older version than M31.');
rtp_select.checked = true;
}
}
pc1 = new RTCPeerConnection(servers, pcConstraint);
trace('Created local peer connection object pc1'); trace('Created local peer connection object pc1');
try { try {
// Reliable Data Channels not yet supported in Chrome
// Data Channel api supported from Chrome M25. // Data Channel api supported from Chrome M25.
// You need to start chrome with --enable-data-channels flag. // You might need to start chrome with --enable-data-channels flag.
sendChannel = pc1.createDataChannel("sendDataChannel", sendChannel = pc1.createDataChannel("sendDataChannel", dataConstraint);
{reliable: false});
trace('Created send data channel'); trace('Created send data channel');
} catch (e) { } catch (e) {
alert('Failed to create data channel. ' + alert('Failed to create data channel. ' +
@@ -72,8 +113,7 @@ function createConnection() {
sendChannel.onopen = onSendChannelStateChange; sendChannel.onopen = onSendChannelStateChange;
sendChannel.onclose = onSendChannelStateChange; sendChannel.onclose = onSendChannelStateChange;
pc2 = new webkitRTCPeerConnection(servers, pc2 = new RTCPeerConnection(servers, pcConstraint);
{optional: [{RtpDataChannels: true}]});
trace('Created remote peer connection object pc2'); trace('Created remote peer connection object pc2');
pc2.onicecandidate = iceCallback2; pc2.onicecandidate = iceCallback2;
@@ -85,7 +125,7 @@ function createConnection() {
} }
function sendData() { function sendData() {
var data = document.getElementById("dataChannelSend").value; var data = dataChannelSend.value;
sendChannel.send(data); sendChannel.send(data);
trace('Sent Data: ' + data); trace('Sent Data: ' + data);
} }
@@ -104,9 +144,9 @@ function closeDataChannels() {
startButton.disabled = false; startButton.disabled = false;
sendButton.disabled = true; sendButton.disabled = true;
closeButton.disabled = true; closeButton.disabled = true;
document.getElementById("dataChannelSend").value = ""; dataChannelSend.value = "";
document.getElementById("dataChannelReceive").value = ""; dataChannelReceive.value = "";
document.getElementById("dataChannelSend").disabled = true; dataChannelSend.disabled = true;
} }
function gotDescription1(desc) { function gotDescription1(desc) {
@@ -148,18 +188,19 @@ function receiveChannelCallback(event) {
function onReceiveMessageCallback(event) { function onReceiveMessageCallback(event) {
trace('Received Message'); trace('Received Message');
document.getElementById("dataChannelReceive").value = event.data; dataChannelReceive.value = event.data;
} }
function onSendChannelStateChange() { function onSendChannelStateChange() {
var readyState = sendChannel.readyState; var readyState = sendChannel.readyState;
trace('Send channel state is: ' + readyState); trace('Send channel state is: ' + readyState);
if (readyState == "open") { if (readyState == "open") {
document.getElementById("dataChannelSend").disabled = false; dataChannelSend.disabled = false;
dataChannelSendId.focus();
sendButton.disabled = false; sendButton.disabled = false;
closeButton.disabled = false; closeButton.disabled = false;
} else { } else {
document.getElementById("dataChannelSend").disabled = true; dataChannelSend.disabled = true;
sendButton.disabled = true; sendButton.disabled = true;
closeButton.disabled = true; closeButton.disabled = true;
} }
@@ -173,4 +214,3 @@ function onReceiveChannelStateChange() {
</script> </script>
</body> </body>
</html> </html>