ghaymah_dev/codepill-sfu
2
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

[mirotalksfu] - refactoring

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2021-10-07 22:48:32 +02:00
الأصل b62a89bfa7
التزام 976ac95fc5
26 ملفات معدلة مع 59 إضافات و61 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

297
public/view/Room.html Normal file
عرض الملف

@@ -0,0 +1,297 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZRF9TVSZ0J"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-ZRF9TVSZ0J');
</script>
<!-- Title and Icon -->
<title>MiroTalk SFU - Room 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 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, mediasoup, mediasoup-client, 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 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="../images/mirotalksfu.png" />
<!-- StyleSheet -->
<link rel="stylesheet" href="../css/Room.css" />
<link rel="stylesheet" href="../css/VideoGrid.css" />
<!-- https://animate.style 4 using for swal fadeIn-Out -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!-- Js scripts -->
<script src="/socket.io/socket.io.js"></script>
<script src="../sfu/MediasoupClient.js"></script>
<script src="../js/Room.js"></script>
<script src="../js/RoomClient.js"></script>
<script src="../js/VideoGrid.js"></script>
<script src="https://kit.fontawesome.com/d2f1016e6f.js" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/muaz-khan/DetectRTC/master/DetectRTC.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/460/fabric.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.4"></script>
<script src="https://unpkg.com/emoji-picker-element@1" type="module"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
</head>
<body onload="initClient()">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="loadingDiv" class="center pulsate">
<h1>Loading...</h1>
<pre>
Please allow the camera or microphone
access to use this app.
</pre>
</div>
<button id="openNavButton" class="hidden">&#9776; menu</button>
<div id="control" class="sidenav hidden">
<button id="closeNavButton" class="closebtn">&times;</button>
<button id="shareButton" class="hidden"><i class="fas fa-share-alt"></i> Share</button>
<div class="dropdown">
<button id="settingsButton" class="hidden"><i class="fas fa-cogs"></i> Settings</button>
<div id="settings" class="dropdown-content fadein">
<div id="devicesList">
<i class="fas fa-video"></i> Video
<select id="videoSelect" class="form-select text-light bg-dark"></select>
<br />
<i class="fas fa-microphone"></i> Microphone
<select id="microphoneSelect" class="form-select text-light bg-dark"></select>
<br />
<i class="fas fa-volume-up"></i> Speaker
<select id="speakerSelect" class="form-select text-light bg-dark"></select>
</div>
</div>
</div>
<div class="dropdown">
<button id="recButton" class="hidden"><i class="fas fa-record-vinyl"></i> Recording</button>
<div id="recording" class="dropdown-content fadein">
<div id="recordingCommand" class="recording">
<button id="startRecButton" class="hidden"><i class="fas fa-record-vinyl"></i> Start</button>
<button id="stopRecButton" class="hidden"><i class="fas fa-stop-circle"></i> Stop</button>
<button id="pauseRecButton" class="hidden"><i class="far fa-pause-circle"></i> Pause</button>
<button id="resumeRecButton" class="hidden"><i class="far fa-play-circle"></i> Resume</button>
<p id="recordingStatus">🔴 REC 0s</p>
</div>
</div>
</div>
<button id="chatButton" class="hidden"><i class="fas fa-comments"></i> Chat</button>
<button id="fullScreenButton" class="hidden"><i class="fas fa-expand-alt"></i> Full screen</button>
<button id="swapCameraButton" class="hidden"><i class="fas fa-sync-alt"></i> Swap Cam</button>
<button id="raiseHandButton" class="hidden"><i class="fas fa-hand-rock"></i> Raise hand</button>
<button id="lowerHandButton" class="hidden"><i class="fas fa-hand-paper"></i> Lower hand</button>
<button id="startAudioButton" class="hidden"><i class="fas fa-microphone-slash"></i> Start audio</button>
<button id="stopAudioButton" class="hidden"><i class="fas fa-microphone"></i> Stop audio</button>
<button id="startVideoButton" class="hidden"><i class="fas fa-video-slash"></i> Start video</button>
<button id="stopVideoButton" class="hidden"><i class="fas fa-video"></i> Stop video</button>
<button id="startScreenButton" class="hidden"><i class="fas fa-desktop"></i> Start screen</button>
<button id="stopScreenButton" class="hidden"><i class="fas fa-stop-circle"></i> Stop screen</button>
<button id="fileShareButton" class="hidden"><i class="fas fa-folder-open"></i> File Sharing</button>
<div class="dropdown">
<button id="youTubeShareButton" class="hidden"><i class="fab fa-youtube"></i> YouTube</button>
<div id="youTubeSettings" class="dropdown-content fadein">
<div id="youTubeOptions">
<button id="youTubeCloseBtn"><i class="fas fa-times"></i> Close Video</button>
</div>
</div>
</div>
<div class="dropdown">
<button id="whiteboardButton" class="hidden">
<i class="fas fa-chalkboard-teacher"></i> Whiteboard
</button>
<div id="whiteboardSettings" class="dropdown-content fadein">
<div id="whiteboardOptions">
<i class="fas fa-pencil-alt"></i> Line width
<input id="wbDrawingLineWidthEl" type="range" value="3" min="1" max="15" />
<br />
<i class="fas fa-palette"></i> Line color
<br />
<input id="wbDrawingColorEl" type="color" value="#FFFFFF" />
<br />
<i class="fas fa-palette"></i> Background color
<br />
<input id="wbBackgroundColorEl" type="color" value="#000000" />
<br />
</div>
</div>
</div>
<button id="participantsButton" class="hidden"><i class="fas fa-users"></i> Participants</button>
<button id="lockRoomButton" class="hidden"><i class="fas fa-lock-open"></i> Lock room</button>
<button id="unlockRoomButton" class="hidden"><i class="fas fa-lock"></i> Unlock room</button>
<button id="aboutButton" class="hidden"><i class="fas fa-question"></i> About</button>
<button id="exitButton" class="hidden"><i class="fas fa-phone-slash"></i> Leave</button>
<button id="sessionTime" class="far fa-clock"></button>
</div>
<div id="videoMediaContainer">
<!-- <div class="Camera"></div> -->
</div>
<div id="remoteAudios"></div>
<div id="sendFileDiv" class="fadein center">
<div id="sendFileInfo"></div>
<div id="sendFilePercentage"></div>
<progress id="sendProgress" max="0" value="0"></progress>
<button id="sendAbortBtn" class="fas fa-stop-circle">&nbsp; Abort</button>
</div>
<div id="receiveFileDiv" class="fadein center">
<div id="receiveFileInfo"></div>
<div id="receiveFilePercentage"></div>
<progress id="receiveProgress" max="0" value="0"></progress>
<button id="receiveHideBtn" class="fas fa-eye-slash">&nbsp; Hide</button>
</div>
<section id="participants" class="fadein center hidden">
<header id="participantsHeader" class="participants-header">
<div id="participantsTitle" class="participants-header-title"></div>
<div class="participants-header-options">
<button id="participantsRefreshBtn" class="fas fa-sync-alt"></button>
<button id="participantsCloseBtn" class="fas fa-times"></button>
</div>
</header>
<main>
<div id="roomParticipants"></div>
</main>
</section>
<section id="whiteboard" class="fadein center hidden">
<header id="whiteboardHeader" class="whiteboard-header">
<div id="whiteboardTitle" class="whiteboard-header-title"></div>
<div class="whiteboard-header-options">
<button id="whiteboardPencilBtn" class="fas fa-pencil-alt"></button>
<button id="whiteboardObjectBtn" class="fas fa-mouse-pointer"></button>
<button id="whiteboardUndoBtn" class="fas fa-undo"></button>
<button id="whiteboardRedoBtn" class="fas fa-redo"></button>
<button id="whiteboardImgFileBtn" class="far fa-image"></button>
<button id="whiteboardImgUrlBtn" class="fas fa-link"></button>
<button id="whiteboardTextBtn" class="fas fa-spell-check"></button>
<button id="whiteboardLineBtn" class="fas fa-slash"></button>
<button id="whiteboardRectBtn" class="far fa-square"></button>
<button id="whiteboardCircleBtn" class="far fa-circle"></button>
<button id="whiteboardSaveBtn" class="fas fa-save"></button>
<button id="whiteboardEraserBtn" class="fas fa-eraser"></button>
<button id="whiteboardCleanBtn" class="fas fa-trash"></button>
<button id="whiteboardCloseBtn" class="fas fa-times"></button>
</div>
</header>
<main>
<canvas id="wbCanvas"></canvas>
</main>
</section>
<section id="chatRoom" class="chat-room center fadein">
<section id="msger" class="msger">
<header id="chatHeader" class="chat-header">
<div class="chat-header-title"><i class="fas fa-comment-alt"></i> Chat</div>
<div class="chat-header-options">
<button id="chatCleanButton" class="fas fa-trash"></button>
<button id="chatSaveButton" class="fas fa-save"></button>
<button id="chatCloseButton" class="fas fa-times"></button>
</div>
</header>
<main id="chatMsger" class="chat-msger">
<div class="msg left-msg">
<div
class="msg-img"
style="
background-image: url('https://eu.ui-avatars.com/api?name=Participant&size=24&background=random&rounded=true');
"
></div>
<div class="msg-bubble">
<div class="msg-info">
<div class="msg-info-name">Participant</div>
<div class="msg-info-time">00:00:00</div>
</div>
<div class="msg-text">Public message example</div>
</div>
</div>
<div class="msg right-msg">
<div
class="msg-img"
style="
background-image: url('https://eu.ui-avatars.com/api?name=You&size=24&background=random&rounded=true');
"
></div>
<div class="msg-bubble">
<div class="msg-info">
<div class="msg-info-name">You</div>
<div class="msg-info-time">00:00:00</div>
</div>
<div class="msg-text">Public message example</div>
</div>
</div>
</main>
<div class="chat-msger-inputarea">
<input
id="chatMessage"
class="chat-msger-input"
type="text"
placeholder="💬 Enter your message..."
/>
<button id="chatEmojiButton" class="hidden">
<i class="fas fa-smile"></i>
</button>
<button id="chatSendButton" class="hidden">
<i class="fas fa-paper-plane"></i>
</button>
</div>
<div id="chatEmoji" class="hidden fadein">
<emoji-picker class="dark"></emoji-picker>
</div>
</section>
</section>
</body>
</html>

