Miroslav Pejic
322 lines
20 KiB
HTML
322 lines
20 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="no-js">
|
|
<head>
|
|
<!-- Title and Icon -->
|
|
|
|
<title>MiroTalk P2P - Host Protected login required.</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 powered by WebRTC, Real-time Simple Secure Fast video calls, chat and screen sharing capabilities in the browser, from your mobile or desktop."
|
|
/>
|
|
<meta
|
|
name="keywords"
|
|
content="webrtc, self hosted, voip, sip, real-time communications, chat, messaging, meet, webrtc stun, webrtc turn, video meeting, video chat, video conference, multi video chat, multi video conference, peer to peer, p2p, rtc, alternative to, zoom, microsoft teams, google meet, jitsi, meeting"
|
|
/>
|
|
|
|
<!-- https://ogp.me -->
|
|
|
|
<meta property="og:type" content="app-webrtc" />
|
|
<meta property="og:site_name" content="MiroTalk" />
|
|
<meta property="og:title" content="Click the link to make a call." />
|
|
<meta
|
|
property="og:description"
|
|
content="MiroTalk calling provides real-time HD quality and latency simply not available with traditional technology."
|
|
/>
|
|
<meta property="og:image" content="https://p2p.mirotalk.com/images/preview.png" />
|
|
<meta property="og:url" content="https://p2p.mirotalk.com" />
|
|
|
|
<!-- StyleSheet -->
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" />
|
|
<link rel="stylesheet" href="../css/landing.css" />
|
|
|
|
<!-- Js scripts -->
|
|
|
|
<script async src="../js/umami.js"></script>
|
|
<script src="https://unpkg.com/animejs@3.0.1/lib/anime.min.js"></script>
|
|
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
|
|
|
|
<!-- xss -->
|
|
|
|
<script src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script>
|
|
|
|
<!-- axios -->
|
|
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
</head>
|
|
<body class="has-animations">
|
|
<div class="body-wrap">
|
|
<header class="site-header reveal-from-top">
|
|
<div class="container">
|
|
<div class="site-header-inner">
|
|
<div class="brand">
|
|
<div class="m-0">
|
|
<a href="/"><img src="../images/logo.svg" alt="Neon" width="32" height="32" /></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="site-content">
|
|
<section class="hero section illustration-section-01">
|
|
<div class="container">
|
|
<div class="hero-inner section-inner">
|
|
<div class="split-wrap invert-mobile">
|
|
<div class="split-item">
|
|
<div class="hero-content split-item-content center-content-mobile">
|
|
<div id="loginForm">
|
|
<br />
|
|
<div class="mb-12">
|
|
<input
|
|
id="username"
|
|
class="form-input"
|
|
type="name"
|
|
placeholder="Username"
|
|
maxlength="32"
|
|
style="border-radius: 6px"
|
|
required
|
|
/>
|
|
</div>
|
|
<br />
|
|
<div class="mb-12">
|
|
<input
|
|
id="password"
|
|
class="form-input"
|
|
type="password"
|
|
maxlength="32"
|
|
style="border-radius: 6px"
|
|
placeholder="Password"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="mt-24 mb-32">
|
|
<button
|
|
id="loginButton"
|
|
class="button button-primary button-block pulse"
|
|
>
|
|
Login
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
console.log(window.location);
|
|
|
|
const usernameInput = document.getElementById('username');
|
|
const passwordInput = document.getElementById('password');
|
|
const loginBtn = document.getElementById('loginButton');
|
|
|
|
usernameInput.onkeyup = (e) => {
|
|
if (e.keyCode === 13) {
|
|
e.preventDefault();
|
|
login();
|
|
}
|
|
};
|
|
passwordInput.onkeyup = (e) => {
|
|
if (e.keyCode === 13) {
|
|
e.preventDefault();
|
|
login();
|
|
}
|
|
};
|
|
|
|
loginBtn.onclick = (e) => {
|
|
login();
|
|
};
|
|
|
|
function login() {
|
|
let username = filterXSS(document.getElementById('username').value);
|
|
let password = filterXSS(document.getElementById('password').value);
|
|
|
|
// http://localhost:3000/join/?room=test
|
|
// http://localhost:3000/join/?room=test&name=mirotalk&audio=0&video=0&screen=0¬ify=0
|
|
const qs = new URLSearchParams(window.location.search);
|
|
const room = filterXSS(qs.get('room'));
|
|
|
|
// http://localhost:3000/join/test
|
|
const pathParts = window.location.pathname.split('/');
|
|
const roomPath = pathParts[pathParts.length - 1];
|
|
|
|
if (username && password) {
|
|
axios
|
|
.post('/login', {
|
|
username: username,
|
|
password: password,
|
|
})
|
|
.then(function (response) {
|
|
console.log(response);
|
|
|
|
// Store in session
|
|
window.sessionStorage.peer_username = username;
|
|
window.sessionStorage.peer_password = password;
|
|
|
|
if (room) {
|
|
return (window.location.href =
|
|
'/join/' + window.location.search);
|
|
}
|
|
|
|
if (roomPath) {
|
|
return (window.location.href = '/join/' + roomPath);
|
|
}
|
|
|
|
return (window.location.href = '/logged');
|
|
})
|
|
.catch(function (error) {
|
|
console.error(error);
|
|
alert('Unauthorized');
|
|
});
|
|
return;
|
|
}
|
|
if (!username && !password) {
|
|
alert('Username and Password required');
|
|
return;
|
|
}
|
|
if (!username) {
|
|
alert('Username required');
|
|
return;
|
|
}
|
|
if (!password) {
|
|
alert('Password required');
|
|
return;
|
|
}
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer center-content-mobile">
|
|
<div class="container">
|
|
<div class="site-footer-inner">
|
|
<div class="footer-top space-between text-xxs">
|
|
<div class="brand">
|
|
<a href="/"><img src="../images/logo.svg" alt="Neon" width="32" height="32" /></a>
|
|
</div>
|
|
<div class="footer-social">
|
|
<ul class="list-reset">
|
|
<li class="footer-social-icon">
|
|
<a target="_blank" href="https://discord.gg/rgGYfeYW3N">
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<title>Forum</title>
|
|
<path
|
|
d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li class="footer-social-icon">
|
|
<a target="_blank" href="https://www.facebook.com/mirotalk">
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<title>Facebook</title>
|
|
<path
|
|
d="M6.023 16L6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li class="footer-social-icon">
|
|
<a target="_blank" href="https://www.youtube.com/watch?v=_IVn2aINYww">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<title>YouTube</title>
|
|
<path
|
|
d="M21.582,6.186c-0.23-0.86-0.908-1.538-1.768-1.768C18.254,4,12,4,12,4S5.746,4,4.186,4.418 c-0.86,0.23-1.538,0.908-1.768,1.768C2,7.746,2,12,2,12s0,4.254,0.418,5.814c0.23,0.86,0.908,1.538,1.768,1.768 C5.746,20,12,20,12,20s6.254,0,7.814-0.418c0.861-0.23,1.538-0.908,1.768-1.768C22,16.254,22,12,22,12S22,7.746,21.582,6.186z M10,15.464V8.536L16,12L10,15.464z"
|
|
fill="#0270D7"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li class="footer-social-icon">
|
|
<a target="_blank" href="mailto:miroslav.pejic.85@gmail.com">
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<title>Email</title>
|
|
<path
|
|
d="M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z"
|
|
fill="#0270D7"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="github-button"
|
|
href="https://github.com/sponsors/miroslavpejic85"
|
|
data-color-scheme="no-preference: light; light: light; dark: dark;"
|
|
data-icon="octicon-heart"
|
|
data-size="large"
|
|
aria-label="Sponsor @miroslavpejic85 on GitHub"
|
|
>Sponsor</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="github-button"
|
|
href="https://github.com/miroslavpejic85/mirotalk"
|
|
data-color-scheme="no-preference: light; light: light; dark: dark;"
|
|
data-size="large"
|
|
data-show-count="true"
|
|
aria-label="Star miroslavpejic85/mirotalk on GitHub"
|
|
>Star</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom space-between text-xxs invert-order-desktop">
|
|
<nav class="footer-nav">
|
|
<ul class="list-reset">
|
|
<li>
|
|
<a href="/about">About</a>
|
|
</li>
|
|
<li>
|
|
<a href="/privacy">Privacy Policy</a>
|
|
</li>
|
|
<li>
|
|
<a target="_blank" href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
|
|
>Contact: Miroslav Pejic</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="footer-copyright">© 2023 MiroTalk, all rights reserved</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script defer src="../js/landing.js"></script>
|
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
</body>
|
|
</html>
|