c49475c25f
This improvement ensures that user cannot click the join button multiple times while joining process is in progress, causing unexpected behaviors
92 lines
3.7 KiB
HTML
92 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Basic JavaScript</title>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon" />
|
|
|
|
<!-- Bootstrap -->
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
|
|
<!-- Font Awesome -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
|
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
/>
|
|
|
|
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
|
|
<script src="https://cdn.jsdelivr.net/npm/livekit-client@2.1.5/dist/livekit-client.umd.js"></script>
|
|
<script src="app.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<a href="/" title="Home"><h1>Basic JavaScript</h1></a>
|
|
<div id="links">
|
|
<a
|
|
href="https://github.com/OpenVidu/openvidu-livekit-tutorials/tree/master/application-client/openvidu-js"
|
|
title="GitHub Repository"
|
|
target="_blank"
|
|
>
|
|
<i class="fa-brands fa-github"></i>
|
|
</a>
|
|
<a
|
|
href="https://livekit-tutorials.openvidu.io/tutorials/application-client/javascript/"
|
|
title="Documentation"
|
|
target="_blank"
|
|
>
|
|
<i class="fa-solid fa-book"></i>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div id="join">
|
|
<div id="join-dialog">
|
|
<h2>Join a Video Room</h2>
|
|
<form onsubmit="joinRoom(); return false">
|
|
<div>
|
|
<label for="participant-name">Participant</label>
|
|
<input id="participant-name" class="form-control" type="text" required />
|
|
</div>
|
|
<div>
|
|
<label for="room-name">Room</label>
|
|
<input id="room-name" class="form-control" type="text" required />
|
|
</div>
|
|
<button id="join-button" class="btn btn-lg btn-success" type="submit">Join!</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="room" hidden>
|
|
<div id="room-header">
|
|
<h2 id="room-title"></h2>
|
|
<button class="btn btn-danger" id="leave-room-button" onclick="leaveRoom()">Leave Room</button>
|
|
</div>
|
|
<div id="layout-container"></div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<p class="text">Made with love by <span>OpenVidu Team</span></p>
|
|
<a href="http://www.openvidu.io/" target="_blank">
|
|
<img id="openvidu-logo" src="resources/images/openvidu_logo.png" alt="OpenVidu logo" />
|
|
</a>
|
|
</footer>
|
|
</body>
|
|
</html>
|