149 lines
4.2 KiB
HTML
149 lines
4.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<!-- This sample demonstrates enumeration of candidates for
|
||
|
|
the specified STUN/TURN server. -->
|
||
|
|
<title>ICE Candidate Gathering Demo</title>
|
||
|
|
<script src="../../base/adapter.js"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font: 14px sans-serif;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
font: 18px sans-serif;
|
||
|
|
padding: 8px;
|
||
|
|
}
|
||
|
|
select {
|
||
|
|
margin: 2px;
|
||
|
|
width:960px;
|
||
|
|
height:80px;
|
||
|
|
}
|
||
|
|
textarea {
|
||
|
|
font-family: monospace;
|
||
|
|
margin: 2px;
|
||
|
|
width:960px;
|
||
|
|
height:640px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>WebRTC Trickle ICE Test Page</h1>
|
||
|
|
<p>This page tests the trickle ICE functionality in a WebRTC implementation. It
|
||
|
|
creates a PeerConnection with the specified ICEServers, and then starts
|
||
|
|
candidate gathering for a session with a single audio stream. As candidates
|
||
|
|
are gathered, they are displayed in the text box below, along with an
|
||
|
|
indication when candidate gathering is complete.</p>
|
||
|
|
<p>Individual STUN and TURN servers can be added using the Add Server/Remove
|
||
|
|
Server controls below; in addition, the type of candidates released to the
|
||
|
|
application can be controlled via the IceTransports contraint.</p>
|
||
|
|
<h3>ICE Servers</h3>
|
||
|
|
<select id="servers" size="4">
|
||
|
|
<option value="{"url":"stun:stun.l.google.com:19302"}">
|
||
|
|
stun:stun.l.google.com:19302
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
<br>
|
||
|
|
STUN or TURN URI:
|
||
|
|
<input id="url" size="64"></input>
|
||
|
|
<br>
|
||
|
|
TURN Username:
|
||
|
|
<input id="username" size="16"></input>
|
||
|
|
TURN Password:
|
||
|
|
<input id="password" size="16"></input>
|
||
|
|
<br>
|
||
|
|
<button id="add" onclick="addServer()">Add Server</button>
|
||
|
|
<button id="remove" onclick="removeServer()">Remove Server</button>
|
||
|
|
<h3>ICE Constraints</h3>
|
||
|
|
IceTransports value:
|
||
|
|
<input type="radio" name="transports" value="all" checked> All
|
||
|
|
<input type="radio" name="transports" value="relay"> Relay
|
||
|
|
<input type="radio" name="transports" value="none"> None
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<button id="gather" onclick="start()">Gather Candidates</button>
|
||
|
|
<br>
|
||
|
|
<textarea id="output"></textarea>
|
||
|
|
<script>
|
||
|
|
var servers = document.getElementById('servers');
|
||
|
|
var url = document.getElementById('url');
|
||
|
|
var username = document.getElementById('username');
|
||
|
|
var password = document.getElementById('password');
|
||
|
|
var output = document.getElementById('output');
|
||
|
|
|
||
|
|
var pc;
|
||
|
|
var begin;
|
||
|
|
|
||
|
|
function addServer() {
|
||
|
|
var scheme = url.value.split(":")[0];
|
||
|
|
if (scheme != "stun" && scheme != "turn" && scheme != "turns") {
|
||
|
|
alert("URI is not valid");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Store the ICE server as a stringified JSON object in opt.value.
|
||
|
|
var opt = document.createElement("option");
|
||
|
|
opt.value = JSON.stringify(
|
||
|
|
createIceServer(url.value, username.value, password.value));
|
||
|
|
opt.text = url.value + " ";
|
||
|
|
if (username.value.length || password.value.length) {
|
||
|
|
opt.text += (" [" + username.value + ":" + password.value + "]");
|
||
|
|
}
|
||
|
|
servers.add(opt);
|
||
|
|
url.value = username.value = password.value = "";
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeServer() {
|
||
|
|
for (var i = servers.options.length - 1; i >= 0; --i) {
|
||
|
|
if (servers.options[i].selected) {
|
||
|
|
servers.remove(i);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function start() {
|
||
|
|
// Create a PeerConnection with no streams, but force a m=audio line.
|
||
|
|
// Pass in the STUN/TURN server value from the input boxes.
|
||
|
|
|
||
|
|
output.value = "";
|
||
|
|
var iceServers = [];
|
||
|
|
for (var i = 0; i < servers.length; ++i) {
|
||
|
|
iceServers.push(JSON.parse(servers[i].value));
|
||
|
|
}
|
||
|
|
var transports = document.getElementsByName("transports");
|
||
|
|
var iceTransports;
|
||
|
|
for (var i = 0; i < transports.length; ++i) {
|
||
|
|
if (transports[i].checked) {
|
||
|
|
iceTransports = transports[i].value;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var config = {"iceServers": iceServers };
|
||
|
|
var constraints = {"mandatory": {"IceTransports":iceTransports}};
|
||
|
|
trace("Creating new PeerConnection with config=" + JSON.stringify(config) +
|
||
|
|
", constraints=" + JSON.stringify(constraints));
|
||
|
|
pc = new RTCPeerConnection(config, constraints);
|
||
|
|
pc.onicecandidate = iceCallback;
|
||
|
|
pc.createOffer(gotDescription, null,
|
||
|
|
{"mandatory": {"OfferToReceiveAudio": true}});
|
||
|
|
}
|
||
|
|
|
||
|
|
function gotDescription(desc) {
|
||
|
|
begin = performance.now();
|
||
|
|
pc.setLocalDescription(desc);
|
||
|
|
}
|
||
|
|
|
||
|
|
function iceCallback(event) {
|
||
|
|
var elapsed = ((performance.now() - begin) / 1000).toFixed(3);
|
||
|
|
if (event.candidate) {
|
||
|
|
output.value += (elapsed + ": " + event.candidate.candidate);
|
||
|
|
} else {
|
||
|
|
output.value += (elapsed + ": Done");
|
||
|
|
pc.close();
|
||
|
|
pc = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|