298 أسطر
15 KiB
HTML
298 أسطر
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZRF9TVSZ0J"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag() {
|
|
dataLayer.push(arguments);
|
|
}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-ZRF9TVSZ0J');
|
|
</script>
|
|
|
|
<!-- 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, mediasoup, mediasoup-client, self hosted, voip, sip, real-time communications, chat, messaging, meet, webrtc stun, webrtc turn, video meeting, video chat, video conference, multi video chat, multi video conference, peer to peer, p2p, rtc, alternative to, zoom, microsoft teams, google meet, jitsi, meeting"
|
|
/>
|
|
|
|
<!-- https://ogp.me -->
|
|
|
|
<meta property="og:type" content="app-webrtc" />
|
|
<meta property="og:site_name" content="MiroTalk SFU" />
|
|
<meta property="og:title" content="Click the link to make a call." />
|
|
<meta
|
|
property="og:description"
|
|
content="MiroTalk SFU calling provides real-time video calls, messaging and screen sharing."
|
|
/>
|
|
<meta property="og:image" content="/images/mirotalksfu.png" />
|
|
|
|
<!-- StyleSheet -->
|
|
|
|
<link rel="stylesheet" href="/css/Room.css" />
|
|
<link rel="stylesheet" href="/css/VideoGrid.css" />
|
|
|
|
<!-- https://animate.style 4 using for swal fadeIn-Out -->
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
|
|
|
|
<!-- Bootstrap 5 -->
|
|
|
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
|
|
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
|
|
<!-- Js scripts -->
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script src="/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>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/460/fabric.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.4"></script>
|
|
<script src="https://unpkg.com/emoji-picker-element@1" type="module"></script>
|
|
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
|
<script src="https://unpkg.com/tippy.js@6"></script>
|
|
</head>
|
|
<body onload="initClient()">
|
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
|
|
<div id="loadingDiv" class="center pulsate">
|
|
<h1>Loading...</h1>
|
|
<pre>
|
|
Please allow the camera or microphone
|
|
access to use this app.
|
|
</pre>
|
|
</div>
|
|
|
|
<button id="openNavButton" class="hidden">☰ menu</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="settingsButton" class="hidden"><i class="fas fa-cogs"></i> Settings</button>
|
|
<div id="settings" class="dropdown-content fadein">
|
|
<div id="devicesList">
|
|
<i class="fas fa-video"></i> Video
|
|
<select id="videoSelect" class="form-select text-light bg-dark"></select>
|
|
<br />
|
|
<i class="fas fa-microphone"></i> Microphone
|
|
<select id="microphoneSelect" class="form-select text-light bg-dark"></select>
|
|
<br />
|
|
<i class="fas fa-volume-up"></i> Speaker
|
|
<select id="speakerSelect" class="form-select text-light bg-dark"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button id="recButton" class="hidden"><i class="fas fa-record-vinyl"></i> Recording</button>
|
|
<div id="recording" class="dropdown-content fadein">
|
|
<div id="recordingCommand" class="recording">
|
|
<button id="startRecButton" class="hidden"><i class="fas fa-record-vinyl"></i> Start</button>
|
|
<button id="stopRecButton" class="hidden"><i class="fas fa-stop-circle"></i> Stop</button>
|
|
<button id="pauseRecButton" class="hidden"><i class="far fa-pause-circle"></i> Pause</button>
|
|
<button id="resumeRecButton" class="hidden"><i class="far fa-play-circle"></i> Resume</button>
|
|
<p id="recordingStatus">🔴 REC 0s</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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="raiseHandButton" class="hidden"><i class="fas fa-hand-rock"></i> Raise hand</button>
|
|
<button id="lowerHandButton" class="hidden"><i class="fas fa-hand-paper"></i> Lower hand</button>
|
|
<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="fileShareButton" class="hidden"><i class="fas fa-folder-open"></i> File Sharing</button>
|
|
<div class="dropdown">
|
|
<button id="youTubeShareButton" class="hidden"><i class="fab fa-youtube"></i> YouTube</button>
|
|
<div id="youTubeSettings" class="dropdown-content fadein">
|
|
<div id="youTubeOptions">
|
|
<button id="youTubeCloseBtn"><i class="fas fa-times"></i> Close Video</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button id="whiteboardButton" class="hidden">
|
|
<i class="fas fa-chalkboard-teacher"></i> Whiteboard
|
|
</button>
|
|
<div id="whiteboardSettings" class="dropdown-content fadein">
|
|
<div id="whiteboardOptions">
|
|
<i class="fas fa-pencil-alt"></i> Line width
|
|
<input id="wbDrawingLineWidthEl" type="range" value="3" min="1" max="15" />
|
|
<br />
|
|
<i class="fas fa-palette"></i> Line color
|
|
<br />
|
|
<input id="wbDrawingColorEl" type="color" value="#FFFFFF" />
|
|
<br />
|
|
<i class="fas fa-palette"></i> Background color
|
|
<br />
|
|
<input id="wbBackgroundColorEl" type="color" value="#000000" />
|
|
<br />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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 id="remoteAudios"></div>
|
|
|
|
<div id="sendFileDiv" class="fadein center">
|
|
<div id="sendFileInfo"></div>
|
|
<div id="sendFilePercentage"></div>
|
|
<progress id="sendProgress" max="0" value="0"></progress>
|
|
<button id="sendAbortBtn" class="fas fa-stop-circle"> Abort</button>
|
|
</div>
|
|
|
|
<div id="receiveFileDiv" class="fadein center">
|
|
<div id="receiveFileInfo"></div>
|
|
<div id="receiveFilePercentage"></div>
|
|
<progress id="receiveProgress" max="0" value="0"></progress>
|
|
<button id="receiveHideBtn" class="fas fa-eye-slash"> Hide</button>
|
|
</div>
|
|
|
|
<section id="participants" class="fadein center hidden">
|
|
<header id="participantsHeader" class="participants-header">
|
|
<div id="participantsTitle" class="participants-header-title"></div>
|
|
<div class="participants-header-options">
|
|
<button id="participantsRefreshBtn" class="fas fa-sync-alt"></button>
|
|
<button id="participantsCloseBtn" class="fas fa-times"></button>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div id="roomParticipants"></div>
|
|
</main>
|
|
</section>
|
|
|
|
<section id="whiteboard" class="fadein center hidden">
|
|
<header id="whiteboardHeader" class="whiteboard-header">
|
|
<div id="whiteboardTitle" class="whiteboard-header-title"></div>
|
|
<div class="whiteboard-header-options">
|
|
<button id="whiteboardPencilBtn" class="fas fa-pencil-alt"></button>
|
|
<button id="whiteboardObjectBtn" class="fas fa-mouse-pointer"></button>
|
|
<button id="whiteboardUndoBtn" class="fas fa-undo"></button>
|
|
<button id="whiteboardRedoBtn" class="fas fa-redo"></button>
|
|
<button id="whiteboardImgFileBtn" class="far fa-image"></button>
|
|
<button id="whiteboardImgUrlBtn" class="fas fa-link"></button>
|
|
<button id="whiteboardTextBtn" class="fas fa-spell-check"></button>
|
|
<button id="whiteboardLineBtn" class="fas fa-slash"></button>
|
|
<button id="whiteboardRectBtn" class="far fa-square"></button>
|
|
<button id="whiteboardCircleBtn" class="far fa-circle"></button>
|
|
<button id="whiteboardSaveBtn" class="fas fa-save"></button>
|
|
<button id="whiteboardEraserBtn" class="fas fa-eraser"></button>
|
|
<button id="whiteboardCleanBtn" class="fas fa-trash"></button>
|
|
<button id="whiteboardCloseBtn" class="fas fa-times"></button>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<canvas id="wbCanvas"></canvas>
|
|
</main>
|
|
</section>
|
|
|
|
<section id="chatRoom" class="chat-room center fadein">
|
|
<section id="msger" class="msger">
|
|
<header id="chatHeader" class="chat-header">
|
|
<div class="chat-header-title"><i class="fas fa-comment-alt"></i> Chat</div>
|
|
<div class="chat-header-options">
|
|
<button id="chatCleanButton" class="fas fa-trash"></button>
|
|
<button id="chatSaveButton" class="fas fa-save"></button>
|
|
<button id="chatCloseButton" class="fas fa-times"></button>
|
|
</div>
|
|
</header>
|
|
<main id="chatMsger" class="chat-msger">
|
|
<div class="msg left-msg">
|
|
<div
|
|
class="msg-img"
|
|
style="
|
|
background-image: url('https://eu.ui-avatars.com/api?name=Participant&size=24&background=random&rounded=true');
|
|
"
|
|
></div>
|
|
<div class="msg-bubble">
|
|
<div class="msg-info">
|
|
<div class="msg-info-name">Participant</div>
|
|
<div class="msg-info-time">00:00:00</div>
|
|
</div>
|
|
<div class="msg-text">Public message example</div>
|
|
</div>
|
|
</div>
|
|
<div class="msg right-msg">
|
|
<div
|
|
class="msg-img"
|
|
style="
|
|
background-image: url('https://eu.ui-avatars.com/api?name=You&size=24&background=random&rounded=true');
|
|
"
|
|
></div>
|
|
<div class="msg-bubble">
|
|
<div class="msg-info">
|
|
<div class="msg-info-name">You</div>
|
|
<div class="msg-info-time">00:00:00</div>
|
|
</div>
|
|
<div class="msg-text">Public message example</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<div class="chat-msger-inputarea">
|
|
<input
|
|
id="chatMessage"
|
|
class="chat-msger-input"
|
|
type="text"
|
|
placeholder="💬 Enter your message..."
|
|
/>
|
|
<button id="chatEmojiButton" class="hidden">
|
|
<i class="fas fa-smile"></i>
|
|
</button>
|
|
<button id="chatSendButton" class="hidden">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</div>
|
|
<div id="chatEmoji" class="hidden fadein">
|
|
<emoji-picker class="dark"></emoji-picker>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</body>
|
|
</html>
|