320
public/view/landing.html Normal file
عرض الملف

@@ -0,0 +1,320 @@
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZRF9TVSZ0J"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-ZRF9TVSZ0J');
</script>
<!-- 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, mediasoup, mediasoup-client, 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 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="../images/mirotalksfu.png" />
<!-- 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 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>
</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">
<h1 class="m-0">
<a href="/">
<img class="header-logo-image" src="../images/logo.svg" alt="mirotalk-logo" />
</a>
</h1>
</div>
</div>
</div>
</header>
<main>
<section class="hero">
<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
required. Just get straight to talking, messaging and sharing your screen.
</p>
<div class="hero-cta">
<a class="button button-primary pulse" href="/newroom">TRY NOW</a>
</div>
</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="features section">
<div class="container-sm">
<div class="pricing-inner section-inner">
<div class="pricing-header text-center">
<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 Desktop
and Mobile devices!
</p>
</div>
</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 src="../images/feature-icon-01.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 src="../images/feature-icon-02.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 src="../images/feature-icon-03.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 makes your audio crystal clear.
</p>
</div>
</div>
<div class="feature text-center is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img src="../images/feature-icon-04.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 you
feeling.
</p>
</div>
</div>
<div class="feature text-center is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img src="../images/feature-icon-05.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 Blobs. Save it for use
it in 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 src="../images/feature-icon-06.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 src="../images/feature-icon-01.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 to all participants in the meeting.
</p>
</div>
</div>
<div class="feature text-center is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img src="../images/feature-icon-02.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 don'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 src="../images/feature-icon-03.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">
<h1 style="text-align: center">Meet the team</h1>
<div align="center">
<img src="../images/miroslav-pejic.png" alt="Team member author" width="180" height="180" />
<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>
</div>
</section>
</main>
<br />
<br />
<section class="cta section">
<div class="container">
<h2 style="text-align: center">Try an easier, more secure way of calling.</h2>
<div style="text-align: center">
<a class="button button-primary button-wide-mobile pulse" href="/newroom">Try now</a>
</div>
</div>
</section>
<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="/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>
<a target="_blank" href="https://github.com/miroslavpejic85/mirotalksfu">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title>
<path
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
fill="#0270D7"
/>
</svg>
</a>
</li>
<li>
<a target="_blank" href="https://www.facebook.com/mirotalk">
<span class="screen-reader-text">Facebook</span>
<svg width="16" height="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>
</ul>
<div class="footer-copyright">&copy; 2021 MiroTalk SFU, all rights reserved</div>
</div>
</div>
</footer>
</div>
<script src="../js/landing.js"></script>
</body>
</html>

