229 أسطر
12 KiB
HTML
229 أسطر
12 KiB
HTML
<!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="/modules/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://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">☰ open</button>
|
|
<div id="control" class="sidenav hidden">
|
|
<button id="closeNavButton" class="closebtn">×</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="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>
|
|
|
|
<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="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>
|