mirror of https://github.com/aiden09/mirotalksfu
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
298 lines
15 KiB
HTML
298 lines
15 KiB
HTML
5 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
5 years ago
|
<!-- 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>
|
||
|
|
|
||
|
5 years ago
|
<!-- Title and Icon -->
|
||
|
|
|
||
|
|
<title>MiroTalk SFU - Room Video Calls, Messaging and Screen Sharing.</title>
|
||
|
5 years ago
|
<link rel="shortcut icon" href="../images/logo.svg" />
|
||
|
|
<link rel="apple-touch-icon" href="../images/logo.svg" />
|
||
|
5 years ago
|
|
||
|
|
<!-- 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."
|
||
|
|
/>
|
||
|
5 years ago
|
<meta property="og:image" content="../images/mirotalksfu.png" />
|
||
|
5 years ago
|
|
||
|
|
<!-- StyleSheet -->
|
||
|
|
|
||
|
5 years ago
|
<link rel="stylesheet" href="../css/Room.css" />
|
||
|
|
<link rel="stylesheet" href="../css/VideoGrid.css" />
|
||
|
5 years ago
|
|
||
|
|
<!-- 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>
|
||
|
5 years ago
|
<script src="../sfu/MediasoupClient.js"></script>
|
||
|
|
<script src="../js/Room.js"></script>
|
||
|
|
<script src="../js/RoomClient.js"></script>
|
||
|
|
<script src="../js/VideoGrid.js"></script>
|
||
|
5 years ago
|
<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>
|
||
|
5 years ago
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/460/fabric.min.js"></script>
|
||
|
5 years ago
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.4"></script>
|
||
|
5 years ago
|
<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>
|
||
|
5 years ago
|
|
||
|
|
<div id="loadingDiv" class="center pulsate">
|
||
|
|
<h1>Loading...</h1>
|
||
|
|
<pre>
|
||
|
|
Please allow the camera or microphone
|
||
|
|
access to use this app.
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
5 years ago
|
<button id="openNavButton" class="hidden">☰ menu</button>
|
||
|
5 years ago
|
<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>
|
||
|
5 years ago
|
</div>
|
||
|
|
</div>
|
||
|
5 years ago
|
</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>
|
||
|
5 years ago
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
5 years ago
|
<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>
|
||
|
5 years ago
|
<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>
|
||
|
5 years ago
|
<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>
|
||
|
5 years ago
|
<button id="fileShareButton" class="hidden"><i class="fas fa-folder-open"></i> File Sharing</button>
|
||
|
5 years ago
|
<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>
|
||
|
5 years ago
|
<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 />
|
||
|
5 years ago
|
<i class="fas fa-palette"></i> Background color
|
||
|
|
<br />
|
||
|
|
<input id="wbBackgroundColorEl" type="color" value="#000000" />
|
||
|
|
<br />
|
||
|
5 years ago
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
5 years ago
|
<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>
|
||
|
5 years ago
|
</div>
|
||
|
5 years ago
|
|
||
|
|
<div id="videoMediaContainer">
|
||
|
|
<!-- <div class="Camera"></div> -->
|
||
|
5 years ago
|
</div>
|
||
|
5 years ago
|
<div id="remoteAudios"></div>
|
||
|
|
|
||
|
5 years ago
|
<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"> Abort</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
5 years ago
|
<div id="receiveFileDiv" class="fadein center">
|
||
|
|
<div id="receiveFileInfo"></div>
|
||
|
|
<div id="receiveFilePercentage"></div>
|
||
|
|
<progress id="receiveProgress" max="0" value="0"></progress>
|
||
|
5 years ago
|
<button id="receiveHideBtn" class="fas fa-eye-slash"> Hide</button>
|
||
|
5 years ago
|
</div>
|
||
|
|
|
||
|
5 years ago
|
<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>
|
||
|
|
|
||
|
5 years ago
|
<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">
|
||
|
5 years ago
|
<button id="whiteboardPencilBtn" class="fas fa-pencil-alt"></button>
|
||
|
|
<button id="whiteboardObjectBtn" class="fas fa-mouse-pointer"></button>
|
||
|
5 years ago
|
<button id="whiteboardUndoBtn" class="fas fa-undo"></button>
|
||
|
|
<button id="whiteboardRedoBtn" class="fas fa-redo"></button>
|
||
|
5 years ago
|
<button id="whiteboardImgFileBtn" class="far fa-image"></button>
|
||
|
|
<button id="whiteboardImgUrlBtn" class="fas fa-link"></button>
|
||
|
5 years ago
|
<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>
|
||
|
5 years ago
|
<button id="whiteboardSaveBtn" class="fas fa-save"></button>
|
||
|
5 years ago
|
<button id="whiteboardEraserBtn" class="fas fa-eraser"></button>
|
||
|
5 years ago
|
<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>
|
||
|
|
|
||
|
5 years ago
|
<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>
|