186
public/view/newroom.html Executable file
عرض الملف

@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZRF9TVSZ0J"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-ZRF9TVSZ0J');
</script>
<!-- Title and Icon -->
<title>MiroTalk SFU - Create your Room name and start the new call.</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 secure video calls, messaging and screen sharing capabilities in the browser."
/>
<meta
name="keywords"
content="webrtc, mediasoup, mediasoup-client, 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 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="../images/mirotalksfu.png" />
<!-- 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 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>
</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">
<h1 class="m-0">
<a href="/">
<img class="header-logo-image" src="../images/logo.svg" alt="Logo" />
</a>
</h1>
</div>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="hero-inner">
<div class="hero-copy">
<h1 class="hero-title mt-0">
Pick name. <br />
Share URL. <br />
Start conference.
</h1>
<p class="hero-paragraph">
Each room has its own disposable URL. Just pick a room name and share your custom
URL. It's really that easy.
</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>
<hr />
<section class="cta section">
<div class="container">
<div class="cta-inner section-inner">
<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>
<input class="button" type="text" id="roomName" value="" />
<button
class="button button-primary button-wide-mobile pulse"
onclick="{window.location.href = '/join/' + document.getElementById('roomName').value}"
>
Join to room
</button>
</div>
</div>
</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="/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>
<a target="_blank" href="https://github.com/miroslavpejic85/mirotalksfu">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title>
<path
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
fill="#0270D7"
/>
</svg>
</a>
</li>
<li>
<a target="_blank" href="https://www.facebook.com/mirotalk">
<span class="screen-reader-text">Facebook</span>
<svg width="16" height="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>
</ul>
<div class="footer-copyright">&copy; 2021 MiroTalk SFU, all rights reserved</div>
</div>
</div>
</footer>
</div>
<script src="../js/landing.js"></script>
<script src="../js/newroom.js"></script>
</body>
</html>

