Miroslav Pejic
133 lines
4.6 KiB
HTML
133 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- https://github.com/mikecao/umami -->
|
|
|
|
<script
|
|
async
|
|
defer
|
|
data-website-id="a378bd09-212d-4801-94cc-9797b6a5f3f7"
|
|
src="https://stats.mirotalk.org/umami.js"
|
|
></script>
|
|
|
|
<!-- Title and Icon -->
|
|
|
|
<title>Test Stun/Turn Servers</title>
|
|
<link rel="shortcut icon" href="../images/logo.svg" />
|
|
<link rel="apple-touch-icon" href="../images/logo.svg" />
|
|
|
|
<!-- Meta Information -->
|
|
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<meta name="description" content="MiroTalk P2P test Stun and Turn servers" />
|
|
<meta name="keywords" content="webrtc, stun, turn, srflx, relay" />
|
|
|
|
<!-- StyleSheet -->
|
|
|
|
<link rel="stylesheet" href="../css/landing.css" />
|
|
<link rel="stylesheet" href="../css/newcall.css" />
|
|
|
|
<!-- xss -->
|
|
|
|
<script src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1>Test Stun/Turn Servers</h1>
|
|
|
|
<hr />
|
|
|
|
<pre id="ice" style="background: #000000; color: lime; overflow: auto"></pre>
|
|
|
|
<hr />
|
|
|
|
<p id="ip"></p>
|
|
<p id="stun">🔴 The STUN server is NOT reachable!</p>
|
|
<p id="turn">🔴 The TURN server is NOT reachable!</p>
|
|
<p id="err"></p>
|
|
|
|
<hr />
|
|
|
|
<a href="https://github.com/miroslavpejic85/mirotalk/issues/108#issuecomment-1193087636" target="_blank">
|
|
Check this out too</a
|
|
>
|
|
|
|
<hr />
|
|
</div>
|
|
|
|
<script>
|
|
const Ice = document.getElementById('ice');
|
|
const IP = document.getElementById('ip');
|
|
const Stun = document.getElementById('stun');
|
|
const Turn = document.getElementById('turn');
|
|
const Err = document.getElementById('err');
|
|
|
|
const qs = new URLSearchParams(window.location.search);
|
|
|
|
let iceServers = filterXSS(qs.get('iceServers'));
|
|
|
|
if (iceServers) {
|
|
iceServers = JSON.parse(iceServers);
|
|
// http://localhost:3000/test?iceServers=[{"urls":"stun:stun.l.google.com:19302"},{"urls":"turn:numb.viagenie.ca","username":"miroslav.pejic.85@gmail.com","credential":"mirotalkp2p"}]
|
|
} else {
|
|
// http://localhost:3000/test
|
|
iceServers = [
|
|
// Test some STUN server
|
|
{
|
|
urls: 'stun:stun.l.google.com:19302',
|
|
},
|
|
// Test some TURN server
|
|
// https://www.metered.ca/tools/openrelay/
|
|
{
|
|
urls: 'turn:openrelay.metered.ca:443',
|
|
username: 'openrelayproject',
|
|
credential: 'openrelayproject',
|
|
},
|
|
];
|
|
}
|
|
|
|
console.log('Check Ice Servers', iceServers);
|
|
|
|
// Print iceServers config
|
|
Ice.innerHTML = JSON.stringify(iceServers, null, 4);
|
|
|
|
// Test the connections
|
|
const pc = new RTCPeerConnection({
|
|
iceServers,
|
|
});
|
|
|
|
pc.onicecandidate = (e) => {
|
|
if (!e.candidate) return;
|
|
|
|
console.log(e.candidate.candidate);
|
|
|
|
// If a srflx candidate was found, notify that the STUN server works!
|
|
if (e.candidate.type == 'srflx' || e.candidate.candidate.includes('srflx')) {
|
|
let ip = /\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b/;
|
|
let address = e.candidate.address ? e.candidate.address : e.candidate.candidate.match(ip);
|
|
IP.innerHTML = '🟢 Your Public IP Address is ' + address;
|
|
Stun.innerHTML = '🟢 The STUN server is reachable!';
|
|
}
|
|
|
|
// If a relay candidate was found, notify that the TURN server works!
|
|
if (e.candidate.type == 'relay' || e.candidate.candidate.includes('relay')) {
|
|
Turn.innerHTML = '🟢 The TURN server is reachable!';
|
|
}
|
|
};
|
|
|
|
// handle error
|
|
pc.onicecandidateerror = (e) => {
|
|
console.error(e);
|
|
Err.innerHTML = '🔴 Error: ' + e.errorText;
|
|
};
|
|
|
|
pc.createDataChannel('test');
|
|
pc.createOffer().then((offer) => pc.setLocalDescription(offer));
|
|
</script>
|
|
</body>
|
|
</html>
|