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.
378 lines
18 KiB
HTML
378 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- https://github.com/mikecao/umami -->
|
|
|
|
<script
|
|
async
|
|
defer
|
|
data-website-id="28098c62-a100-44a1-8f03-234b3f0a8194"
|
|
src="https://stats.mirotalk.org/umami.js"
|
|
></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, 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.org/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/SpeechRec.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/500/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>
|
|
|
|
<div id="control" class="fadein">
|
|
<button id="shareButton" class="hidden"><i class="fas fa-share-alt"></i></button>
|
|
<button id="startAudioButton" class="hidden"><i class="fas fa-microphone-slash"></i></button>
|
|
<button id="stopAudioButton" class="hidden"><i class="fas fa-microphone"></i></button>
|
|
<button id="startVideoButton" class="hidden"><i class="fas fa-video-slash"></i></button>
|
|
<button id="stopVideoButton" class="hidden"><i class="fas fa-video"></i></button>
|
|
<button id="startScreenButton" class="hidden"><i class="fas fa-desktop"></i></button>
|
|
<button id="stopScreenButton" class="hidden"><i class="fas fa-stop-circle"></i></button>
|
|
<button id="swapCameraButton" class="hidden"><i class="fas fa-sync-alt"></i></button>
|
|
<button id="chatButton" class="hidden"><i class="fas fa-comments"></i></button>
|
|
<button id="whiteboardButton" class="hidden"><i class="fas fa-chalkboard-teacher"></i></button>
|
|
<button id="settingsButton" class="hidden"><i class="fas fa-cogs"></i></button>
|
|
<button id="exitButton" class="hidden"><i class="fas fa-phone-slash"></i></button>
|
|
</div>
|
|
|
|
<section id="mySettings" class="fadein center hidden">
|
|
<header id="mySettingsHeader">
|
|
<button id="mySettingsCloseBtn" class="fas fa-times"></button>
|
|
</header>
|
|
<main>
|
|
<br />
|
|
|
|
<div class="tab">
|
|
<button id="tabDevicesBtn" class="fas fa-cog tablinks"></button>
|
|
<button id="tabRoomBtn" class="fas fa-home tablinks"></button>
|
|
<button id="tabRecordingBtn" class="fas fa-record-vinyl tablinks"></button>
|
|
<button id="tabYoutubeBtn" class="fab fa-youtube tablinks"></button>
|
|
<button id="tabAspectBtn" class="fas fa-cog tablinks"></button>
|
|
<button id="tabStylingBtn" class="fas fa-palette tablinks"></button>
|
|
</div>
|
|
|
|
<div id="tabDevices" class="tabcontent">
|
|
<br />
|
|
<i class="fas fa-video"></i>
|
|
<p>Video:</p>
|
|
<select id="videoSelect" class="form-select text-light bg-dark"></select>
|
|
<br />
|
|
<i class="fas fa-microphone"></i>
|
|
<p>Microphone:</p>
|
|
<select id="microphoneSelect" class="form-select text-light bg-dark"></select>
|
|
<br />
|
|
<i class="fas fa-volume-up"></i>
|
|
<p>Speaker:</p>
|
|
<select id="speakerSelect" class="form-select text-light bg-dark"></select>
|
|
<br />
|
|
</div>
|
|
|
|
<div id="tabRoom" class="tabcontent">
|
|
<br />
|
|
<button id="fullScreenButton" class="hidden">
|
|
<i class="fas fa-expand-alt"></i>
|
|
<p>Full screen mode</p>
|
|
</button>
|
|
<br />
|
|
<button id="raiseHandButton" class="hidden">
|
|
<i class="fas fa-hand-paper"></i>
|
|
<p>Raise hand</p>
|
|
</button>
|
|
<button id="lowerHandButton" class="hidden">
|
|
<i class="fas fa-hand-paper"></i>
|
|
<p>Lower hand</p>
|
|
</button>
|
|
<br />
|
|
<button id="fileShareButton" class="hidden">
|
|
<i class="fas fa-folder-open"></i>
|
|
<p>File sharing</p>
|
|
</button>
|
|
<br />
|
|
<button id="participantsButton" class="hidden">
|
|
<i class="fas fa-users"></i>
|
|
<p>Participants</p>
|
|
</button>
|
|
<br />
|
|
<button id="lockRoomButton" class="hidden">
|
|
<i class="fas fa-lock-open"></i>
|
|
<p>Lock room</p>
|
|
</button>
|
|
<button id="unlockRoomButton" class="hidden">
|
|
<i class="fas fa-lock"></i>
|
|
<p>Unlock room</p>
|
|
</button>
|
|
<br />
|
|
<button id="aboutButton" class="hidden">
|
|
<i class="fas fa-question"></i>
|
|
<p>About</p>
|
|
</button>
|
|
<br />
|
|
<button id="sessionTimeButton">
|
|
<i class="fas fa-clock"></i>
|
|
<p id="sessionTime"></p>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="tabRecording" class="tabcontent">
|
|
<br />
|
|
<button id="startRecButton" class="hidden">
|
|
<i class="fas fa-record-vinyl"></i>
|
|
<p>Start recording</p>
|
|
</button>
|
|
<button id="stopRecButton" class="hidden">
|
|
<i class="fas fa-stop-circle"></i>
|
|
<p>Stop recording</p>
|
|
</button>
|
|
<br />
|
|
<button id="pauseRecButton" class="hidden">
|
|
<i class="far fa-pause-circle"></i>
|
|
<p>Pause recording</p>
|
|
</button>
|
|
<button id="resumeRecButton" class="hidden">
|
|
<i class="far fa-play-circle"></i>
|
|
<p>Resume recording</p>
|
|
</button>
|
|
<br />
|
|
<p id="recordingStatus">🔴 REC 0s</p>
|
|
<br />
|
|
</div>
|
|
|
|
<div id="tabYoutube" class="tabcontent">
|
|
<br />
|
|
<button id="youTubeShareButton">
|
|
<i class="fab fa-youtube"></i>
|
|
<p>Share YouTube</p>
|
|
</button>
|
|
<br />
|
|
<button id="youTubeCloseBtn" class="hidden">
|
|
<i class="fas fa-times"></i>
|
|
<p>Close YouTube</p>
|
|
</button>
|
|
<br />
|
|
</div>
|
|
|
|
<div id="tabAspect" class="tabcontent">
|
|
<br />
|
|
<p>Aspect ratio:</p>
|
|
<br />
|
|
<select id="BtnsAspectRatio" class="form-select text-light bg-dark">
|
|
<option value="0">default</option>
|
|
<option value="1">4:3</option>
|
|
<option value="2">16:9</option>
|
|
<option value="3">1:1</option>
|
|
<option value="4">1:2</option>
|
|
</select>
|
|
<br />
|
|
<p>Video Object fit:</p>
|
|
<br />
|
|
<select id="BtnVideoObjectFit" class="form-select text-light bg-dark">
|
|
<option value="fill">fill</option>
|
|
<option value="contain">contain</option>
|
|
<option value="cover">cover</option>
|
|
<option value="scale-down">scale-down</option>
|
|
<option value="none">none</option>
|
|
</select>
|
|
<br />
|
|
</div>
|
|
|
|
<div id="tabStyling" class="tabcontent">
|
|
<br />
|
|
<p>Theme:</p>
|
|
<br />
|
|
<select id="selectTheme" class="form-select text-light bg-dark">
|
|
<option value="dark">⚫ Dark</option>
|
|
<option value="grey">⚪ Grey</option>
|
|
</select>
|
|
<br />
|
|
<p>Buttons bar:</p>
|
|
<br />
|
|
<select id="BtnsBarPosition" class="form-select text-light bg-dark">
|
|
<option value="vertical">Vertical</option>
|
|
<option value="horizontal">Horizontal</option>
|
|
</select>
|
|
<br />
|
|
</div>
|
|
</main>
|
|
</section>
|
|
|
|
<div id="videoMediaContainer">
|
|
<!-- <div class="Camera"></div> -->
|
|
</div>
|
|
<div id="remoteAudios"></div>
|
|
|
|
<div id="sendFileDiv" class="fadein center">
|
|
<img id="imgShareSend" src="../images/share.png" alt="mirotalksfu-share-send" class="center-img" /><br />
|
|
<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>
|
|
|
|
<div id="receiveFileDiv" class="fadein center">
|
|
<img
|
|
id="imgShareReceive"
|
|
src="../images/share.png"
|
|
alt="mirotalksfu-share-receive"
|
|
class="center-img"
|
|
/><br />
|
|
<div id="receiveFileInfo"></div>
|
|
<div id="receiveFilePercentage"></div>
|
|
<progress id="receiveProgress" max="0" value="0"></progress>
|
|
<button id="receiveHideBtn" class="fas fa-eye-slash"> 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">
|
|
<button id="whiteboardCloseBtn" class="fas fa-times"></button>
|
|
</div>
|
|
<div class="whiteboard-header-options">
|
|
<input id="wbBackgroundColorEl" class="whiteboardColorPicker" type="color" value="#000000" />
|
|
<input id="wbDrawingColorEl" class="whiteboardColorPicker" type="color" value="#FFFFFF" />
|
|
<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>
|
|
</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">
|
|
<!-- chat messages -->
|
|
</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="chatSpeechStartButton" class="hidden">
|
|
<i class="fas fa-microphone-slash"></i>
|
|
</button>
|
|
<button id="chatSpeechStopButton" class="hidden">
|
|
<i class="fas fa-microphone"></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>
|