166
public/view/permission.html Executable file
عرض الملف

@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZRF9TVSZ0J"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-ZRF9TVSZ0J');
</script>
<!-- Title and Icon -->
<title>MiroTalk SFU - Allow Video or Audio access to join in the Room.</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" />
<!-- 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 HD quality and latency simply not available with traditional technology."
/>
<meta property="og:image" content="../images/mirotalksfu.png" />
<!-- 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 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>
</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">
<h1 class="m-0">
<a href="/">
<img class="header-logo-image" src="../images/logo.svg" alt="Logo" />
</a>
</h1>
</div>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="hero-inner">
<div class="hero-copy">
<h1 class="hero-title mt-0">Access denied.</h1>
<p class="hero-paragraph" id="message"></p>
<p class="hero-paragraph">
This app will not work without camera or microphone access. Please Try again and
allow it.
</p>
<script>
let qs = new URLSearchParams(window.location.search);
let room_id = qs.get('room_id');
let message = qs.get('message');
console.log('Allow Camera or Audio', {
room_id: room_id,
message: message,
});
document.getElementById('message').innerHTML = message;
</script>
<div class="hero-cta">
<a
class="button button-primary pulse"
onclick="room_id ? window.location.href = '/join/' + room_id : window.location.href = '/newroom';"
>TRY AGAIN</a
>
</div>
</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>
</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="/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>
<a target="_blank" href="https://github.com/miroslavpejic85/mirotalksfu">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title>
<path
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
fill="#0270D7"
/>
</svg>
</a>
</li>
<li>
<a target="_blank" href="https://www.facebook.com/mirotalk">
<span class="screen-reader-text">Facebook</span>
<svg width="16" height="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>
</ul>
<div class="footer-copyright">&copy; 2021 MiroTalk SFU, all rights reserved</div>
</div>
</div>
</footer>
</div>
<script src="../js/landing.js"></script>
</body>
</html>

159
public/view/privacy.html Executable file
عرض الملف

@@ -0,0 +1,159 @@
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZRF9TVSZ0J"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-ZRF9TVSZ0J');
</script>
<!-- Title and Icon -->
<title>MiroTalk SFU - privacy policy.</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" />
<!-- 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 HD quality and latency simply not available with traditional technology."
/>
<meta property="og:image" content="../images/mirotalksfu.png" />
<!-- 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 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>
</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">
<h1 class="m-0">
<a href="/">
<img class="header-logo-image" src="../images/logo.svg" alt="Logo" />
</a>
</h1>
</div>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="hero-inner">
<div class="hero-copy">
<h1 class="hero-title mt-0">Privacy Policy</h1>
<p class="hero-paragraph" id="message"></p>
<p class="hero-paragraph">
<strong>MiroTalk SFU</strong> has an integrated
<a href="https://mediasoup.org/" target="_blank">mediasoup server</a>. Routing is a
multiparty topology, where each participant sends its media to this server, and
receives all other's media from it. Thanks to the SFU architecture, it allows having
many users connected in the same room. The media streams are encrypted using Secure
Real-time Transport Protocol (SRTP).<br /><br />
If you record a meeting, the recording of the meeting is temporarily stored on
<strong>Your browser</strong>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob" target="_blank"
>Blob</a
>, then will be downloaded on Your PC/Mobile Device.<br /><br />
We use Google Analytics to track aggregated usage statistics in order to improve our
service. The maker of
<strong>MiroTalk SFU</strong> has no intention of using personally or selling any of
the above-mentioned data.
</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>
</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>
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>
<a target="_blank" href="https://github.com/miroslavpejic85/mirotalksfu">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title>
<path
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
fill="#0270D7"
/>
</svg>
</a>
</li>
<li>
<a target="_blank" href="https://www.facebook.com/mirotalk">
<span class="screen-reader-text">Facebook</span>
<svg width="16" height="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>
</ul>
<div class="footer-copyright">&copy; 2021 MiroTalk SFU, all rights reserved</div>
</div>
</div>
</footer>
</div>
<script src="../js/landing.js"></script>
</body>
</html>