Miroslav Pejic
167 lines
5.3 KiB
HTML
Executable File
167 lines
5.3 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
<script
|
|
async
|
|
src="https://www.googletagmanager.com/gtag/js?id=G-3XM60XK9RQ"
|
|
></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag() {
|
|
dataLayer.push(arguments);
|
|
}
|
|
gtag("js", new Date());
|
|
|
|
gtag("config", "G-3XM60XK9RQ");
|
|
</script>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
|
|
/>
|
|
<meta
|
|
name="keywords"
|
|
content="webrtc, webrtc stun, webrtc turn, video meeting, video chat, multi video chat, peer to peer, p2p, zoom"
|
|
/>
|
|
<!-- https://ogp.me -->
|
|
<meta property="og:type" content="app-webrtc" />
|
|
<meta property="og:site_name" content="mirotalk" />
|
|
<meta property="og:title" content="Click the link to join this call" />
|
|
<meta
|
|
property="og:description"
|
|
content="mirotalk - A free WebRTC browser-based video call."
|
|
/>
|
|
<meta property="og:image" content="/images/mirotalk.png" />
|
|
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="32x32"
|
|
href="/images/favicon.png"
|
|
/>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<script
|
|
src="https://kit.fontawesome.com/d2f1016e6f.js"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<!-- https://animate.style -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
|
|
/>
|
|
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
|
|
<script src="https://cdn.rawgit.com/muaz-khan/DetectRTC/master/DetectRTC.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script src="client.js"></script>
|
|
</head>
|
|
|
|
<body onload="initPeer()">
|
|
<div id="buttons">
|
|
<!-- https://fontawesome.com/icons?d=gallery -->
|
|
<button title="share room" id="copyRoomBtn" class="fas fa-users"></button>
|
|
<button title="audio" id="audioBtn" class="fas fa-microphone"></button>
|
|
<button title="video" id="videoBtn" class="fas fa-video"></button>
|
|
<button
|
|
title="swap camera"
|
|
id="swapCameraBtn"
|
|
class="fas fa-sync-alt"
|
|
></button>
|
|
<button
|
|
title="share screen"
|
|
id="screenShareBtn"
|
|
class="fas fa-desktop"
|
|
></button>
|
|
<button
|
|
title="full screen"
|
|
id="fullScreenBtn"
|
|
class="fas fa-expand-alt"
|
|
></button>
|
|
<button
|
|
title="send msg"
|
|
id="sendMsgBtn"
|
|
class="fas fa-paper-plane"
|
|
></button>
|
|
<button
|
|
title="chat room"
|
|
id="chatRoomBtn"
|
|
class="fas fa-comment"
|
|
></button>
|
|
<button title="about" id="aboutBtn" class="fas fa-question"></button>
|
|
<button
|
|
title="leave room"
|
|
id="leaveRoomBtn"
|
|
class="fas fa-phone-slash"
|
|
></button>
|
|
</div>
|
|
|
|
<!-- Start chat room -->
|
|
<section id="msgerDraggable" class="msger-draggable">
|
|
<section id="msger" class="msger">
|
|
<header id="msgerHeader" class="msger-header">
|
|
<div class="msger-header-title">
|
|
<i class="fas fa-comment-alt"></i> mirotalkChat
|
|
</div>
|
|
<div id="msgerHeaderHide" class="msger-header-hide">
|
|
<span><i class="fas fa-times"></i></span>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="msgerChat" class="msger-chat">
|
|
<div class="msg left-msg">
|
|
<div
|
|
class="msg-img"
|
|
style="background-image: url('/images/friend.png')"
|
|
></div>
|
|
|
|
<div class="msg-bubble">
|
|
<div class="msg-info">
|
|
<div class="msg-info-name">Friends Name</div>
|
|
<div class="msg-info-time">00:00</div>
|
|
</div>
|
|
<!-- https://getemoji.com -->
|
|
<div class="msg-text">Hi, welcome to mirotalkChat! 😄</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="msg right-msg">
|
|
<div
|
|
class="msg-img"
|
|
style="background-image: url('/images/programmer.png')"
|
|
></div>
|
|
|
|
<div class="msg-bubble">
|
|
<div class="msg-info">
|
|
<div class="msg-info-name">Your Name</div>
|
|
<div class="msg-info-time">00:00</div>
|
|
</div>
|
|
|
|
<div class="msg-text">Your message example</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<form class="msger-inputarea">
|
|
<input
|
|
id="msgerInput"
|
|
class="msger-input"
|
|
type="text"
|
|
placeholder="Enter your message..."
|
|
/>
|
|
<button id="msgerSendBtn" type="submit" class="msger-send-btn">
|
|
Send
|
|
</button>
|
|
</form>
|
|
</section>
|
|
</section>
|
|
<!-- End chat room -->
|
|
|
|
<!--
|
|
the <video> and <audio> tags are all added and removed dynamically
|
|
in 'onAddStream', 'setupLocalMedia', and 'removePeer'/'disconnect'
|
|
--></body>
|
|
</html>
|