1748 أسطر
77 KiB
HTML
1748 أسطر
77 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Title and Icon -->
|
|
|
|
<title id="title">CodePill</title>
|
|
<link id="icon" rel="shortcut icon" href="../images/logo.svg" />
|
|
<link id="appleTouchIcon" rel="apple-touch-icon" href="../images/logo.svg" />
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css"
|
|
/>
|
|
|
|
<!-- Meta Information -->
|
|
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
|
|
/>
|
|
<meta
|
|
id="description"
|
|
name="description"
|
|
content="CodePill powered by WebRTC and mediasoup, Real-time Simple Secure Fast video calls, messaging and screen sharing capabilities in the browser."
|
|
/>
|
|
<meta
|
|
id="keywords"
|
|
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="{{OG_TYPE}}" />
|
|
<meta property="og:site_name" content="{{OG_SITE_NAME}}" />
|
|
<meta property="og:title" content="{{OG_TITLE}}" />
|
|
<meta property="og:description" content="{{OG_DESCRIPTION}}" />
|
|
<meta property="og:image" content="{{OG_IMAGE}}" />
|
|
<meta property="og:url" content="{{OG_URL}}" />
|
|
|
|
<!-- StyleSheet -->
|
|
<link rel="stylesheet" href="../css/Root.css" />
|
|
<link rel="stylesheet" href="../css/Room.css" />
|
|
<link rel="stylesheet" href="../css/VideoGrid.css" />
|
|
<link rel="stylesheet" href="../css/GroupChat.css" />
|
|
<link rel="stylesheet" href="../css/Polls.css" />
|
|
<link rel="stylesheet" href="../css/Editor.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" />
|
|
|
|
<!-- pickr https://github.com/simonwep/pickr -->
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css" />
|
|
|
|
<!-- Highlight https://github.com/highlightjs/highlight.js -->
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/atom-one-dark.min.css"
|
|
/>
|
|
|
|
<!-- Quill https://github.com/slab/quill -->
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" />
|
|
|
|
<!-- Modern or es5 bundle -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- axios -->
|
|
|
|
<script async src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
|
|
<!-- UAParser -->
|
|
|
|
<script defer src="https://cdn.jsdelivr.net/npm/ua-parser-js@latest/dist/ua-parser.min.js"></script>
|
|
|
|
<script async src="../js/Umami.js"></script>
|
|
<script defer src="../js/Brand.js"></script>
|
|
<script async src="../js/Translate.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://cdn.jsdelivr.net/npm/xss/dist/xss.min.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/SpeechRec.js"></script>
|
|
<script defer src="../js/Transcription.js"></script>
|
|
<script defer src="../js/VideoGrid.js"></script>
|
|
<script defer src="../js/VirtualBackground.js"></script>
|
|
<script defer src="../js/NodeProcessor.js"></script>
|
|
<script defer src="../js/FixWebmDuration.js"></script>
|
|
<script defer src="../js/RoomClient.js"></script>
|
|
<script defer src="../js/Room.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/marked/marked.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://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy-bundle.umd.min.js"></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>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/gifler@0.1.0/gifler.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
|
|
<section>
|
|
<div id="initUser" class="init-user hidden">
|
|
<div id="initVideoContainer" class="init-video-container">
|
|
<video
|
|
id="initVideo"
|
|
playsinline="true"
|
|
autoplay=""
|
|
class="mirror"
|
|
poster="../images/loader.gif"
|
|
></video>
|
|
<div id="imageGrid" class="image-grid fadein"></div>
|
|
<span id="initErrorMessage" class="show-error"></span>
|
|
</div>
|
|
<div class="initComands">
|
|
<button id="initVideoAudioRefreshButton" class="ph ph-arrow-clockwise"></button>
|
|
<!-- <button id="initAudioVideoButton" class="ph ph-eye"></button> -->
|
|
<button id="initVideoButton" class="ph ph-video-camera"></button>
|
|
<button id="initAudioButton" class="ph ph-microphone"></button>
|
|
<button id="initVirtualBackgroundButton" class="ph ph-image hidden"></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>
|
|
</div>
|
|
<div id="usernameEmoji" class="usernameEmoji fadein center hidden"></div>
|
|
<div id="initImageUrlModal" class="imageUrlModal">
|
|
<div class="imageUrlModal-content fadein">
|
|
<h2>Paste Image URL</h2>
|
|
<input type="text" id="initImageUrlInput" placeholder="Enter the image URL here..." />
|
|
<button id="initSaveImageUrlBtn">Save</button>
|
|
<button id="initCancelImageUrlBtn">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="imageUrlModal" class="imageUrlModal">
|
|
<div class="imageUrlModal-content fadein">
|
|
<h2>Paste Image URL</h2>
|
|
<input type="text" id="imageUrlInput" placeholder="Enter the image URL here..." />
|
|
<button id="saveImageUrlBtn">Save</button>
|
|
<button id="cancelImageUrlBtn">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="qrRoomPopupContainer" class="hidden top-center fadein">
|
|
<canvas id="qrRoomPopup"></canvas>
|
|
<div id="qrText">Scan to join the room</div>
|
|
</div>
|
|
|
|
<div id="control" class="fadein">
|
|
<button id="shareButton" class="hidden"><i class="ph ph-share-network"></i></button>
|
|
<button id="hideMeButton" class="hidden"><i id="hideMeIcon" class="ph ph-user"></i></button>
|
|
<button id="startRecButton" class="hidden"><i class="ph ph-record"></i></button>
|
|
<button id="stopRecButton" class="hidden"><i class="ph ph-record cr"></i></button>
|
|
<button id="fullScreenButton" class="hidden"><i id="fullScreenIcon" class="ph ph-arrows-out"></i></button>
|
|
<button id="emojiRoomButton" class="hidden"><i class="ph ph-smiley"></i></button>
|
|
<button id="transcriptionButton" class="hidden"><i class="ph ph-closed-captioning"></i></button>
|
|
<button id="pollButton" class="hidden"><i class="ph ph-chart-bar"></i></button>
|
|
<button id="editorButton" class="hidden"><i class="ph ph-note-pencil"></i></button>
|
|
<button id="whiteboardButton" class="hidden"><i class="ph ph-chalkboard"></i></button>
|
|
<button id="documentPiPButton" class="hidden"><i class="ph ph-picture-in-picture"></i></button>
|
|
<button id="snapshotRoomButton" class="hidden"><i class="ph ph-camera"></i></button>
|
|
<button id="restartICEButton" class="hidden"><i class="ph ph-satellite"></i></button>
|
|
<button id="aboutButton" class="hidden"><i class="ph ph-question"></i></button>
|
|
</div>
|
|
|
|
|
|
<div id="bottomButtons" class="fadein" style="display: none;">
|
|
<button id="toggleExtraButton" class=""><i class="fas fa-chevron-up meeting-icon toggle-extra-icon"></i></button>
|
|
<button id="startAudioButton" class="hidden"><i class="ph ph-microphone-slash meeting-icon audio-icon"></i></button>
|
|
<button id="stopAudioButton" class=""><i class="ph ph-microphone meeting-icon audio-icon red-icon"></i></button>
|
|
<button id="startVideoButton" class="hidden"><i class="ph ph-video-camera-slash meeting-icon video-icon"></i></button>
|
|
<button id="stopVideoButton" class=""><i class="ph ph-video-camera meeting-icon video-icon"></i></button>
|
|
<button id="swapCameraButton" class="hidden"><i class="ph ph-camera-rotate meeting-icon camera-rotate-icon"></i></button>
|
|
<button id="startScreenButton" class=""><i class="ph ph-monitor meeting-icon screen-share-icon"></i></button>
|
|
<button id="stopScreenButton" class="hidden"><i class="ph ph-stop-circle meeting-icon stop-screen-icon"></i></button>
|
|
<button id="raiseHandButton" class=""><i class="ph ph-hand meeting-icon hand-icon"></i></button>
|
|
<button id="lowerHandButton" class="hidden"><i id="lowerHandIcon" class="ph ph-hand meeting-icon hand-icon"></i></button>
|
|
<button id="chatButton" class=""><i class="ph ph-chats meeting-icon chat-icon"></i></button>
|
|
<button id="settingsButton" class=""><i class="ph ph-gear meeting-icon settings-icon"></i></button>
|
|
<button id="exitButton" class=""><i class="ph ph-phone-slash meeting-icon exit-icon"></i></button>
|
|
</div>
|
|
|
|
|
|
|
|
<div id="emojiPickerContainer" class="roomEmoji fadein"></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="ph ph-house tablinks">
|
|
<p class="tabButtonText">Room</p>
|
|
</button>
|
|
<button id="tabVideoDevicesBtn" class="ph ph-video-camera tablinks">
|
|
<p class="tabButtonText">Video</p>
|
|
</button>
|
|
<button id="tabAudioDevicesBtn" class="ph ph-microphone tablinks">
|
|
<p class="tabButtonText">Audio</p>
|
|
</button>
|
|
<button id="tabNotificationsBtn" class="ph ph-bell tablinks hidden">
|
|
<p class="tabButtonText">Notifications</p>
|
|
</button>
|
|
<button id="tabModeratorBtn" class="ph ph-shield-check tablinks">
|
|
<p class="tabButtonText">Moderator</p>
|
|
</button>
|
|
<button id="tabRecordingBtn" class="ph ph-record tablinks">
|
|
<p class="tabButtonText">Recording</p>
|
|
</button>
|
|
<button id="tabVideoAIBtn" class="ph ph-robot tablinks">
|
|
<p class="tabButtonText">VideoAI</p>
|
|
</button>
|
|
<button id="tabVideoShareBtn" class="ph ph-play-circle tablinks">
|
|
<p class="tabButtonText">Media</p>
|
|
</button>
|
|
<button id="tabRTMPStreamingBtn" class="ph ph-satellite tablinks">
|
|
<p class="tabButtonText">RTMP</p>
|
|
</button>
|
|
<button id="tabProfileBtn" class="ph ph-user tablinks">
|
|
<p class="tabButtonText">Profile</p>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="tabActions">
|
|
<div id="tabRoom" class="tabcontent">
|
|
<button id="activeRoomsButton" class="hidden btn-custom">
|
|
<i class="ph ph-dot-outline"></i>
|
|
<p>Active rooms</p>
|
|
</button>
|
|
<button id="lockRoomButton" class="hidden btn-custom">
|
|
<i class="ph ph-lock-simple-open orange"></i>
|
|
<p class="orange">Lock room</p>
|
|
</button>
|
|
<button id="unlockRoomButton" class="hidden btn-custom">
|
|
<i class="ph ph-lock-simple red"></i>
|
|
<p class="red">Unlock room</p>
|
|
</button>
|
|
<button id="fileShareButton" class="hidden btn-custom">
|
|
<i class="ph ph-folder-open"></i>
|
|
<p>File sharing</p>
|
|
</button>
|
|
|
|
<hr />
|
|
<table class="settingsTable">
|
|
<tr id="broadcastingButton" class="hidden">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-broadcast"></i>
|
|
<p>Broadcast</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md title">
|
|
<input id="switchBroadcasting" class="form-check-input" type="checkbox" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="lobbyButton" class="hidden">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-shield-check"></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>
|
|
<div class="title">
|
|
<i class="ph ph-microphone-stage"></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>
|
|
<div class="title">
|
|
<i class="ph ph-music-notes"></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>
|
|
<div class="title">
|
|
<i class="ph ph-share-network"></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>
|
|
<tr id="keepButtonsVisibleButton">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-eye"></i>
|
|
<p>Buttons</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input id="switchKeepButtonsVisible" class="form-check-input" type="checkbox" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<hr />
|
|
<table class="settingsTable">
|
|
<tr>
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-house-simple"></i>
|
|
<p id="roomId" class="cp">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</p>
|
|
</div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-clock"></i>
|
|
<p id="sessionTime">00:00:00</p>
|
|
</div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="tabVideoDevices" class="tabcontent">
|
|
<button id="refreshVideoDevices" class="btn-custom">
|
|
<i class="ph ph-arrow-clockwise"></i>
|
|
<p>Refresh video devices</p>
|
|
</button>
|
|
<br /><br />
|
|
<div class="title">
|
|
<i class="ph ph-video-camera"></i>
|
|
<p>Video Source:</p>
|
|
</div>
|
|
<select id="videoSelect" class="form-select text-light bg-dark"></select>
|
|
<br />
|
|
<div id="videoVirtualBackground" class="hidden">
|
|
<div class="title">
|
|
<i class="ph ph-image"></i>
|
|
<p>Virtual background:</p>
|
|
</div>
|
|
<div id="imageGridVideo" class="image-grid"></div>
|
|
<span id="errorMessage" class="show-error"></span>
|
|
<br />
|
|
</div>
|
|
<div class="title">
|
|
<i class="ph ph-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>
|
|
<option value="6k">🎥 6k</option>
|
|
<option value="8k">🎥 8K</option>
|
|
</select>
|
|
<br />
|
|
<div id="ScreenQualityDiv" class="hidden">
|
|
<div class="title">
|
|
<i class="ph ph-palette"></i>
|
|
<p>Screen Quality:</p>
|
|
</div>
|
|
<select id="screenQuality" class="form-select text-light bg-dark">
|
|
<option value="default">🖥 Default</option>
|
|
<option value="hd">🖥 HD</option>
|
|
<option value="fhd">🖥 FULL HD</option>
|
|
<option value="2k">🖥 2k</option>
|
|
<option value="4k">🖥 4K</option>
|
|
<option value="6k">🖥 6k</option>
|
|
<option value="8k">🖥 8K</option>
|
|
</select>
|
|
</div>
|
|
<br />
|
|
<div id="ScreenOptimizationDiv" class="hidden">
|
|
<div class="title">
|
|
<i class="ph ph-rocket-launch"></i>
|
|
<p id="screenOptimizationLabel">Screen Optimization:</p>
|
|
</div>
|
|
<select id="screenOptimization" class="form-select text-light bg-dark">
|
|
<option value="default">🖥 None</option>
|
|
<option value="detail">🖥 Detail</option>
|
|
<option value="motion">🖥 Motion</option>
|
|
</select>
|
|
</div>
|
|
<hr />
|
|
<div class="title">
|
|
<i class="ph ph-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="60">60 - 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="ph ph-monitor"></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="60">60 - 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">
|
|
<button id="refreshAudioDevices" class="btn-custom">
|
|
<i class="ph ph-arrow-clockwise"></i>
|
|
<p>Refresh audio devices</p>
|
|
</button>
|
|
<br /><br />
|
|
<div class="title">
|
|
<i class="ph ph-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 id="micOptionsButton">
|
|
<table class="settingsTable">
|
|
<tr id="noiseSuppressionButton">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-ear"></i>
|
|
<p id="labelNoiseSuppression">Noise Suppression</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md title">
|
|
<input
|
|
id="switchNoiseSuppression"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<br />
|
|
<div id="speakerSelectDiv">
|
|
<hr />
|
|
<div class="title">
|
|
<i class="ph ph-headphones"></i>
|
|
<p>Speaker:</p>
|
|
</div>
|
|
<select id="speakerSelect" class="form-select text-light bg-dark"></select>
|
|
<button id="speakerTestBtn" class="btn-custom">
|
|
<i class="ph ph-play-circle"></i>
|
|
<p>Test speaker</p>
|
|
</button>
|
|
<br />
|
|
</div>
|
|
<div id="pushToTalkDiv" class="hidden">
|
|
<hr />
|
|
<table class="settingsTable">
|
|
<tr id="dominantSpeakerFocusDiv">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-eye"></i>
|
|
<p>Speaker Focus</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md title">
|
|
<input
|
|
id="switchDominantSpeakerFocus"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-hand-pointing"></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>
|
|
<hr />
|
|
</div>
|
|
<br />
|
|
</div>
|
|
|
|
<div id="tabNotifications" class="tabcontent">
|
|
<span class="mod-title">Notifications mode</span>
|
|
<hr />
|
|
<div id="notificationsModeDiv">
|
|
<div class="title">
|
|
<i class="ph ph-envelope"></i>
|
|
<p>Email</p>
|
|
</div>
|
|
<input type="text" id="notifyEmailInput" class="form-control" placeholder="Enter email" />
|
|
</div>
|
|
<br />
|
|
<div class="title">
|
|
<i class="ph ph-bell"></i>
|
|
<p>Events:</p>
|
|
</div>
|
|
<table class="settingsTable">
|
|
<tr id="notifyUserJoinBtn">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-user-plus"></i>
|
|
<p>First User Join</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md title">
|
|
<input id="switchNotifyUserJoin" class="form-check-input" type="checkbox" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div class="buttons-container">
|
|
<button id="notifyEmailCleanBtn" class="btn-custom">
|
|
<i class="ph ph-trash"></i> Clean
|
|
</button>
|
|
<button id="saveNotificationsBtn" class="btn-custom">
|
|
<i class="ph ph-floppy-disk"></i> Save Notifications
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tabModerator" class="tabcontent">
|
|
<span class="mod-title">Moderator options for Everyone</span>
|
|
<hr />
|
|
<table class="settingsTable">
|
|
<tr id="everyonePrivacyBtn">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-user-circle"></i>
|
|
<p>Start in Privacy Mode</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input
|
|
id="switchEveryonePrivacy"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
checked
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="everyoneMuteBtn">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-microphone-slash"></i>
|
|
<p>Join Muted</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md title">
|
|
<input id="switchEveryoneMute" class="form-check-input" type="checkbox" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="everyoneHideBtn">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-video-camera-slash"></i>
|
|
<p>Join Hidden</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input
|
|
id="switchEveryoneHidden"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
checked
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr id="everyoneCantUnmuteBtn">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-microphone red"></i>
|
|
<p>Restrict Self-Unmute</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input
|
|
id="switchEveryoneCantUnmute"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
checked
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="everyoneCantUnhideBtn">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-video-camera red"></i>
|
|
<p>Restrict Self-Unhide</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input
|
|
id="switchEveryoneCantUnhide"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
checked
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="everyoneCantShareScreenBtn">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-monitor red"></i>
|
|
<p>Disable Screen Sharing</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input
|
|
id="switchEveryoneCantShareScreen"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
checked
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="everyoneCantChatPrivatelyBtn">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-chats-teardrop red"></i>
|
|
<p>Disable Private Chat</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input
|
|
id="switchEveryoneCantChatPrivately"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
checked
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- <tr id="everyoneCantChatGPTBtn">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-robot red"></i>
|
|
<p>Disable ChatGPT Access</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input
|
|
id="switchEveryoneCantChatChatGPT"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
checked
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="everyoneCantChatDeepSeek">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-robot red"></i>
|
|
<p>Disable DeepSeek Access</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input
|
|
id="switchEveryoneCantChatDeepSeek"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
checked
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr> -->
|
|
<tr id="everyoneCantMediaSharingBtn">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-play-circle red"></i>
|
|
<p>Disable Media Sharing</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input
|
|
id="switchEveryoneCantMediaSharing"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
checked
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="disconnectAllOnLeave">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-users-three red"></i>
|
|
<p>Disconnect all on Exit</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input
|
|
id="switchDisconnectAllOnLeave"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="tabRecording" class="tabcontent">
|
|
<img id="recordingImage" class="hidden" src="../images/recording.png" />
|
|
<div id="roomRecordingOptions" class="hidden">
|
|
<hr />
|
|
<table class="settingsTable">
|
|
<tr id="roomHostOnlyRecording" class="hidden">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-shield-check"></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>
|
|
<tr id="roomRecordingServer" class="hidden">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-cloud-arrow-up"></i>
|
|
<p>Save on server</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md title">
|
|
<input
|
|
id="switchServerRecording"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<button id="pauseRecButton" class="hidden btn-custom">
|
|
<i class="ph ph-pause-circle"></i>
|
|
<p>Pause recording</p>
|
|
</button>
|
|
<button id="resumeRecButton" class="hidden btn-custom">
|
|
<i class="ph ph-play-circle"></i>
|
|
<p>Resume recording</p>
|
|
</button>
|
|
<div id="recordingTime" class="hidden">
|
|
<hr />
|
|
<table class="settingsTable">
|
|
<tr>
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-dot-outline pulsate cr"></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="ph ph-prohibit"></i>
|
|
<p>The presenter has disabled meeting recording.</p>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div id="lastRecordingInfo" class="hidden"></div>
|
|
</div>
|
|
|
|
<div id="tabVideoAI" class="tabcontent">
|
|
<div class="avatarsVideoAI">
|
|
<video id="avatarVideoAIPreview" poster="../images/loader.gif"></video>
|
|
<hr />
|
|
<table class="settingsTable">
|
|
<tr id="avatars">
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-users-three"></i>
|
|
<p>Show free avatars</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input
|
|
id="switchAvatars"
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
checked
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<hr />
|
|
<div class="container-flex">
|
|
<div id="avatarVideoAIcontainer"></div>
|
|
<hr />
|
|
<select id="avatarQuality" class="form-select text-light bg-dark">
|
|
<option value="low">Avatar Quality - Low</option>
|
|
<option value="medium" selected>Avatar Quality - Medium</option>
|
|
<option value="legacy_medium">Avatar Quality - Legacy medium</option>
|
|
<option value="high">Avatar Quality - High</option>
|
|
<option value="very_high" selected>Avatar Quality - Very high</option>
|
|
</select>
|
|
<select
|
|
id="avatarVoiceIDs"
|
|
name="avatarVoiceIDs"
|
|
class="form-select text-light bg-dark"
|
|
>
|
|
<option value="">Select Avatar Voice</option>
|
|
</select>
|
|
<div id="audio-container">
|
|
<audio id="avatarPreviewAudio" controls></audio>
|
|
</div>
|
|
<button id="avatarVideoAIStart" class="btn-custom">
|
|
<i class="ph ph-play"></i> Start Avatar Session
|
|
</button>
|
|
<hr />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tabVideoShare" class="tabcontent">
|
|
<button id="videoShareButton" class="btn-custom">
|
|
<i class="ph ph-play-circle"></i>
|
|
<p>Share a Video or Audio</p>
|
|
</button>
|
|
<br />
|
|
<button id="videoCloseBtn" class="hidden btn-custom">
|
|
<i class="ph ph-x"></i>
|
|
<p>Close Video or Audio</p>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="tabRTMPStreaming" class="tabcontent">
|
|
<div id="rtmpUrlLive">
|
|
<div class="input-container">
|
|
<input
|
|
id="rtmpLiveUrl"
|
|
type="text"
|
|
value=""
|
|
placeholder="rtmp://server:port/app/streamKey"
|
|
readonly
|
|
/>
|
|
<button id="copyRtmpUrlButton" class="ph ph-clipboard"></button>
|
|
</div>
|
|
<div id="rtmpFromFile">
|
|
<table class="file-table">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<i id="refreshVideoFiles" class="ph ph-arrow-clockwise"></i> Video Files:
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="file-list">
|
|
<!-- File items will be dynamically added here -->
|
|
</tbody>
|
|
</table>
|
|
<div id="file-name"></div>
|
|
<!-- <hr /> -->
|
|
<button id="startRtmpButton" class="hidden btn-custom">
|
|
<i class="ph ph-play"></i> Start RTMP File Streaming
|
|
</button>
|
|
<button id="stopRtmpButton" class="hidden btn-custom">
|
|
<i class="ph ph-stop-circle"></i> Stop RTMP File Streaming
|
|
</button>
|
|
<hr />
|
|
</div>
|
|
<div id="rtmpFromUrl">
|
|
<p>Stream from URL:</p>
|
|
<input
|
|
id="rtmpStreamURL"
|
|
type="text"
|
|
value=""
|
|
placeholder="https://domain/path/file.mp4"
|
|
/>
|
|
<button id="startRtmpURLButton" class="hidden btn-custom">
|
|
<i class="ph ph-play"></i> Start RTMP URL Streaming
|
|
</button>
|
|
<button id="stopRtmpURLButton" class="hidden btn-custom">
|
|
<i class="ph ph-stop-circle"></i> Stop RTMP URL Streaming
|
|
</button>
|
|
<hr />
|
|
</div>
|
|
<div id="rtmpFromStream">
|
|
<p>
|
|
Select your desired video and audio sources from settings, then begin RTMP streaming
|
|
</p>
|
|
<button id="streamerRtmpButton" class="hidden btn-custom">
|
|
<i class="ph ph-satellite"></i> RTMP Streamer
|
|
</button>
|
|
<hr />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tabProfile" class="tabcontent">
|
|
<img id="myProfileAvatar" />
|
|
<table id="shortcutsTable">
|
|
<tr>
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-user"></i>
|
|
<p>Username:</p>
|
|
<p id="userName">UserName</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-shield-check"></i>
|
|
<p>Presenter:</p>
|
|
<p id="isUserPresenter">true</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
</div>
|
|
|
|
<div id="tabShortcuts" class="tabcontent">
|
|
<table class="settingsTable">
|
|
<tr>
|
|
<td>
|
|
<div class="title">
|
|
<i class="ph ph-keyboard"></i>
|
|
<p>Shortcuts</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-check form-switch form-switch-md">
|
|
<input id="switchShortcuts" class="form-check-input" type="checkbox" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div>
|
|
<table id="shortcutsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Shortcut</th>
|
|
<th>Icon</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><i class="ph ph-a"></i></td>
|
|
<td><i class="ph ph-microphone"></i></td>
|
|
<td><strong>Toggle</strong> microphone</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-v"></i></td>
|
|
<td><i class="ph ph-video-camera"></i></td>
|
|
<td><strong>Toggle</strong> camera</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-s"></i></td>
|
|
<td><i class="ph ph-monitor"></i></td>
|
|
<td><strong>Toggle</strong> screen</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-h"></i></td>
|
|
<td><i class="ph ph-hand"></i></td>
|
|
<td><strong>Toggle</strong> raise hand</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-c"></i></td>
|
|
<td><i class="ph ph-chats"></i></td>
|
|
<td><strong>Toggle</strong> chat</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-o"></i></td>
|
|
<td><i class="ph ph-gear"></i></td>
|
|
<td><strong>Toggle</strong> settings</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-x"></i></td>
|
|
<td><i class="ph ph-user"></i></td>
|
|
<td><strong>Toggle</strong> hide myself</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-r"></i></td>
|
|
<td><i class="ph ph-record"></i></td>
|
|
<td><strong>Toggle</strong> recording</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-j"></i></td>
|
|
<td><i class="ph ph-smiley"></i></td>
|
|
<td><strong>Toggle</strong> emoji</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-k"></i></td>
|
|
<td><i class="ph ph-closed-captioning"></i></td>
|
|
<td><strong>Toggle</strong> captions</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-p"></i></td>
|
|
<td><i class="ph ph-chart-bar"></i></td>
|
|
<td><strong>Toggle</strong> polls</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-e"></i></td>
|
|
<td><i class="ph ph-note-pencil"></i></td>
|
|
<td><strong>Toggle</strong> editor</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-w"></i></td>
|
|
<td><i class="ph ph-chalkboard"></i></td>
|
|
<td><strong>Toggle</strong> whiteboard</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-d"></i></td>
|
|
<td><i class="ph ph-picture-in-picture"></i></td>
|
|
<td><strong>Toggle</strong> document PIP</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-t"></i></td>
|
|
<td><i class="ph ph-camera"></i></td>
|
|
<td><strong>Snapshot</strong> screen/window/tab</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="ph ph-f"></i></td>
|
|
<td><i class="ph ph-folder-open"></i></td>
|
|
<td><strong>Share</strong> the file</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tabAspect" class="tabcontent">
|
|
<br />
|
|
<div class="title">
|
|
<i class="ph ph-television-simple"></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="ph ph-film-slate"></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="ph ph-play-circle"></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="ph ph-palette"></i>
|
|
<p>Theme:</p>
|
|
</div>
|
|
<br />
|
|
<select id="selectTheme" class="form-select text-light bg-dark">
|
|
<option value="default">🔘 Default</option>
|
|
<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>
|
|
<option value="purple">🟣 Purple</option>
|
|
<option value="orange">🟠 Orange</option>
|
|
<option value="pink">🎀 Pink</option>
|
|
<option value="yellow">🌕 Yellow</option>
|
|
</select>
|
|
<br />
|
|
<div class="title">
|
|
<i class="ph ph-paint-brush"></i>
|
|
<p>Custom theme:</p>
|
|
</div>
|
|
<br />
|
|
<input id="themeColorPicker" class="theme-color-picker" type="text" />
|
|
<br />
|
|
<div class="inline-check-box">
|
|
<div>
|
|
<i class="ph ph-floppy-disk"></i>
|
|
<p>Keep custom</p>
|
|
</div>
|
|
<div class="form-check form-switch form-switch-md title">
|
|
<input id="keepCustomTheme" class="form-check-input" type="checkbox" />
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div class="title">
|
|
<i class="ph ph-arrows-out"></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="ph ph-push-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="ph ph-translate"></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>
|
|
<button id="receiveAbortBtn"><i class="fas fa-stop-circle"></i> Abort</button>
|
|
</div>
|
|
|
|
<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>
|
|
<button id="whiteboardUnlockBtn" class="fa-solid fa-lock-open hidden"></button>
|
|
<button id="whiteboardLockBtn" class="fa-solid fa-lock hidden"></button>
|
|
</div>
|
|
<div id="whiteboardOptions" class="whiteboard-header-options">
|
|
<button id="whiteboardGhostButton" class="fas fa-circle-half-stroke"></button>
|
|
<button id="whiteboardGridBtn" class="fas fa-table-cells-large hidden"></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>
|
|
<div class="dropdown">
|
|
<button
|
|
class="dropdown-toggle"
|
|
type="button"
|
|
id="whiteboardDropDownMenu"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<div class="dropdown-menu text-start" aria-labelledby="whiteboardDropDownMenu">
|
|
<button id="whiteboardImgFileBtn"><i class="far fa-image"></i> Add image file</button>
|
|
<button id="whiteboardImgUrlBtn"><i class="fas fa-link"></i> Add image URL</button>
|
|
<button id="whiteboardPdfFileBtn"><i class="far fa-file-pdf"></i> Add pdf file</button>
|
|
<button id="whiteboardTextBtn"><i class="fas fa-spell-check"></i> Add text</button>
|
|
<button id="whiteboardLineBtn"><i class="fas fa-slash"></i> Add line</button>
|
|
<button id="whiteboardRectBtn"><i class="far fa-square"></i> Add rectangle</button>
|
|
<button id="whiteboardTriangleBtn">
|
|
<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>
|
|
Add triangle
|
|
</button>
|
|
<button id="whiteboardCircleBtn"><i class="far fa-circle"></i> Add circle</button>
|
|
<button id="whiteboardSaveBtn"><i class="fas fa-save"></i> Save</button>
|
|
<button id="whiteboardEraserBtn"><i class="fas fa-eraser"></i> Eraser</button>
|
|
<button id="whiteboardCleanBtn"><i class="fas fa-trash"></i> Clean</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<canvas id="wbCanvas"></canvas>
|
|
</main>
|
|
</section>
|
|
|
|
<!-- CHAT ROOM CONTAINER -->
|
|
<section id="chatRoom" class="chat-container container fadein hidden">
|
|
<!-- CHAT APP -->
|
|
<div id="chatApp" class="chat-app">
|
|
<!-- CHAT PEOPLE LIST -->
|
|
<div id="plist" class="people-list">
|
|
<!-- CHAT LIST OPTIONS -->
|
|
<div>
|
|
<button id="chatShareRoomBtn"><i class="fas fa-user-plus"></i> Invite user</button>
|
|
<button id="chatHideParticipantsList" class="float-right">
|
|
<i class="fas fa-circle-arrow-left"></i>
|
|
</button>
|
|
<button id="participantsRaiseHandBtn" class="float-right">
|
|
<i class="fas fa-hand-paper"></i>
|
|
</button>
|
|
<button id="participantsUnreadMessagesBtn" class="float-right">
|
|
<i class="fas fa-comments"></i>
|
|
</button>
|
|
<button id="participantsSaveBtn" class="float-right hidden">
|
|
<i class="fas fa-save"></i>
|
|
</button>
|
|
</div>
|
|
<br />
|
|
|
|
<!-- CHAT SEARCH -->
|
|
<div class="input-group mt5">
|
|
<span class="input-group-text"><i class="fa fa-search"></i></span>
|
|
<input
|
|
id="searchParticipantsFromList"
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Search..."
|
|
maxlength="254"
|
|
/>
|
|
</div>
|
|
|
|
<!-- CHAT LIST -->
|
|
<ul id="participantsList" class="list-unstyled chat-list mt-2 mb-0"></ul>
|
|
</div>
|
|
|
|
<!-- CHAT -->
|
|
<div id="chat" class="chat">
|
|
<!-- CHAT HEADER -->
|
|
<div id="chatHeader" class="chat-header clearfix">
|
|
<div class="w-100">
|
|
<!-- CHAT ABOUT -->
|
|
<div id="chatAbout" class="text-start">
|
|
<img
|
|
class="all-participants-img"
|
|
id="chatShowParticipantsList"
|
|
src="../images/participants.png"
|
|
alt="participants"
|
|
/>
|
|
<a data-toggle="modal" data-target="#view_info">
|
|
<img src="../images/all.png" alt="avatar" />
|
|
</a>
|
|
<div class="chat-about">
|
|
<h6 class="mb-0">Public chat</h6>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CHAT OPTIONS -->
|
|
<div class="chat-option-buttons">
|
|
<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>
|
|
<!-- CHAT MORE OPTIONS -->
|
|
<div class="dropdown">
|
|
<button
|
|
class="dropdown-toggle"
|
|
type="button"
|
|
id="chatDropDownMenu"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<ul class="dropdown-menu text-start" aria-labelledby="chatDropDownMenu">
|
|
<li>
|
|
<hr />
|
|
<div class="title ml10">
|
|
<i class="fa-solid fa-eye"></i>
|
|
<div class="form-check form-switch form-switch-md ml10">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="showChatOnMsg"
|
|
checked
|
|
/>
|
|
</div>
|
|
<div id="speechMsgDiv" class="title ml10">
|
|
<i class="fas fa-volume-high"></i>
|
|
<div class="form-check form-switch form-switch-md ml10">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="speechIncomingMsg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
</li>
|
|
<!-- <li>
|
|
<button id="chatGhostButton" class="btn-sm">
|
|
<i class="fas fa-circle-half-stroke"></i> Toggle bg
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button id="chatSaveButton" class="btn-sm">
|
|
<i class="fas fa-save"></i> Save messages
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button id="chatCleanButton" class="btn-sm">
|
|
<i class="fas fa-trash"></i> Clean messages
|
|
</button>
|
|
</li> -->
|
|
</ul>
|
|
</div>
|
|
<button id="chatCloseButton">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CHAT HISTORY -->
|
|
<div id="chatHistory" class="chat-history">
|
|
<!-- CHAT MESSAGES -->
|
|
<ul id="chatGPTMessages" class="mb-0"></ul>
|
|
<ul id="deepSeekMessages" class="mb-0"></ul>
|
|
<ul id="chatPublicMessages" class="mb-0"></ul>
|
|
<ul id="chatPrivateMessages" class="mb-0"></ul>
|
|
|
|
<!-- CHAT EMOJI -->
|
|
<div id="chatEmoji" class="hidden fadein chatEmojiPicker"></div>
|
|
</div>
|
|
|
|
<!-- CHAT MESSAGE -->
|
|
<div class="chat-message clearfix">
|
|
<!-- CHAT MESSAGE INPUT -->
|
|
<div class="input-group mb-0 w-100">
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text"><i class="fas fa-message"></i></span>
|
|
<textarea
|
|
id="chatMessage"
|
|
class="form-control"
|
|
placeholder="Enter text here..."
|
|
rows="1"
|
|
></textarea>
|
|
<!-- <input
|
|
id="chatMessage"
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Enter text here..."
|
|
> -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CHAT MESSAGE OPTIONS -->
|
|
<div class="mt10">
|
|
<button id="chatEmojiButton" class="float-left mr5 hidden">
|
|
<i class="fas fa-smile"></i>
|
|
</button>
|
|
<button id="chatMarkdownButton" class="float-left mr5 hidden">
|
|
<i class="fab fa-markdown"></i>
|
|
</button>
|
|
<button id="chatSpeechStartButton" class="float-left mr5 hidden">
|
|
<i class="fas fa-microphone-slash"></i>
|
|
</button>
|
|
<button id="chatSpeechStopButton" class="float-left mr5 hidden">
|
|
<i class="fas fa-microphone"></i>
|
|
</button>
|
|
<button id="chatPasteButton" class="float-left mr5 hidden">
|
|
<i class="fas fa-paste"></i>
|
|
</button>
|
|
<button id="chatCleanTextButton" class="float-left mr5 hidden">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
<button id="chatSendButton" class="float-right hidden">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="pollRoom" class="pls-container fadein hidden">
|
|
<div id="pollHeader" class="poll-header">
|
|
<h2 class="poll-h2">Polls</h2>
|
|
<div class="poll-header-btns">
|
|
<button id="pollTogglePin" class="hidden">
|
|
<i class="fas fa-map-pin"></i>
|
|
</button>
|
|
<button id="pollMaxButton" class="hidden">
|
|
<i class="fas fa-expand"></i>
|
|
</button>
|
|
<button id="pollMinButton" class="hidden">
|
|
<i class="fas fa-compress"></i>
|
|
</button>
|
|
<button id="pollSaveButton">
|
|
<i class="fas fa-floppy-disk"></i>
|
|
</button>
|
|
<button id="pollCloseBtn">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="pollForm" class="poll-creation">
|
|
<form id="pollCreateForm" class="form">
|
|
<div class="form-group">
|
|
<label for="question">Question:</label>
|
|
<input type="text" id="question" name="question" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="options">Options:</label>
|
|
<div id="optionsContainer">
|
|
<input type="text" name="option" class="option-input" required />
|
|
</div>
|
|
<br />
|
|
<div class="poll-btns">
|
|
<button type="button" id="pollAddOptionBtn" class="poll-btn">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<button type="button" id="pollDelOptionBtn" class="del-btn">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
<button type="submit" id="addPollButton" class="poll-btn">
|
|
<i class="fas fa-square-poll-horizontal"></i> Create Poll
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="polls">
|
|
<div id="pollsContainer" class="polls-container"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="editorRoom" class="editor-container fadein hidden">
|
|
<div id="editorHeader" class="editor-header">
|
|
<div class="editor-header-btns">
|
|
<button id="editorTogglePin" class="fas fa-map-pin hidden"></button>
|
|
<button id="editorUnlockBtn" class="fa-solid fa-lock-open hidden"></button>
|
|
<button id="editorLockBtn" class="fa-solid fa-lock hidden"></button>
|
|
<button id="editorUndoBtn" class="fas fa-undo"></button>
|
|
<button id="editorRedoBtn" class="fas fa-redo"></button>
|
|
<button id="editorCopyBtn" class="fas fa-paste"></button>
|
|
<button id="editorSaveBtn" class="fas fa-floppy-disk"></button>
|
|
<button id="editorCleanBtn" class="fas fa-trash"></button>
|
|
<button id="editorCloseBtn" class="fas fa-times"></button>
|
|
</div>
|
|
</div>
|
|
<div class="editor" id="editor"></div>
|
|
</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="transcriptionSpeechStatus" class="fas fa-microphone-alt"></button>
|
|
</div>
|
|
<div class="transcription-header-options">
|
|
<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>
|
|
<div class="dropdown title">
|
|
<button
|
|
class="dropdown-toggle"
|
|
type="button"
|
|
id="transcriptionDropDownMenu"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<ul class="dropdown-menu text-start" aria-labelledby="transcriptionDropDownMenu">
|
|
<li>
|
|
<hr />
|
|
<div class="title ml5">
|
|
<i class="fa-solid fa-eye"></i>
|
|
<div class="form-check form-switch form-switch-md ml-5">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="transcriptShowOnMsg"
|
|
checked
|
|
/>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
</li>
|
|
<li>
|
|
<button id="transcriptionGhostBtn">
|
|
<i class="fas fa-circle-half-stroke"></i> Toggle bg
|
|
</button>
|
|
</li>
|
|
<li id="transcriptionAllLi" class="hidden">
|
|
<button id="transcriptionAllBtn">
|
|
<i class="fas fa-play"></i> Start for all
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button id="transcriptionSaveBtn"><i class="fas fa-save"></i> Save</button>
|
|
</li>
|
|
<li>
|
|
<button id="transcriptionCleanBtn"><i class="fas fa-trash"></i> Clean</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button id="transcriptionCloseBtn" class="fas fa-times"></button>
|
|
</div>
|
|
</header>
|
|
<main id="transcriptionChat" class="transcription-chat"></main>
|
|
<div id="transcriptionFooter" 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">
|
|
<header id="lobbyHeader" class="lobby-header">
|
|
<div id="lobbyHeaderTitle" class="lobby-header-title">Lobby users</div>
|
|
</header>
|
|
<main>
|
|
<div id="lobbyUsers">
|
|
<template id="lobbyTbTemplate">
|
|
<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" class="fas fa-check"></button></td>
|
|
<td><button id="lobbyRejectAllBtn" class="fas fa-times"></button></td>
|
|
</tr>
|
|
</template>
|
|
|
|
<table id="lobbyTb"></table>
|
|
</div>
|
|
</main>
|
|
</section>
|
|
</body>
|
|
</html>
|