Miroslav Pejic
144 lines
6.3 KiB
HTML
Executable File
144 lines
6.3 KiB
HTML
Executable File
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Call-me</title>
|
|
|
|
<!-- Meta Information -->
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<!-- https://favicon.io/favicon-generator/ -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
|
|
<link rel="manifest" href="/favicon/site.webmanifest" />
|
|
|
|
<!-- Link to Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
|
|
|
<!-- Link to Font Awesome CSS for icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
|
|
|
|
<!-- Link to your custom CSS file -->
|
|
<link rel="stylesheet" href="./style.css" />
|
|
|
|
<!-- Link to SweetAlert CSS file -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8/dist/sweetalert2.min.css" />
|
|
|
|
<!-- ink to Animate CSS file -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css/animate.min.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Sign-in Page -->
|
|
<div id="signInPage" class="container text-center center">
|
|
<div class="container mt-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header"><h1>Call-me</h1></div>
|
|
<div class="card-body">
|
|
<!-- Sign-in Form -->
|
|
<form>
|
|
<div class="mb-3">
|
|
<!-- Input field for entering the username -->
|
|
<input
|
|
id="usernameIn"
|
|
type="email"
|
|
class="form-control"
|
|
id="email"
|
|
placeholder="Enter username"
|
|
required
|
|
autofocus
|
|
/>
|
|
</div>
|
|
<!-- Sign-in button -->
|
|
<button id="signInBtn" type="submit" class="btn btn-primary">Sign In</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Room Page -->
|
|
<div class="container text-center center">
|
|
<div id="roomPage">
|
|
<!-- Local video element (user's video) -->
|
|
<div id="localVideoContainer">
|
|
<video id="localVideo"></video>
|
|
<span id="localUsername"></span>
|
|
</div>
|
|
<!-- Remote video element (video from the other user) -->
|
|
<video id="remoteVideo"></video>
|
|
<div class="row text-center">
|
|
<div class="col-md-12">
|
|
<div class="mb-3">
|
|
<!-- Input field for entering the username to call -->
|
|
<input
|
|
id="callUsernameIn"
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Username to call"
|
|
/>
|
|
</div>
|
|
<!-- Button to hide/show the local video -->
|
|
<button
|
|
id="hideBtn"
|
|
class="btn btn-custom btn-primary btn-m"
|
|
data-toggle="tooltip"
|
|
data-placement="top"
|
|
title="Toggle hide me"
|
|
>
|
|
<i class="fas fa-eye-slash"></i>
|
|
</button>
|
|
<!-- Button to initiate a video call -->
|
|
<button
|
|
id="callBtn"
|
|
class="btn btn-custom btn-success btn-m"
|
|
data-toggle="tooltip"
|
|
data-placement="top"
|
|
title="Call"
|
|
>
|
|
<i class="fas fa-phone"></i>
|
|
</button>
|
|
<!-- Button to hang up the call -->
|
|
<button
|
|
id="hangUpBtn"
|
|
class="btn btn-custom btn-danger btn-m"
|
|
data-toggle="tooltip"
|
|
data-placement="top"
|
|
title="Hang up"
|
|
>
|
|
<i class="fas fa-phone-slash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript libraries for WebSocket and custom client code -->
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script src="client.js"></script>
|
|
|
|
<!-- Include SweetAlert JS file -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8/dist/sweetalert2.all.min.js"></script>
|
|
|
|
<!-- Include Bootstrap JavaScript file -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- Initialize tooltips -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Initialize tooltips
|
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'));
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|