[mirotalk] - improve UI

This commit is contained in:
Miroslav Pejic
2022-07-23 14:17:56 +02:00
parent 3d0ab2e059
commit a12ee5c01f
+35 -5
View File
@@ -1,16 +1,46 @@
<!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" />
</head>
<body>
<h1>Test Stun/Turn Servers</h1>
<p id="stun">Stun: The STUN server is NOT reachable!</p>
<p id="turn">Turn: The TURN server is NOT reachable!</p>
<hr />
<p id="stun">🔴 Stun: The STUN server is NOT reachable!</p>
<p id="turn">🔴 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 out also</a
>
<script>
const Stun = document.getElementById('stun');
const Turn = document.getElementById('turn');
@@ -45,19 +75,19 @@
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);
Stun.innerHTML = 'Stun: The STUN server is reachable! Your Public IP Address is ' + address;
Stun.innerHTML = '🟢 The STUN server is reachable! Your Public IP Address is ' + address;
}
// If a relay candidate was found, notify that the TURN server works!
if (e.candidate.type == 'relay' || e.candidate.candidate.includes('relay')) {
Turn.innerHTML = 'Turn: The TURN server is reachable!';
Turn.innerHTML = '🟢 The TURN server is reachable!';
}
};
// handle error
pc.onicecandidateerror = (e) => {
console.error(e);
Err.innerHTML = 'Error: ' + e.errorText;
Err.innerHTML = '🔴 Error: ' + e.errorText;
};
pc.createDataChannel('test');