[mirotalksfu] - improve Video grid view and UI
هذا الالتزام موجود في:
Miroslav Pejic
125
public/Room.html
125
public/Room.html
@@ -34,6 +34,7 @@
|
||||
<!-- StyleSheet -->
|
||||
|
||||
<link rel="stylesheet" href="/css/Room.css" />
|
||||
<link rel="stylesheet" href="/css/VideoGrid.css" />
|
||||
|
||||
<!-- https://animate.style 4 using for swal fadeIn-Out -->
|
||||
|
||||
@@ -61,6 +62,7 @@
|
||||
<script src="/modules/MediasoupClient.js"></script>
|
||||
<script src="/js/Room.js"></script>
|
||||
<script src="/js/RoomClient.js"></script>
|
||||
<script src="/js/VideoGrid.js"></script>
|
||||
<script src="https://kit.fontawesome.com/d2f1016e6f.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.rawgit.com/muaz-khan/DetectRTC/master/DetectRTC.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
|
||||
@@ -71,107 +73,68 @@
|
||||
</head>
|
||||
<body onload="initClient()">
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div class="container-xxl">
|
||||
<div id="control" class="fadein hidden">
|
||||
<button id="exitButton" class="hidden">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</button>
|
||||
<button id="shareButton" class="hidden">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
</button>
|
||||
|
||||
<div id="loadingDiv" class="center pulsate">
|
||||
<h1>Loading...</h1>
|
||||
<pre>
|
||||
Please allow the camera or microphone
|
||||
access to use this app.
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<button id="openNavButton" class="hidden">☰ open</button>
|
||||
<div id="control" class="sidenav hidden">
|
||||
<button id="closeNavButton" class="closebtn">×</button>
|
||||
<button id="shareButton" class="hidden"><i class="fas fa-share-alt"></i> Share</button>
|
||||
<div class="dropdown">
|
||||
<button id="devicesButton" class="hidden">
|
||||
<i class="fas fa-cogs"></i>
|
||||
</button>
|
||||
<div id="myDevices" class="dropdown-content fadein">
|
||||
<button id="settingsButton" class="hidden"><i class="fas fa-cogs"></i> Settings</button>
|
||||
<div id="settings" class="dropdown-content fadein">
|
||||
<div id="devicesList">
|
||||
<br />
|
||||
<i class="fas fa-video"></i> Video:
|
||||
<i class="fas fa-video"></i> Video
|
||||
<select id="videoSelect" class="form-select text-light bg-dark"></select>
|
||||
<br />
|
||||
<i class="fas fa-microphone"></i> Microphone:
|
||||
<i class="fas fa-microphone"></i> Microphone
|
||||
<select id="microphoneSelect" class="form-select text-light bg-dark"></select>
|
||||
<br />
|
||||
<i class="fas fa-volume-up"></i> Speaker:
|
||||
<i class="fas fa-volume-up"></i> Speaker
|
||||
<select id="speakerSelect" class="form-select text-light bg-dark"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button id="recButton" class="hidden">
|
||||
<i class="fas fa-record-vinyl"></i>
|
||||
</button>
|
||||
<button id="recButton" class="hidden"><i class="fas fa-record-vinyl"></i> Recording</button>
|
||||
<div id="recording" class="dropdown-content fadein">
|
||||
<div id="recordingCommand" class="recording">
|
||||
<br />
|
||||
<button id="startRecButton" class="hidden">
|
||||
<i class="fas fa-record-vinyl"></i>
|
||||
</button>
|
||||
<button id="stopRecButton" class="hidden">
|
||||
<i class="fas fa-stop-circle"></i>
|
||||
</button>
|
||||
<button id="pauseRecButton" class="hidden">
|
||||
<i class="far fa-pause-circle"></i>
|
||||
</button>
|
||||
<button id="resumeRecButton" class="hidden">
|
||||
<i class="far fa-play-circle"></i>
|
||||
</button>
|
||||
<button id="startRecButton" class="hidden"><i class="fas fa-record-vinyl"></i> Start</button>
|
||||
<button id="stopRecButton" class="hidden"><i class="fas fa-stop-circle"></i> Stop</button>
|
||||
<button id="pauseRecButton" class="hidden"><i class="far fa-pause-circle"></i> Pause</button>
|
||||
<button id="resumeRecButton" class="hidden"><i class="far fa-play-circle"></i> Resume</button>
|
||||
<p id="recordingStatus">🔴 REC 0s</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="chatButton" class="hidden">
|
||||
<i class="fas fa-comments"></i>
|
||||
</button>
|
||||
<button id="fullScreenButton" class="hidden">
|
||||
<i class="fas fa-expand-alt"></i>
|
||||
</button>
|
||||
<button id="swapCameraButton" class="hidden">
|
||||
<i class="fas fa-sync-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="participantsButton" class="hidden">
|
||||
<i class="fas fa-users"></i>
|
||||
</button>
|
||||
<button id="lockRoomButton" class="hidden">
|
||||
<i class="fas fa-lock-open"></i>
|
||||
</button>
|
||||
<button id="unlockRoomButton" class="hidden">
|
||||
<i class="fas fa-lock"></i>
|
||||
</button>
|
||||
<button id="aboutButton" class="hidden">
|
||||
<i class="fas fa-question"></i>
|
||||
</button>
|
||||
<p id="sessionTime"></p>
|
||||
<button id="chatButton" class="hidden"><i class="fas fa-comments"></i> Chat</button>
|
||||
<button id="fullScreenButton" class="hidden"><i class="fas fa-expand-alt"></i> Full screen</button>
|
||||
<button id="swapCameraButton" class="hidden"><i class="fas fa-sync-alt"></i> Swap Cam</button>
|
||||
<button id="startAudioButton" class="hidden"><i class="fas fa-microphone-slash"></i> Start audio</button>
|
||||
<button id="stopAudioButton" class="hidden"><i class="fas fa-microphone"></i> Stop audio</button>
|
||||
<button id="startVideoButton" class="hidden"><i class="fas fa-video-slash"></i> Start video</button>
|
||||
<button id="stopVideoButton" class="hidden"><i class="fas fa-video"></i> Stop video</button>
|
||||
<button id="startScreenButton" class="hidden"><i class="fas fa-desktop"></i> Start screen</button>
|
||||
<button id="stopScreenButton" class="hidden"><i class="fas fa-stop-circle"></i> Stop screen</button>
|
||||
<button id="participantsButton" class="hidden"><i class="fas fa-users"></i> Participants</button>
|
||||
<button id="lockRoomButton" class="hidden"><i class="fas fa-lock-open"></i> Lock room</button>
|
||||
<button id="unlockRoomButton" class="hidden"><i class="fas fa-lock"></i> Unlock room</button>
|
||||
<button id="aboutButton" class="hidden"><i class="fas fa-question"></i> About</button>
|
||||
<button id="exitButton" class="hidden"><i class="fas fa-phone-slash"></i> Leave</button>
|
||||
<button id="sessionTime" class="far fa-clock"></button>
|
||||
</div>
|
||||
|
||||
<div id="videoMediaContainer">
|
||||
<!-- <div class="Camera"></div> -->
|
||||
</div>
|
||||
<div class="container-xxl">
|
||||
<div id="videoMedia" class="hidden">
|
||||
<div id="localMedia" class="containers">
|
||||
<!--<video id="localVideo" autoplay inline class="vid mirror"></video>-->
|
||||
<!--<video id="localScreen" autoplay inline class="vid"></video>-->
|
||||
</div>
|
||||
<div id="remoteVideos" class="containers"></div>
|
||||
<div id="remoteAudios"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="chatRoom" class="chat-room center fadein">
|
||||
<section id="msger" class="msger">
|
||||
<header id="chatHeader" class="chat-header">
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Comfortaa:wght@500&display=swap');
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Keyframes
|
||||
--------------------------------------------------------------*/
|
||||
@@ -30,11 +32,12 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--body-bg: linear-gradient(to left, #1f1e1e, #000000);
|
||||
--msger-top: 50%;
|
||||
--msger-left: 50%;
|
||||
--msger-height: 680px;
|
||||
--msger-width: 420px;
|
||||
--msger-bg: linear-gradient(to left, #383838, #000000);
|
||||
--msger-bg: linear-gradient(to left, #1f1e1e, #000000);
|
||||
--left-msg-bg: #222328;
|
||||
--right-msg-bg: #0a0b0c;
|
||||
--box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
||||
@@ -42,7 +45,7 @@
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
font-family: 'Verdana';
|
||||
font-family: 'Comfortaa';
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -50,37 +53,113 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url('../images/background.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background: var(--body-bg);
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Control buttons
|
||||
# Loading...
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
#loadingDiv {
|
||||
color: white;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
background: var(--body-bg);
|
||||
}
|
||||
#loadingDiv h1 {
|
||||
font-size: 70px;
|
||||
}
|
||||
#loadingDiv pre {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Buttons bar
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
#openNavButton {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
z-index: 3;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
overflow-x: hidden;
|
||||
transition: 0.5s;
|
||||
padding-top: 60px;
|
||||
animation: show 0.4s ease;
|
||||
}
|
||||
|
||||
.sidenav button {
|
||||
padding: 8px 8px 8px 32px;
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.sidenav button:hover {
|
||||
color: rgb(0, 180, 50);
|
||||
}
|
||||
|
||||
.sidenav .closebtn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 25px;
|
||||
font-size: 36px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.sidenav::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
.sidenav::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.sidenav::-webkit-scrollbar-thumb {
|
||||
background: rgb(255 255 255 / 40%);
|
||||
}
|
||||
|
||||
@media screen and (max-height: 450px) {
|
||||
.sidenav {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.sidenav button {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#control {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
padding: 10px;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
width: 250px;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#control button {
|
||||
border-radius: 5px;
|
||||
}
|
||||
#control p {
|
||||
font-size: small;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#exitButton:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#settings {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Room QR
|
||||
--------------------------------------------------------------*/
|
||||
@@ -91,100 +170,6 @@ body {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Video grid
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
.containers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: 10px;
|
||||
row-gap: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
.containers {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
column-gap: 10px;
|
||||
row-gap: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.vid {
|
||||
flex: 0 1 auto;
|
||||
height: 360px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
video:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
video:fullscreen {
|
||||
object-fit: contain; /* cover; */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mirror {
|
||||
-webkit-transform: rotateY(180deg);
|
||||
-moz-transform: rotateY(180deg);
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
#videoMedia {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#localMedia,
|
||||
#remoteVideos {
|
||||
margin: 10px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.pn {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
width: auto;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
margin-top: 325px;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.d,
|
||||
.d video {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.d p {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
width: auto;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
top: 315px;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Dropdown menù
|
||||
--------------------------------------------------------------*/
|
||||
@@ -195,21 +180,20 @@ video:fullscreen {
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
z-index: 2;
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
min-width: 200px;
|
||||
max-width: 230px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.dropdown-content select {
|
||||
width: auto;
|
||||
width: 210px;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
@@ -217,15 +201,15 @@ video:fullscreen {
|
||||
# Recording
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
.recording {
|
||||
display: flex;
|
||||
#recording {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.recording button,
|
||||
.recording p {
|
||||
#recording button,
|
||||
#recording p {
|
||||
padding: 5px;
|
||||
margin: 1px;
|
||||
font-size: 0.8em;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@@ -234,7 +218,7 @@ video:fullscreen {
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
.chat-room {
|
||||
z-index: 3;
|
||||
z-index: 4;
|
||||
display: none;
|
||||
position: fixed;
|
||||
height: var(--msger-height);
|
||||
@@ -406,7 +390,7 @@ video:fullscreen {
|
||||
.chat-msger-inputarea {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
background: #222328;
|
||||
background: #1f1e1e;
|
||||
}
|
||||
|
||||
.chat-msger-input {
|
||||
@@ -427,14 +411,13 @@ video:fullscreen {
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
emoji-picker {
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 92%;
|
||||
--background: #16171b;
|
||||
--num-columns: 9;
|
||||
--num-columns: 8;
|
||||
--emoji-size: 1.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
@@ -506,6 +489,7 @@ emoji-picker {
|
||||
}
|
||||
|
||||
.center {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
@@ -525,7 +509,7 @@ emoji-picker {
|
||||
|
||||
p,
|
||||
button {
|
||||
background: black;
|
||||
background: transparent;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
@@ -619,3 +603,11 @@ button:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
z-index:
|
||||
- 1 videoMediaContainer
|
||||
- 2 buttonBar
|
||||
- 3 sidenav
|
||||
- 4 chat
|
||||
*/
|
||||
|
||||
80
public/css/VideoGrid.css
Normal file
80
public/css/VideoGrid.css
Normal file
@@ -0,0 +1,80 @@
|
||||
/*--------------------------------------------------------------
|
||||
# Video grid
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
#videoMediaContainer {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
#videoMediaContainer div {
|
||||
/* Camera */
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
align-self: center;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
box-shadow: 0px 12px 22px rgba(0, 0, 0, 0.4);
|
||||
animation: show 0.4s ease;
|
||||
}
|
||||
|
||||
#videoMediaContainer p {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
width: auto;
|
||||
height: 25px;
|
||||
border-radius: 5px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
box-shadow: var(--box-shadow);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
video:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
video:fullscreen {
|
||||
object-fit: contain;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mirror {
|
||||
-webkit-transform: rotateY(180deg);
|
||||
-moz-transform: rotateY(180deg);
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.4) translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -4,7 +4,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
|
||||
|
||||
const RoomURL = window.location.href;
|
||||
|
||||
const swalBackground = 'rgba(0, 0, 0, 0.7)';
|
||||
const swalBackground = 'linear-gradient(to left, #1f1e1e, #000000)';
|
||||
const swalImageUrl = '../images/pricing-illustration.svg';
|
||||
|
||||
const url = {
|
||||
@@ -43,34 +43,14 @@ function getRandomNumber(length) {
|
||||
|
||||
function initClient() {
|
||||
if (!DetectRTC.isMobileDevice) {
|
||||
setTippy('sessionTime', 'Session time', 'bottom');
|
||||
setTippy('exitButton', 'Exit room', 'bottom');
|
||||
setTippy('shareButton', 'Share Room', 'bottom');
|
||||
setTippy('devicesButton', 'Devices', 'bottom');
|
||||
setTippy('chatButton', 'Chat', 'bottom');
|
||||
setTippy('chatCleanButton', 'Clean', 'bottom');
|
||||
setTippy('chatSaveButton', 'Save', 'bottom');
|
||||
setTippy('chatCloseButton', 'Close', 'bottom');
|
||||
setTippy('closeNavButton', 'Close', 'right');
|
||||
setTippy('chatMessage', 'Press enter to send', 'top-start');
|
||||
setTippy('chatSendButton', 'Send', 'top');
|
||||
setTippy('chatEmojiButton', 'Emoji', 'top');
|
||||
setTippy('fullScreenButton', 'Full Screen', 'bottom');
|
||||
setTippy('recButton', 'Recording', 'bottom');
|
||||
setTippy('startRecButton', 'Start Recording', 'bottom');
|
||||
setTippy('stopRecButton', 'Stop Recording', 'bottom');
|
||||
setTippy('pauseRecButton', 'Pause Recording', 'bottom');
|
||||
setTippy('resumeRecButton', 'Resume Recording', 'bottom');
|
||||
setTippy('stopAudioButton', 'Stop Audio', 'bottom');
|
||||
setTippy('startAudioButton', 'Start Audio', 'bottom');
|
||||
setTippy('swapCameraButton', 'Swap Camera', 'bottom');
|
||||
setTippy('startVideoButton', 'Start Video', 'bottom');
|
||||
setTippy('stopVideoButton', 'Stop Video', 'bottom');
|
||||
setTippy('startScreenButton', 'Start Screen', 'bottom');
|
||||
setTippy('stopScreenButton', 'Stop Screen', 'bottom');
|
||||
setTippy('participantsButton', 'Show participants', 'bottom');
|
||||
setTippy('lockRoomButton', 'Room Lock', 'bottom');
|
||||
setTippy('unlockRoomButton', 'Room Unlock', 'bottom');
|
||||
setTippy('aboutButton', 'About', 'bottom');
|
||||
setTippy('chatCleanButton', 'Clean', 'bottom');
|
||||
setTippy('chatSaveButton', 'Save', 'bottom');
|
||||
setTippy('chatCloseButton', 'Close', 'bottom');
|
||||
setTippy('sessionTime', 'Session time', 'right');
|
||||
}
|
||||
initEnumerateDevices();
|
||||
}
|
||||
@@ -115,6 +95,7 @@ async function initEnumerateDevices() {
|
||||
if (!isAudioAllowed && !isVideoAllowed) {
|
||||
window.location.href = `/permission?room_id=${room_id}&message=Not allowed both Audio and Video`;
|
||||
} else {
|
||||
hide(loadingDiv);
|
||||
getPeerGeoLocation();
|
||||
whoAreYou();
|
||||
}
|
||||
@@ -251,11 +232,15 @@ function whoAreYou() {
|
||||
function handleAudio(e) {
|
||||
isAudioOn = isAudioOn ? false : true;
|
||||
e.target.className = 'fas fa-microphone' + (isAudioOn ? '' : '-slash');
|
||||
setColor(e.target, isAudioOn ? 'white' : 'red');
|
||||
setColor(startAudioButton, isAudioOn ? 'white' : 'red');
|
||||
}
|
||||
|
||||
function handleVideo(e) {
|
||||
isVideoOn = isVideoOn ? false : true;
|
||||
e.target.className = 'fas fa-video' + (isVideoOn ? '' : '-slash');
|
||||
setColor(e.target, isVideoOn ? 'white' : 'red');
|
||||
setColor(startVideoButton, isVideoOn ? 'white' : 'red');
|
||||
}
|
||||
|
||||
// ####################################################
|
||||
@@ -287,8 +272,8 @@ async function shareRoom(useNavigator = false) {
|
||||
<canvas id="qrRoom"></canvas>
|
||||
</div>
|
||||
<br/><br/>
|
||||
<p style="color:white;">Share this meeting invite others to join.</p>
|
||||
<p style="color:rgb(8, 189, 89);">` +
|
||||
<p style="background:transparent; color:white;">Share this meeting invite others to join.</p>
|
||||
<p style="background:transparent; color:rgb(8, 189, 89);">` +
|
||||
RoomURL +
|
||||
`</p>`,
|
||||
showDenyButton: true,
|
||||
@@ -323,12 +308,13 @@ async function shareRoom(useNavigator = false) {
|
||||
// ####################################################
|
||||
|
||||
function makeRoomQR() {
|
||||
let qrSize = DetectRTC.isMobileDevice ? 128 : 256;
|
||||
let qr = new QRious({
|
||||
element: document.getElementById('qrRoom'),
|
||||
value: RoomURL,
|
||||
});
|
||||
qr.set({
|
||||
size: 256,
|
||||
size: qrSize,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -359,9 +345,8 @@ function joinRoom(peer_name, room_id) {
|
||||
} else {
|
||||
console.log('05 ----> join to Room ' + room_id);
|
||||
rc = new RoomClient(
|
||||
localMedia,
|
||||
remoteVideos,
|
||||
remoteAudios,
|
||||
videoMediaContainer,
|
||||
window.mediasoupClient,
|
||||
socket,
|
||||
room_id,
|
||||
@@ -379,7 +364,7 @@ function joinRoom(peer_name, room_id) {
|
||||
}
|
||||
|
||||
function roomIsReady() {
|
||||
control.className = '';
|
||||
show(openNavButton);
|
||||
show(exitButton);
|
||||
show(shareButton);
|
||||
show(recButton);
|
||||
@@ -402,10 +387,9 @@ function roomIsReady() {
|
||||
};
|
||||
show(fullScreenButton);
|
||||
}
|
||||
show(devicesButton);
|
||||
show(settingsButton);
|
||||
if (isAudioAllowed) show(startAudioButton);
|
||||
if (isVideoAllowed) show(startVideoButton);
|
||||
show(videoMedia);
|
||||
show(participantsButton);
|
||||
show(lockRoomButton);
|
||||
show(aboutButton);
|
||||
@@ -423,6 +407,10 @@ function show(elem) {
|
||||
elem.className = '';
|
||||
}
|
||||
|
||||
function setColor(elem, color) {
|
||||
elem.style.color = color;
|
||||
}
|
||||
|
||||
// ####################################################
|
||||
// SET CHAT MOBILE
|
||||
// ####################################################
|
||||
@@ -441,7 +429,7 @@ function startSessionTimer() {
|
||||
let callStartTime = Date.now();
|
||||
setInterval(function printTime() {
|
||||
let callElapsedTime = Date.now() - callStartTime;
|
||||
sessionTime.innerHTML = getTimeToString(callElapsedTime);
|
||||
sessionTime.innerHTML = ' ' + getTimeToString(callElapsedTime);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
@@ -491,13 +479,19 @@ function stopRecordingTimer() {
|
||||
// ####################################################
|
||||
|
||||
function handleButtons() {
|
||||
openNavButton.onclick = () => {
|
||||
openNav();
|
||||
};
|
||||
closeNavButton.onclick = () => {
|
||||
closeNav();
|
||||
};
|
||||
exitButton.onclick = () => {
|
||||
rc.exit();
|
||||
};
|
||||
shareButton.onclick = () => {
|
||||
shareRoom(true);
|
||||
};
|
||||
devicesButton.onclick = () => {
|
||||
settingsButton.onclick = () => {
|
||||
rc.toggleDevices();
|
||||
};
|
||||
chatButton.onclick = () => {
|
||||
@@ -584,7 +578,7 @@ function handleSelects() {
|
||||
rc.closeThenProduce(RoomClient.mediaType.audio, microphoneSelect.value);
|
||||
};
|
||||
speakerSelect.onchange = () => {
|
||||
rc.attachSinkId(localMedia, speakerSelect.value);
|
||||
rc.attachSinkId(rc.myVideoEl, speakerSelect.value);
|
||||
};
|
||||
videoSelect.onchange = () => {
|
||||
rc.closeThenProduce(RoomClient.mediaType.video, videoSelect.value);
|
||||
@@ -614,20 +608,24 @@ function handleInputs() {
|
||||
|
||||
function handleRoomClientEvents() {
|
||||
rc.on(RoomClient.EVENTS.startRec, () => {
|
||||
console.log('Room Client start recoding');
|
||||
hide(startRecButton);
|
||||
show(stopRecButton);
|
||||
show(pauseRecButton);
|
||||
startRecordingTimer();
|
||||
});
|
||||
rc.on(RoomClient.EVENTS.pauseRec, () => {
|
||||
console.log('Room Client pause recoding');
|
||||
hide(pauseRecButton);
|
||||
show(resumeRecButton);
|
||||
});
|
||||
rc.on(RoomClient.EVENTS.resumeRec, () => {
|
||||
console.log('Room Client resume recoding');
|
||||
hide(resumeRecButton);
|
||||
show(pauseRecButton);
|
||||
});
|
||||
rc.on(RoomClient.EVENTS.stopRec, () => {
|
||||
console.log('Room Client stop recoding');
|
||||
hide(stopRecButton);
|
||||
hide(pauseRecButton);
|
||||
hide(resumeRecButton);
|
||||
@@ -635,8 +633,10 @@ function handleRoomClientEvents() {
|
||||
stopRecordingTimer();
|
||||
});
|
||||
rc.on(RoomClient.EVENTS.startAudio, () => {
|
||||
console.log('Room Client start audio');
|
||||
hide(startAudioButton);
|
||||
show(stopAudioButton);
|
||||
setColor(startAudioButton, 'red');
|
||||
});
|
||||
rc.on(RoomClient.EVENTS.pauseAudio, () => {
|
||||
console.log('Room Client pause audio');
|
||||
@@ -649,12 +649,15 @@ function handleRoomClientEvents() {
|
||||
show(stopAudioButton);
|
||||
});
|
||||
rc.on(RoomClient.EVENTS.stopAudio, () => {
|
||||
console.log('Room Client stop audio');
|
||||
hide(stopAudioButton);
|
||||
show(startAudioButton);
|
||||
});
|
||||
rc.on(RoomClient.EVENTS.startVideo, () => {
|
||||
console.log('Room Client start video');
|
||||
hide(startVideoButton);
|
||||
show(stopVideoButton);
|
||||
setColor(startVideoButton, 'red');
|
||||
});
|
||||
rc.on(RoomClient.EVENTS.pauseVideo, () => {
|
||||
console.log('Room Client pause video');
|
||||
@@ -667,10 +670,12 @@ function handleRoomClientEvents() {
|
||||
show(stopVideoButton);
|
||||
});
|
||||
rc.on(RoomClient.EVENTS.stopVideo, () => {
|
||||
console.log('Room Client stop audio');
|
||||
hide(stopVideoButton);
|
||||
show(startVideoButton);
|
||||
});
|
||||
rc.on(RoomClient.EVENTS.startScreen, () => {
|
||||
console.log('Room Client start screen');
|
||||
hide(startScreenButton);
|
||||
show(stopScreenButton);
|
||||
});
|
||||
@@ -681,22 +686,35 @@ function handleRoomClientEvents() {
|
||||
console.log('Room Client resume screen');
|
||||
});
|
||||
rc.on(RoomClient.EVENTS.stopScreen, () => {
|
||||
console.log('Room Client stop screen');
|
||||
hide(stopScreenButton);
|
||||
show(startScreenButton);
|
||||
});
|
||||
rc.on(RoomClient.EVENTS.roomLock, () => {
|
||||
console.log('Room Client lock room');
|
||||
hide(lockRoomButton);
|
||||
show(unlockRoomButton);
|
||||
setColor(unlockRoomButton, 'red');
|
||||
});
|
||||
rc.on(RoomClient.EVENTS.roomUnlock, () => {
|
||||
console.log('Room Client unlock room');
|
||||
hide(unlockRoomButton);
|
||||
show(lockRoomButton);
|
||||
});
|
||||
rc.on(RoomClient.EVENTS.exitRoom, () => {
|
||||
console.log('Room Client leave room');
|
||||
window.location.href = '/newroom';
|
||||
});
|
||||
}
|
||||
|
||||
function openNav() {
|
||||
control.classList.toggle('show');
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
control.classList.toggle('show');
|
||||
}
|
||||
|
||||
// ####################################################
|
||||
// SHOW LOG
|
||||
// ####################################################
|
||||
@@ -746,8 +764,14 @@ async function getRoomParticipants() {
|
||||
let peer_name = peer_info.peer_name;
|
||||
let peer_id = peer_info.peer_id;
|
||||
rc.peer_id === peer_id
|
||||
? (table += `<tr><td>- 👤 ${peer_name} (me)</td><td></td></tr>`)
|
||||
: (table += `<tr id='${peer_id}'><td>- 👤 ${peer_name}</td><td><button id='${peer_id}' onclick="rc.peerAction('me',this.id,'eject')">eject</button></td></tr>`);
|
||||
? (table += `<tr>
|
||||
<td>👤 ${peer_name} (me)</td>
|
||||
<td></td>
|
||||
</tr>`)
|
||||
: (table += `<tr id='${peer_id}'>
|
||||
<td>👤 ${peer_name}</td>
|
||||
<td><button id='${peer_id}' onclick="rc.peerAction('me',this.id,'eject')">eject</button></td>
|
||||
</tr>`);
|
||||
}
|
||||
table += `</table></div>`;
|
||||
|
||||
|
||||
@@ -48,9 +48,8 @@ let recordedBlobs;
|
||||
|
||||
class RoomClient {
|
||||
constructor(
|
||||
localMediaEl,
|
||||
remoteVideoEl,
|
||||
remoteAudioEl,
|
||||
videoMediaContainer,
|
||||
mediasoupClient,
|
||||
socket,
|
||||
room_id,
|
||||
@@ -63,9 +62,8 @@ class RoomClient {
|
||||
isVideoOn,
|
||||
successCallback,
|
||||
) {
|
||||
this.localMediaEl = localMediaEl;
|
||||
this.remoteVideoEl = remoteVideoEl;
|
||||
this.remoteAudioEl = remoteAudioEl;
|
||||
this.videoMediaContainer = videoMediaContainer;
|
||||
this.mediasoupClient = mediasoupClient;
|
||||
|
||||
this.socket = socket;
|
||||
@@ -103,6 +101,7 @@ class RoomClient {
|
||||
this.recScreenStream = null;
|
||||
this._isRecording = false;
|
||||
|
||||
this.myVideoEl = null;
|
||||
this.connectedRoom = null;
|
||||
this.debug = false;
|
||||
|
||||
@@ -484,6 +483,8 @@ class RoomClient {
|
||||
track.stop();
|
||||
});
|
||||
elem.parentNode.removeChild(elem);
|
||||
|
||||
resizeVideoMedia();
|
||||
}
|
||||
this.producers.delete(producer.id);
|
||||
});
|
||||
@@ -495,6 +496,8 @@ class RoomClient {
|
||||
track.stop();
|
||||
});
|
||||
elem.parentNode.removeChild(elem);
|
||||
|
||||
resizeVideoMedia();
|
||||
}
|
||||
this.producers.delete(producer.id);
|
||||
});
|
||||
@@ -602,27 +605,27 @@ class RoomClient {
|
||||
async handleProducer(id, type, stream) {
|
||||
let elem, d, p;
|
||||
d = document.createElement('div');
|
||||
d.className = 'd';
|
||||
d.className = 'Camera';
|
||||
d.id = id + '_d';
|
||||
elem = document.createElement('video');
|
||||
elem.setAttribute('id', id);
|
||||
elem.setAttribute('playsinline', true);
|
||||
elem.autoplay = true;
|
||||
elem.poster = image.poster;
|
||||
if (this.isMobileDevice || type === mediaType.screen) elem.className = 'vid';
|
||||
else elem.className = 'vid mirror';
|
||||
this.isMobileDevice || type === mediaType.screen ? (elem.className = '') : (elem.className = 'mirror');
|
||||
p = document.createElement('p');
|
||||
p.id = id + '_name';
|
||||
p.className = 'pn';
|
||||
p.innerHTML = '👤 ' + this.peer_name + ' (me)';
|
||||
d.appendChild(elem);
|
||||
d.appendChild(p);
|
||||
this.localMediaEl.appendChild(d);
|
||||
this.videoMediaContainer.appendChild(d);
|
||||
this.attachMediaStream(elem, stream, type, 'Producer');
|
||||
this.myVideoEl = elem;
|
||||
this.handleFS(elem.id);
|
||||
this.setTippy(elem.id, 'Full Screen', 'top-end');
|
||||
this.popupPeerInfo(p.id, this.peer_info);
|
||||
this.sound('joined');
|
||||
resizeVideoMedia();
|
||||
return elem;
|
||||
}
|
||||
|
||||
@@ -698,6 +701,8 @@ class RoomClient {
|
||||
track.stop();
|
||||
});
|
||||
d.parentNode.removeChild(d);
|
||||
|
||||
resizeVideoMedia();
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
@@ -780,25 +785,26 @@ class RoomClient {
|
||||
switch (type) {
|
||||
case mediaType.video:
|
||||
d = document.createElement('div');
|
||||
d.className = 'd';
|
||||
d.className = 'Camera';
|
||||
d.id = id + '_d';
|
||||
elem = document.createElement('video');
|
||||
elem.setAttribute('id', id);
|
||||
elem.setAttribute('playsinline', true);
|
||||
elem.autoplay = true;
|
||||
elem.className = 'vid';
|
||||
elem.className = '';
|
||||
elem.poster = image.poster;
|
||||
p = document.createElement('p');
|
||||
p.id = id + '_name';
|
||||
p.innerHTML = '👤 ' + peer_name;
|
||||
d.appendChild(elem);
|
||||
d.appendChild(p);
|
||||
this.remoteVideoEl.appendChild(d);
|
||||
this.videoMediaContainer.appendChild(d);
|
||||
this.attachMediaStream(elem, stream, type, 'Consumer');
|
||||
this.handleFS(elem.id);
|
||||
this.setTippy(elem.id, 'Full Screen', 'top-end');
|
||||
this.popupPeerInfo(p.id, peer_info);
|
||||
this.sound('joined');
|
||||
resizeVideoMedia();
|
||||
break;
|
||||
case mediaType.audio:
|
||||
elem = document.createElement('audio');
|
||||
@@ -822,6 +828,8 @@ class RoomClient {
|
||||
if (elem) elem.parentNode.removeChild(elem);
|
||||
if (d) d.parentNode.removeChild(d);
|
||||
|
||||
resizeVideoMedia();
|
||||
|
||||
this.consumers.delete(consumer_id);
|
||||
this.sound('left');
|
||||
}
|
||||
@@ -959,7 +967,7 @@ class RoomClient {
|
||||
// ####################################################
|
||||
|
||||
toggleDevices() {
|
||||
this.getId('myDevices').classList.toggle('show');
|
||||
this.getId('settings').classList.toggle('show');
|
||||
}
|
||||
|
||||
async sound(name) {
|
||||
|
||||
58
public/js/VideoGrid.js
Normal file
58
public/js/VideoGrid.js
Normal file
@@ -0,0 +1,58 @@
|
||||
'use strict';
|
||||
|
||||
function Area(Increment, Count, Width, Height, Margin = 10) {
|
||||
let i = 0;
|
||||
let w = 0;
|
||||
let h = Increment * 0.75 + Margin * 2;
|
||||
while (i < Count) {
|
||||
if (w + Increment > Width) {
|
||||
w = 0;
|
||||
h = h + Increment * 0.75 + Margin * 2;
|
||||
}
|
||||
w = w + Increment + Margin * 2;
|
||||
i++;
|
||||
}
|
||||
if (h > Height) return false;
|
||||
else return Increment;
|
||||
}
|
||||
|
||||
function resizeVideoMedia() {
|
||||
let Margin = 2;
|
||||
let Scenary = document.getElementById('videoMediaContainer');
|
||||
let Width = Scenary.offsetWidth - Margin * 2;
|
||||
let Height = Scenary.offsetHeight - Margin * 2;
|
||||
let Cameras = document.getElementsByClassName('Camera');
|
||||
let max = 0;
|
||||
|
||||
// loop (i recommend you optimize this)
|
||||
let i = 1;
|
||||
while (i < 5000) {
|
||||
let w = Area(i, Cameras.length, Width, Height, Margin);
|
||||
if (w === false) {
|
||||
max = i - 1;
|
||||
break;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
|
||||
max = max - Margin * 2;
|
||||
setWidth(max, Margin);
|
||||
}
|
||||
|
||||
function setWidth(width, margin) {
|
||||
let Cameras = document.getElementsByClassName('Camera');
|
||||
for (var s = 0; s < Cameras.length; s++) {
|
||||
Cameras[s].style.width = width + 'px';
|
||||
Cameras[s].style.margin = margin + 'px';
|
||||
Cameras[s].style.height = width * 0.7 + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener(
|
||||
'load',
|
||||
function (event) {
|
||||
resizeVideoMedia();
|
||||
window.onresize = resizeVideoMedia;
|
||||
},
|
||||
false,
|
||||
);
|
||||
المرجع في مشكلة جديدة
حظر مستخدم