الملفات
codepill-sfu/public/views/landing.html
2023-11-02 16:26:20 +01:00

591 أسطر
35 KiB
HTML

<!doctype html>
<html lang="en" class="no-js">
<head>
<!-- Title and Icon -->
<title>MiroTalk SFU, Free Video Calls, Messaging and Screen Sharing</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 SFU powered by WebRTC and mediasoup, Real-time Simple Secure Fast video calls, messaging and screen sharing capabilities in the browser."
/>
<meta
name="keywords"
content="webrtc, miro, mediasoup, mediasoup-client, self hosted, voip, sip, real-time communications, chat, messaging, meet, webrtc stun, webrtc turn, webrtc p2p, webrtc sfu, video meeting, video chat, video conference, multi video chat, multi video conference, peer to peer, p2p, sfu, 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 SFU" />
<meta property="og:title" content="Click the link to make a call." />
<meta
property="og:description"
content="MiroTalk SFU calling provides real-time video calls, messaging and screen sharing."
/>
<meta property="og:image" content="https://sfu.mirotalk.com/images/mirotalksfu.png" />
<!-- StyleSheet -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<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>
<script src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script>
</head>
<body class="is-boxed has-animations">
<div class="body-wrap">
<header class="site-header">
<div class="container">
<div class="site-header-inner">
<div class="brand header-brand">
<div class="m-0">
<a href="/">
<img
class="header-logo-image"
src="../images/logo.svg"
alt="mirotalksfu-webrtc-logo"
/>
</a>
</div>
</div>
</div>
</div>
</header>
<main>
<section class="hero reveal-from-bottom">
<div class="container">
<div class="hero-inner">
<div class="hero-copy">
<h1 class="hero-title mt-0">
MiroTalk SFU<br />Free browser based Real-time video calls.<br />
Simple, Secure, Fast.
</h1>
<p class="hero-paragraph">
Start your next video call with a single click. No download, plug-in, or login is
required. Just get straight to talking, messaging, and sharing your screen.
</p>
</div>
<div class="hero-figure anime-element">
<svg class="placeholder" width="528" height="396" viewBox="0 0 528 396">
<rect width="528" height="396" style="fill: transparent" />
</svg>
<div class="hero-figure-box hero-figure-box-01" data-rotation="45deg"></div>
<div class="hero-figure-box hero-figure-box-02" data-rotation="-45deg"></div>
<div class="hero-figure-box hero-figure-box-03" data-rotation="0deg"></div>
<div class="hero-figure-box hero-figure-box-04" data-rotation="-135deg"></div>
<div class="hero-figure-box hero-figure-box-05"></div>
<div class="hero-figure-box hero-figure-box-06"></div>
<div class="hero-figure-box hero-figure-box-07"></div>
<div class="hero-figure-box hero-figure-box-08" data-rotation="-22deg"></div>
<div class="hero-figure-box hero-figure-box-09" data-rotation="-52deg"></div>
<div class="hero-figure-box hero-figure-box-10" data-rotation="-50deg"></div>
</div>
</div>
</div>
</section>
<section class="cta section">
<div class="container">
<div class="cta-inner section-inner br-12">
<h3 class="section-title mt-0">
Pick a room name.<br />
How about this one?
</h3>
<div>
<div class="mb-24">
<label for="roomName"></label>
<div class="form-group-desktop">
<input
id="roomName"
class="form-input"
type="text"
maxlength="36"
value=""
style="border-radius: 6px"
/>
<button
id="genRoomButton"
class="button button-primary br-6 mr-8 mb-8 fas fa-arrows-rotate"
onclick="genRoom()"
></button>
<button
id="joinRoomButton"
class="button button-primary pulse"
onclick="joinRoom()"
>
Join Room
</button>
<script>
document.getElementById('roomName').onkeyup = (e) => {
if (e.keyCode === 13) {
e.preventDefault();
joinRoom();
}
};
function genRoom() {
document.getElementById('roomName').value = getUUID4();
}
function getUUID4() {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
(
c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
).toString(16),
);
}
function joinRoom() {
const roomName = filterXSS(document.getElementById('roomName').value);
if (roomName) {
window.location.href = '/join/' + roomName;
window.localStorage.lastRoom = roomName;
} else {
alert('Room name empty!\nPlease pick a room name.');
}
}
</script>
</div>
</div>
<div id="lastRoomContainer" class="last-room">
<span>Your recent room:</span>
<a id="lastRoom"></a>
</div>
<script>
const lastRoomContainer = document.getElementById('lastRoomContainer');
const lastRoom = document.getElementById('lastRoom');
const lastRoomName = window.localStorage.lastRoom
? window.localStorage.lastRoom
: '';
if (lastRoomName) {
lastRoomContainer.style.display = 'inline-flex';
lastRoom.setAttribute('href', '/join/' + lastRoomName);
lastRoom.innerText = lastRoomName;
}
</script>
</div>
</div>
</div>
</section>
<section class="features section">
<div class="container-sm">
<div class="pricing-header text-center reveal-from-bottom mt-32" data-reveal-delay="150">
<br />
<h2 class="section-title mt-0">
Unlimited number of conference rooms and users without call time limitation!
</h2>
<p class="section-paragraph mb-0">
MiroTalk with SFU integrated Server. We engineered a platform with maximum video quality
lowest latency that makes your calls crystal clear. Compatible with all browsers and
platforms!
</p>
</div>
</div>
<div class="container">
<div class="features-inner section-inner has-bottom-divider">
<div class="features-wrap">
<div class="feature text-center is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img
class="wh-200-150"
src="../svg/screen_sharing.svg"
alt="mirotalksfu-screen"
/>
</div>
<h4 class="feature-title mt-24">Screen Sharing</h4>
<p class="text-sm mb-0">
Share your screen, application window, present your documents, slides and
more.
</p>
</div>
</div>
<div class="feature text-center is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img
class="wh-200-150"
src="../svg/webcam_streaming.svg"
alt="mirotalksfu-webcam"
/>
</div>
<h4 class="feature-title mt-24">WebCam Streaming</h4>
<p class="text-sm mb-0">
Having the webcam on, allows participants to make a deeper connection with
you. Up to 4k resolution.
</p>
</div>
</div>
<div class="feature text-center is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img
class="wh-200-150"
src="../svg/audio_streaming.svg"
alt="mirotalksfu-audio"
/>
</div>
<h4 class="feature-title mt-24">Audio Streaming</h4>
<p class="text-sm mb-0">
Echo cancellation and noise suppression that make your audio crystal clear.
</p>
</div>
</div>
<div class="feature text-center is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img
class="wh-200-150"
src="../svg/webcam_chat.svg"
alt="mirotalksfu-chat"
/>
</div>
<h4 class="feature-title mt-24">Chat</h4>
<p class="text-sm mb-0">
Chat with others in meeting with integrated emoji picker to show your
feeling.
</p>
</div>
</div>
<div class="feature text-center is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img
class="wh-200-150"
src="../svg/recording_meeting.svg"
alt="mirotalksfu-recording"
/>
</div>
<h4 class="feature-title mt-24">Recording meeting</h4>
<p class="text-sm mb-0">
Record your Screen, Video, and Audio on Your browser Blob. Save it for using
it in the future or to share with others.
</p>
</div>
</div>
<div class="feature text-center is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img
class="wh-200-150"
src="../svg/collaborative_whitboard.svg"
alt="mirotalksfu-whiteboard"
/>
</div>
<h4 class="feature-title mt-24">Collaborative Whiteboard</h4>
<p class="text-sm mb-0">
Advanced interactive whiteboard to draw and explain your concepts to the
other participants in the meeting.
</p>
</div>
</div>
<div class="feature text-center is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img
class="wh-200-150"
src="../svg/file_sharing.svg"
alt="mirotalksfu-filesharing"
/>
</div>
<h4 class="feature-title mt-24">File Sharing</h4>
<p class="text-sm mb-0">
Share any types of files with all participants in the meeting.
</p>
</div>
</div>
<div class="feature text-center is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img
class="wh-200-150"
src="../svg/total_privacy.svg"
alt="mirotalksfu-privacy"
/>
</div>
<h4 class="feature-title mt-24">Total privacy</h4>
<p class="text-sm mb-0">
Data stays between you and your participants. MiroTalk SFU doesn't collect
or share personal information.
</p>
</div>
</div>
<div class="feature text-center is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img
class="wh-200-150"
src="../svg/maximum_security.svg"
alt="mirotalksfu-security"
/>
</div>
<h4 class="feature-title mt-24">Maximum security</h4>
<p class="text-sm mb-0">
Thanks to WebRTC, all the media streams are encrypted using Secure Real-time
Transport Protocol (SRTP).
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cta section">
<div class="container reveal-from-bottom">
<h2 style="text-align: center">Meet the team</h2>
<br />
<div align="center">
<img
src="../images/miroslav-pejic.png"
alt="Team member author"
width="180"
height="180"
class="rounded-image"
/>
<br />
<a target="_blank" href="https://www.linkedin.com/in/miroslav-pejic-976a07101/">
<h5 class="mt-0 mb-4">Miroslav Pejic</h5>
</a>
Full Stack Developer
<br />
</div>
<hr />
</div>
</section>
<br />
<section class="cta section">
<div class="container">
<h2 style="text-align: center">Try an easier, more secure way of calling.</h2>
<br />
<div style="text-align: center">
<a class="button button-primary button-wide-mobile br-6 pulse" href="/newroom">Try now</a>
</div>
</div>
<hr />
<div class="reveal-from-top" style="width: 200px; margin: 0 auto; text-align: center">
<p>Powered by</p>
<a href="https://hetzner.cloud/?ref=XdRifCzCK3bn">
<img src="../sponsors/Hetzner.png" alt="Powered by Hetzner" />
</a>
</div>
<hr />
</section>
<section class="clients section">
<div class="container">
<h3 style="text-align: center">Our sponsors</h3>
<br />
<div class="clients-inner section-inner has-animations has-top-divider has-bottom-divider">
<ul class="list-reset">
<li class="reveal-from-left" data-reveal-delay="150">
<div class="clients-logo">
<a href="https://broadcastx.de/" target="_blank"
><img
class="clients-size-logo"
src="../sponsors/BroadcastX.png"
alt="BroadcastX"
/></a>
</div>
</li>
<li class="reveal-from-left" data-reveal-delay="300">
<div class="clients-logo">
<a href="https://hetzner.cloud/?ref=XdRifCzCK3bn" target="_blank"
><img class="clients-size-logo" src="../sponsors/Hetzner.png" alt="Hetzner"
/></a>
</div>
</li>
<li class="reveal-from-left" data-reveal-delay="450">
<div class="clients-logo">
<a style="cursor: pointer" onclick="adultContent()"
><img
class="clients-size-logo"
src="../sponsors/LuvLounge.png"
alt="LuvLounge"
/></a>
</div>
</li>
<script>
function adultContent() {
if (
confirm(
'18+ WARNING! ADULTS ONLY!\n\nExplicit material for viewing by adults 18 years of age or older. You must be at least 18 years old to access to this site!\n\nProceeding you are agree and confirm to have 18+ year.',
)
) {
window.open('https://luvlounge.ca', '_blank');
}
}
</script>
<li class="reveal-from-left" data-reveal-delay="600">
<div class="clients-logo">
<a href="https://www.questionpro.com" target="_blank"
><img
class="clients-size-logo"
src="../sponsors/QuestionPro.png"
alt="QuestionPro"
/></a>
</div>
</li>
<li class="reveal-from-left" data-reveal-delay="750">
<div class="clients-logo">
<a href="https://www.browserstack.com" target="_blank"
><img
class="clients-size-logo"
src="../sponsors/BrowserStack.png"
alt="BrowserStack"
/></a>
</div>
</li>
<li class="reveal-from-left" data-reveal-delay="900">
<div class="clients-logo">
<a href="https://crystalsound.ai" target="_blank"
><img
class="clients-size-logo"
src="../sponsors/CrystalSound.png"
alt="CrystalSound"
/></a>
</div>
</li>
</ul>
</div>
</div>
</section>
<section class="clients section">
<div class="container">
<h3 style="text-align: center">Our Advertisers</h3>
<br />
<div class="clients-inner section-inner has-animations has-top-divider has-bottom-divider">
<ul class="list-reset">
<li class="reveal-from-left" data-reveal-delay="150">
<div class="clients-logo">
<a href="https://www.dpbolvw.net/click-101027391-14462707" target="_blank"
><img
class="clients-size-logo"
src="../advertisers/Contabo.png"
alt="Contabo"
/></a>
</div>
</li>
</ul>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="site-footer-inner">
<div class="brand footer-brand">
<a href="/">
<img class="header-logo-image" src="../images/logo.svg" alt="Logo" />
</a>
</div>
<ul class="footer-links list-reset">
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/privacy">Privacy Policy</a>
</li>
<li>
Contact:
<a target="_blank" href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
>Miroslav Pejic</a
>
</li>
</ul>
<ul class="footer-social-links 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"
fill="#0270D7"
/>
</svg>
</a>
</li>
<li class="footer-social-icon">
<a target="_blank" href="https://www.facebook.com/mirotalk">
<span class="screen-reader-text">Facebook</span>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<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"
fill="#0270D7"
/>
</svg>
</a>
</li>
<li class="footer-social-icon">
<a target="_blank" href="https://www.youtube.com/watch?v=_IVn2aINYww">
<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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">
<span class="screen-reader-text">Google</span>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<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/mirotalksfu"
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 class="footer-copyright">&copy; 2023 MiroTalk SFU, all rights reserved</div>
</div>
</div>
</footer>
</div>
<script defer src="../js/landing.js"></script>
<script defer src="../js/newRoom.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>