1008 أسطر
54 KiB
HTML
1008 أسطر
54 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- 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, chatGPT, 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="../css/Room.css" />
|
|
<link rel="stylesheet" href="../css/VideoGrid.css" />
|
|
|
|
<!-- https://cdnjs.com/libraries/font-awesome -->
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.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 https://getbootstrap.com/docs/5.0/components/-->
|
|
|
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
|
|
|
|
<!-- flatpickr https://flatpickr.js.org/themes/ -->
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
|
|
<link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css" />
|
|
|
|
<!-- Bootstrap 5 -->
|
|
|
|
<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>
|
|
|
|
<script async src="../js/Umami.js"></script>
|
|
|
|
<!-- Js scripts https://cdn.jsdelivr.net -->
|
|
|
|
<script defer src="/socket.io/socket.io.js"></script>
|
|
<script defer src="../sfu/MediasoupClient.js"></script>
|
|
<script defer src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script>
|
|
<script defer src="../js/LocalStorage.js"></script>
|
|
<script defer src="../js/Rules.js"></script>
|
|
<script defer src="../js/Helpers.js"></script>
|
|
<script defer src="../js/Room.js"></script>
|
|
<script defer src="../js/RoomClient.js"></script>
|
|
<script defer src="../js/SpeechRec.js"></script>
|
|
<script defer src="../js/Transcription.js"></script>
|
|
<script defer src="../js/VideoGrid.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/detectrtc@1.4.1/DetectRTC.min.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/fabric@5.3.0-browser/dist/fabric.min.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
|
|
<script defer src="https://unpkg.com/@popperjs/core@2"></script>
|
|
<script defer src="https://unpkg.com/tippy.js@6"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.min.js"></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>
|
|
<img src="../images/loading.gif" style="width: 400px" />
|
|
<pre>
|
|
Please allow the camera or microphone
|
|
access to use this app.
|
|
</pre>
|
|
</div>
|
|
|
|
<section>
|
|
<div id="initUser" class="init-user hidden">
|
|
<!-- <p>Please allow the camera & microphone access to use this app.</p> -->
|
|
<div class="container">
|
|
<video
|
|
id="initVideo"
|
|
playsinline="true"
|
|
autoplay=""
|
|
class="mirror"
|
|
poster="../images/loader.gif"
|
|
style="object-fit: contain"
|
|
></video>
|
|
</div>
|
|
<button id="initVideoButton" class="fas fa-video" onclick="handleVideo(event)"></button>
|
|
<button id="initAudioButton" class="fas fa-microphone" onclick="handleAudio(event)"></button>
|
|
<button id="initAudioVideoButton" class="fas fa-eye" onclick="handleAudioVideo(event)"></button>
|
|
<button id="initStartScreenButton" class="hidden" onclick="toggleScreenSharing()">
|
|
<i class="fas fa-desktop"></i>
|
|
</button>
|
|
<button id="initStopScreenButton" class="hidden" onclick="toggleScreenSharing()">
|
|
<i class="fas fa-stop-circle"></i>
|
|
</button>
|
|
<select id="initVideoSelect" class="form-select text-light bg-dark"></select>
|
|
<select id="initMicrophoneSelect" class="form-select text-light bg-dark"></select>
|
|
<select id="initSpeakerSelect" class="form-select text-light bg-dark"></select>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="control" class="fadein">
|
|
<button id="shareButton" class="hidden"><i class="fas fa-share-alt"></i></button>
|
|
<button id="hideMeButton" class="hidden"><i id="hideMeIcon" class="fas fa-user"></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="swapCameraButton" class="hidden"><i class="fas fa-camera-rotate"></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="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="startRecButton" class="hidden"><i class="fas fa-record-vinyl"></i></button>
|
|
<button id="stopRecButton" style="color: red" class="hidden"><i class="fas fa-record-vinyl"></i></button>
|
|
<button id="raiseHandButton" class="hidden"><i class="fas fa-hand-paper"></i></button>
|
|
<button id="lowerHandButton" class="hidden"><i id="lowerHandIcon" class="fas fa-hand-paper"></i></button>
|
|
<button id="roomEmojiPicker" class="hidden"><i class="fas fa-face-smile"></i></button>
|
|
<button id="chatButton" class="hidden"><i class="fas fa-comments"></i></button>
|
|
<button id="transcriptionButton" class="hidden"><i class="fas fa-closed-captioning"></i></button>
|
|
<button id="participantsButton" class="hidden"><i class="fas fa-users"></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="aboutButton" class="hidden"><i class="fas fa-question"></i></button>
|
|
<button id="exitButton" class="hidden"><i class="fas fa-right-from-bracket"></i></button>
|
|
</div>
|
|
|
|
<div id="emojiPickerContainer" class="roomEmoji fadein">
|
|
<div id="emojiPickerHeader" class="emojiPickerHeader">
|
|
<button id="closeEmojiPickerContainer" class="fas fa-times"></button>
|
|
</div>
|
|
</div>
|
|
<div id="userEmoji" class="userEmoji"></div>
|
|
|
|
<section id="mySettings" class="fadein center hidden">
|
|
<header id="mySettingsHeader">
|
|
<button id="mySettingsCloseBtn" class="fas fa-times"></button>
|
|
</header>
|
|
<main class="mySettingsMain">
|
|
<div class="tab">
|
|
<button id="tabRoomBtn" class="fas fa-home tablinks">
|
|
<p class="tabButtonText">Room</p>
|
|
</button>
|
|
<button id="tabVideoDevicesBtn" class="fas fa-video tablinks">
|
|
<p class="tabButtonText">Video</p>
|
|
</button>
|
|
<button id="tabAudioDevicesBtn" class="fas fa-microphone tablinks">
|
|
<p class="tabButtonText">Audio</p>
|
|
</button>
|
|
<button id="tabRecordingBtn" class="fas fa-record-vinyl tablinks">
|
|
<p class="tabButtonText">Recording</p>
|
|
</button>
|
|
<button id="tabVideoShareBtn" class="fab fa-youtube tablinks">
|
|
<p class="tabButtonText">Media</p>
|
|
</button>
|
|
<button id="tabProfileBtn" class="fas fa-user tablinks">
|
|
<p class="tabButtonText">Profile</p>
|
|
</button>
|
|
<button id="tabAspectBtn" class="fas fa-screwdriver-wrench tablinks">
|
|
<p class="tabButtonText">Aspect</p>
|
|
</button>
|
|
<button id="tabStylingBtn" class="fas fa-palette tablinks">
|
|
<p class="tabButtonText">Style</p>
|
|
</button>
|
|
<button id="tabLanguagesBtn" class="fas fa-globe tablinks">
|
|
<p class="tabButtonText">Language</p>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="tabActions">
|
|
<div id="tabRoom" class="tabcontent">
|
|
<button id="fullScreenButton" class="hidden">
|
|
<i class="fas fa-expand-alt"></i>
|
|
<p>Full screen mode</p>
|
|
</button>
|
|
<br />
|
|
<button id="fileShareButton" class="hidden">
|
|
<i class="fas fa-folder-open"></i>
|
|
<p>File sharing</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>
|
|
<hr style="border: 1px solid grey" />
|
|
<table class="settingsTable">
|
|
<tr id="lobbyButton" class="hidden">
|
|
<td class="custom-width">
|
|
<div class="title">
|
|
<i class="fas fa-shield-halved"></i>
|
|
<p>Lobby</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md title">
|
|
<input id="switchLobby" class="form-check-input" type="checkbox" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="pitchBarButton">
|
|
<td class="custom-width">
|
|
<div class="title">
|
|
<i class="fas fa-microphone-lines"></i>
|
|
<p>Volume bar</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input id="switchPitchBar" class="form-check-input" type="checkbox" checked />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="soundsButton">
|
|
<td class="custom-width">
|
|
<div class="title">
|
|
<i class="fas fa-music"></i>
|
|
<p>Sounds</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input id="switchSounds" class="form-check-input" type="checkbox" checked />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="shareOnJoinButton">
|
|
<td class="custom-width">
|
|
<div class="title">
|
|
<i class="fas fa-share-alt"></i>
|
|
<p>Share</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input id="switchShare" class="form-check-input" type="checkbox" checked />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<hr style="border: 1px solid grey" />
|
|
<table class="settingsTable">
|
|
<tr>
|
|
<td>
|
|
<div class="title">
|
|
<i class="fa-solid fa-person-shelter"></i>
|
|
<p id="roomId" style="cursor: pointer">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="title">
|
|
<i class="fas fa-envelope-circle-check"></i>
|
|
<p id="roomSendEmail" style="cursor: pointer">Send email invitation</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="title">
|
|
<i class="fas fa-clock"></i>
|
|
<p id="sessionTime">00:00:00</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="tabVideoDevices" class="tabcontent">
|
|
<br />
|
|
<div class="title">
|
|
<i class="fas fa-video"></i>
|
|
<p>Video Source:</p>
|
|
</div>
|
|
<select id="videoSelect" class="form-select text-light bg-dark"></select>
|
|
<br />
|
|
<div class="title">
|
|
<i class="fas fa-palette"></i>
|
|
<p>Video Quality:</p>
|
|
</div>
|
|
<select id="videoQuality" class="form-select text-light bg-dark">
|
|
<option value="default">🎥 Default</option>
|
|
<option value="qvga">🎥 QVGA</option>
|
|
<option value="vga">🎥 VGA</option>
|
|
<option value="hd">🎥 HD</option>
|
|
<option value="fhd">🎥 FULL HD</option>
|
|
<option value="2k">🎥 2k</option>
|
|
<option value="4k">🎥 4K</option>
|
|
</select>
|
|
<br />
|
|
<div class="title">
|
|
<i class="fa-solid fa-camera"></i>
|
|
<p>Camera FPS:</p>
|
|
</div>
|
|
<br />
|
|
<select id="videoFps" class="form-select text-light bg-dark">
|
|
<option value="max">max frame-per-second</option>
|
|
<option value="30">30 - frame-per-second</option>
|
|
<option value="15">15 - frame-per-second</option>
|
|
<option value="5">5 - frame-per-second</option>
|
|
</select>
|
|
<br />
|
|
<div id="ScreenFpsDiv" class="hidden">
|
|
<div class="title">
|
|
<i class="fa-solid fa-desktop"></i>
|
|
<p>Screen FPS:</p>
|
|
</div>
|
|
<br />
|
|
<select id="screenFps" class="form-select text-light bg-dark">
|
|
<option value="max">max frame-per-second</option>
|
|
<option value="30">30 - frame-per-second</option>
|
|
<option value="15">15 - frame-per-second</option>
|
|
<option value="5">5 - frame-per-second</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tabAudioDevices" class="tabcontent">
|
|
<br />
|
|
<div class="title">
|
|
<i class="fas fa-microphone"></i>
|
|
<p>Microphone:</p>
|
|
</div>
|
|
<select id="microphoneSelect" class="form-select text-light bg-dark"></select>
|
|
<br />
|
|
<div class="volume-container">
|
|
<div class="volume-bar"></div>
|
|
<div class="volume-bar"></div>
|
|
<div class="volume-bar"></div>
|
|
<div class="volume-bar"></div>
|
|
<div class="volume-bar"></div>
|
|
<div class="volume-bar"></div>
|
|
<div class="volume-bar"></div>
|
|
<div class="volume-bar"></div>
|
|
<div class="volume-bar"></div>
|
|
<div class="volume-bar"></div>
|
|
</div>
|
|
<br />
|
|
<div class="dropdown">
|
|
<button
|
|
class="dropdown-toggle"
|
|
type="button"
|
|
id="micOptionsButton"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="fas fa-screwdriver-wrench"></i>
|
|
<p>Advance options</p>
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="micOptionsButton">
|
|
<!-- onclick="event.stopPropagation()" -->
|
|
<table class="settingsTable">
|
|
<tr id="autoGainControlButton">
|
|
<td class="microphone-table-width">
|
|
<div class="title">
|
|
<!-- <i class="fas fa-ear-listen"></i> -->
|
|
<p>Auto gain control</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input
|
|
id="switchAutoGainControl"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="echoCancellationButton">
|
|
<td class="microphone-table-width">
|
|
<div class="title">
|
|
<!-- <i class="fas fa-ear-listen"></i> -->
|
|
<p>Echo cancellation</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input
|
|
id="switchEchoCancellation"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
checked
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="noiseSuppressionButton">
|
|
<td class="microphone-table-width">
|
|
<div class="title">
|
|
<!-- <i class="fas fa-ear-listen"></i> -->
|
|
<p>Noise suppression</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input
|
|
id="switchNoiseSuppression"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
checked
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="sampleRateButton">
|
|
<td class="microphone-table-width">
|
|
<div class="title">
|
|
<!-- <i class="fas fa-microphone-lines"></i> -->
|
|
<p>Sample rate</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<select
|
|
id="sampleRateSelect"
|
|
class="form-select form-select-sm text-light bg-dark"
|
|
>
|
|
<option value="48000">48000 Hz</option>
|
|
<option value="44100">44100 Hz</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr id="sampleSizeButton">
|
|
<td class="microphone-table-width">
|
|
<div class="title">
|
|
<!-- <i class="fas fa-microphone-lines"></i> -->
|
|
<p>Sample size</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<select
|
|
id="sampleSizeSelect"
|
|
class="form-select form-select-sm text-light bg-dark"
|
|
>
|
|
<option value="16">16 bits</option>
|
|
<option value="32">32 bits</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr id="channelCountButton">
|
|
<td class="microphone-table-width">
|
|
<div class="title">
|
|
<!-- <i class="fas fa-microphone-lines"></i> -->
|
|
<p>Channel count</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<select
|
|
id="channelCountSelect"
|
|
class="form-select form-select-sm text-light bg-dark"
|
|
>
|
|
<option value="1">1 (mono)</option>
|
|
<option value="2">2 (stereo)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr id="micLatencyButton">
|
|
<td class="microphone-table-width">
|
|
<div class="title">
|
|
<!-- <i class="fab fa-audible"></i> -->
|
|
<p>Latency</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="title">
|
|
<input
|
|
type="range"
|
|
class="form-range"
|
|
id="micLatencyRange"
|
|
name="latency"
|
|
min="10"
|
|
max="1000"
|
|
value="50"
|
|
step="10"
|
|
/>
|
|
<p><span id="micLatencyValue">50</span> ms</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="micVolumeButton">
|
|
<td class="microphone-table-width">
|
|
<div class="title">
|
|
<!-- <i class="fas fa-volume-high"></i> -->
|
|
<p>Volume</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<input
|
|
type="range"
|
|
class="form-range"
|
|
id="micVolumeRange"
|
|
name="volume"
|
|
min="0"
|
|
max="100"
|
|
value="100"
|
|
step="10"
|
|
/>
|
|
<p><span id="micVolumeValue">100</span> %</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button class="btn btn-primary" id="applyAudioOptionsButton">
|
|
Apply options
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="speakerSelectDiv">
|
|
<hr style="border: 1px solid grey" />
|
|
<div class="title">
|
|
<i class="fas fa-headphones"></i>
|
|
<p>Speaker:</p>
|
|
</div>
|
|
<select id="speakerSelect" class="form-select text-light bg-dark"></select>
|
|
<hr style="border: 1px solid grey" />
|
|
<button id="speakerTestBtn">
|
|
<i class="fa-solid fa-circle-play"></i>
|
|
<p>Test speaker</p>
|
|
</button>
|
|
<br />
|
|
</div>
|
|
<div id="pushToTalkDiv" class="hidden">
|
|
<hr style="border: 1px solid grey" />
|
|
<table class="settingsTable">
|
|
<tr>
|
|
<td class="width-150">
|
|
<div class="title">
|
|
<i class="fa-solid fa-hand-pointer"></i>
|
|
<p>Push to talk</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md title">
|
|
<input id="switchPushToTalk" class="form-check-input" type="checkbox" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<br />
|
|
</div>
|
|
|
|
<div id="tabRecording" class="tabcontent">
|
|
<img id="recImage" src="../images/recording.png" />
|
|
<div id="roomRecording" class="hidden">
|
|
<table class="settingsTable">
|
|
<tr>
|
|
<td class="custom-width">
|
|
<div class="title">
|
|
<i class="fa-solid fa-user-shield"></i>
|
|
<p>Only host</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md title">
|
|
<input
|
|
id="switchHostOnlyRecording"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<hr style="border: 1px solid grey" />
|
|
</div>
|
|
<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>
|
|
<div id="recordingTime" class="hidden">
|
|
<hr style="border: 1px solid grey" />
|
|
<table class="settingsTable">
|
|
<tr>
|
|
<td class="custom-width">
|
|
<div class="title">
|
|
<i style="color: red" class="fa-solid fa-circle pulsate"></i>
|
|
<p>REC time:</p>
|
|
</div>
|
|
</td>
|
|
<td id="recordingStatus">0s</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="recordingMessage" class="hidden">
|
|
<div class="title">
|
|
<i class="fa-solid fa-ban fa-2xl"></i>
|
|
<p>The presenter has disabled meeting recording.</p>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div id="lastRecordingInfo" class="hidden"></div>
|
|
</div>
|
|
|
|
<div id="tabVideoShare" class="tabcontent">
|
|
<button id="videoShareButton">
|
|
<i class="fab fa-youtube"></i>
|
|
<p>Share a Video or Audio</p>
|
|
</button>
|
|
<br />
|
|
<button id="videoCloseBtn" class="hidden">
|
|
<i class="fas fa-times"></i>
|
|
<p>Close Video or Audio</p>
|
|
</button>
|
|
<br />
|
|
</div>
|
|
|
|
<div id="tabProfile" class="tabcontent">
|
|
<div>
|
|
<img id="myProfileAvatar" />
|
|
</div>
|
|
<table class="settingsTable">
|
|
<tr>
|
|
<td>
|
|
<div class="title">
|
|
<i class="fa-solid fa-user"></i>
|
|
<p>Username:</p>
|
|
<p id="userName">UserName</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="title">
|
|
<i class="fa-solid fa-user-shield"></i>
|
|
<p>Presenter:</p>
|
|
<p id="isUserPresenter">true</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="tabAspect" class="tabcontent">
|
|
<br />
|
|
<div class="title">
|
|
<i class="fa-solid fa-tv"></i>
|
|
<p>Aspect ratio:</p>
|
|
</div>
|
|
<br />
|
|
<select id="BtnAspectRatio" 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 />
|
|
<div class="title">
|
|
<i class="fa-solid fa-film"></i>
|
|
<p>Video Object fit:</p>
|
|
</div>
|
|
<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 class="title">
|
|
<i class="fa-solid fa-circle-play"></i>
|
|
<p>Video Controls:</p>
|
|
</div>
|
|
<br />
|
|
<select id="BtnVideoControls" class="form-select text-light bg-dark">
|
|
<option value="off">off</option>
|
|
<option value="on">on</option>
|
|
</select>
|
|
<br />
|
|
</div>
|
|
|
|
<div id="tabStyling" class="tabcontent">
|
|
<br />
|
|
<div class="title">
|
|
<i class="fa-solid fa-palette"></i>
|
|
<p>Theme:</p>
|
|
</div>
|
|
<br />
|
|
<select id="selectTheme" class="form-select text-light bg-dark">
|
|
<option value="dark">⚫ Dark</option>
|
|
<option value="grey">⚪ Grey</option>
|
|
<option value="green">🟢 Green</option>
|
|
<option value="blue">🔵 Blue</option>
|
|
<option value="red">🔴 Red</option>
|
|
</select>
|
|
<br />
|
|
<div class="title">
|
|
<i class="fa-solid fa-up-down-left-right"></i>
|
|
<p>Buttons bar:</p>
|
|
</div>
|
|
<br />
|
|
<select id="BtnsBarPosition" class="form-select text-light bg-dark">
|
|
<option value="vertical">Vertical</option>
|
|
<option value="horizontal">Horizontal</option>
|
|
</select>
|
|
<br />
|
|
<div id="pinUnpinGridDiv" class="hidden">
|
|
<div class="title">
|
|
<i class="fa-solid fa-map-pin"></i>
|
|
<p>Pin video position:</p>
|
|
</div>
|
|
<br />
|
|
<select id="pinVideoPosition" class="form-select text-light bg-dark">
|
|
<option value="vertical">Vertical</option>
|
|
<option value="horizontal">Horizontal</option>
|
|
<option value="top">Top</option>
|
|
</select>
|
|
</div>
|
|
<br />
|
|
</div>
|
|
|
|
<div id="tabLanguages" class="tabcontent">
|
|
<br />
|
|
<div class="title">
|
|
<i class="fa-solid fa-language"></i>
|
|
<p>Language:</p>
|
|
</div>
|
|
<br />
|
|
<div id="google_translate_element"></div>
|
|
<br />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</section>
|
|
|
|
<div id="videoPinMediaContainer"></div>
|
|
<div id="videoMediaContainer">
|
|
<!-- <div class="Camera"></div> -->
|
|
</div>
|
|
<div id="localAudio"></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"><i class="fas fa-stop-circle"></i> 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"><i class="fas fa-eye-slash"></i> Hide</button>
|
|
</div>
|
|
|
|
<section id="participants" class="fadein center hidden">
|
|
<header id="participantsHeader" class="participants-header">
|
|
<div class="participants-header-options">
|
|
<button id="participantsCloseBtn" class="fas fa-times"></button>
|
|
<button id="participantsSaveBtn" class="hidden"><i class="fas fa-save"></i></button>
|
|
</div>
|
|
<div id="participantsTitle" class="participants-header-title"></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 class="form-check form-switch form-switch-md" style="margin-left: 10px">
|
|
<input id="whiteboardLockButton" class="form-check-input" type="checkbox" />
|
|
</div>
|
|
</div>
|
|
<div id="whiteboardOptions" class="whiteboard-header-options">
|
|
<button id="whiteboardGhostButton" class="fas fa-circle-half-stroke"></button>
|
|
<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="whiteboardPdfFileBtn" class="far fa-file-pdf"></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="whiteboardTriangleBtn" class="fas">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
fill="#FFFFFF"
|
|
>
|
|
<path d="M12 5.887l8.468 14.113h-16.936l8.468-14.113zm0-3.887l-12 20h24l-12-20z" />
|
|
</svg>
|
|
</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 fadein">
|
|
<section id="msger" class="msger">
|
|
<header id="chatHeader" class="chat-header">
|
|
<div class="chat-header-title">
|
|
<button id="chatCloseButton" class="fas fa-times"></button>
|
|
<button id="chatTogglePin" class="hidden"><i class="fas fa-map-pin"></i></button>
|
|
<button id="chatMaxButton" class="hidden"><i class="fas fa-expand"></i></button>
|
|
<button id="chatMinButton" class="hidden"><i class="fas fa-compress"></i></button>
|
|
<div style="margin-left: 10px" class="title">
|
|
<i class="fa-solid fa-eye"></i>
|
|
<div style="margin-left: 5px" class="form-check form-switch form-switch-md">
|
|
<input class="form-check-input" type="checkbox" id="showChatOnMsg" checked />
|
|
</div>
|
|
</div>
|
|
<div id="speechMsgDiv" class="title">
|
|
<i class="fas fa-volume-high"></i>
|
|
<div style="margin-left: 5px" class="form-check form-switch form-switch-md">
|
|
<input class="form-check-input" type="checkbox" id="speechIncomingMsg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-header-options">
|
|
<button id="chatGhostButton" class="fas fa-circle-half-stroke"></button>
|
|
<button id="chatSaveButton" class="fas fa-save"></button>
|
|
<button id="chatCleanButton" class="fas fa-trash"></button>
|
|
</div>
|
|
</header>
|
|
<main id="chatMsger" class="chat-msger">
|
|
<!-- chat messages -->
|
|
</main>
|
|
<div class="chat-msger-inputarea">
|
|
<textarea
|
|
rows="1"
|
|
cols="1"
|
|
id="chatMessage"
|
|
class="chat-msger-input"
|
|
placeholder="💬 Write a message..."
|
|
></textarea>
|
|
</div>
|
|
<div class="chat-msger-buttons">
|
|
<button id="chatEmojiButton" class="hidden">
|
|
<i class="fas fa-smile"></i>
|
|
</button>
|
|
<button id="chatMarkdownButton" class="hidden">
|
|
<i class="fab fa-markdown"></i>
|
|
</button>
|
|
<button id="chatGPTButton" class="hidden">
|
|
<i class="fas fa-robot"></i>
|
|
</button>
|
|
<button id="chatShareFileButton" class="hidden">
|
|
<i class="fas fa-paperclip"></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="chatCleanTextButton" class="hidden">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
<button id="chatPasteButton" class="hidden">
|
|
<i class="fas fa-paste"></i>
|
|
</button>
|
|
<button id="chatSendButton" class="hidden">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</div>
|
|
<div id="chatEmoji" class="hidden fadein chatEmojiPicker"></div>
|
|
</section>
|
|
</section>
|
|
|
|
<section id="transcriptionRoom" class="transcription-room fadein">
|
|
<section id="transcriptionSection" class="transcription">
|
|
<header id="transcriptionHeader" class="transcription-header">
|
|
<div class="transcription-header-title">
|
|
<button id="transcriptionCloseBtn" class="fas fa-times"></button>
|
|
<button id="transcriptionTogglePinBtn" class="fas fa-map-pin"></button>
|
|
<button id="transcriptionMaxBtn" class=""><i class="fas fa-expand"></i></button>
|
|
<button id="transcriptionMinBtn" class="hidden"><i class="fas fa-compress"></i></button>
|
|
<button id="transcriptionSpeechStatus" class="fas fa-microphone-alt"></button>
|
|
<div style="margin-left: 10px" class="title">
|
|
<i class="fa-solid fa-eye"></i>
|
|
<div style="margin-left: 5px" class="form-check form-switch form-switch-md">
|
|
<input class="form-check-input" type="checkbox" id="transcriptShowOnMsg" checked />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="transcription-header-options">
|
|
<button id="transcriptionGhostBtn" class="fas fa-circle-half-stroke"></button>
|
|
<button id="transcriptionSaveBtn" class="fas fa-save"></button>
|
|
<button id="transcriptionCleanBtn" class="fas fa-trash"></button>
|
|
</div>
|
|
</header>
|
|
<main id="transcriptionChat" class="transcription-chat"></main>
|
|
<div class="transcription-inputarea">
|
|
<select id="transcriptionLanguage" class="form-select text-light bg-dark"></select>
|
|
<select id="transcriptionDialect" class="form-select text-light bg-dark"></select>
|
|
<button id="transcriptionSpeechStart" class=""><i class="fas fa-play"></i></button>
|
|
<button id="transcriptionSpeechStop" class="hidden"><i class="fas fa-stop"></i></button>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<div id="transcriptionPopup" class="transcriptio-popup"></div>
|
|
|
|
<section id="lobby" class="fadein center hidden">
|
|
<header id="lobbyHeader" class="lobby-header">
|
|
<div id="lobbyHeaderTitle" class="lobby-header-title">Lobby users</div>
|
|
</header>
|
|
<main>
|
|
<div id="lobbyUsers">
|
|
<table id="lobbyTb">
|
|
<tr>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
<tr id="lobbyAll">
|
|
<td> <i class="fas fa-users fa-lg"></i></td>
|
|
<td>All</td>
|
|
<td>
|
|
<button id="lobbyAcceptAllBtn" onclick="rc.lobbyAcceptAll()">
|
|
<i class="fas fa-check"></i>
|
|
</button>
|
|
</td>
|
|
<td>
|
|
<button id="lobbyRejectAllBtn" onclick="rc.lobbyRejectAll()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
</section>
|
|
|
|
<!--
|
|
Start Google Translate
|
|
-->
|
|
<script>
|
|
function googleTranslateElementInit() {
|
|
new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
|
|
}
|
|
</script>
|
|
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
|
|
</body>
|
|
</html>
|