105 lines
4.5 KiB
HTML
105 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>OpenVidu Recording</title>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="shortcut icon" href="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.5.0/dist/livekit-client.umd.js"></script>
|
|
<script src="app.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<a href="/" title="Home"><h1>OpenVidu Recording</h1></a>
|
|
<div id="links">
|
|
<a
|
|
href="https://github.com/OpenVidu/openvidu-livekit-tutorials/tree/master/advanced-features/openvidu-recording"
|
|
title="GitHub Repository"
|
|
target="_blank"
|
|
>
|
|
<i class="fa-brands fa-github"></i>
|
|
</a>
|
|
<a
|
|
href="https://livekit-tutorials.openvidu.io/tutorials/advanced-tutorials/openvidu-recording/"
|
|
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-primary" id="open-recordings-dialog" onclick="openRecordingsDialog()">
|
|
Recordings
|
|
</button>
|
|
<button class="btn btn-danger" id="leave-room-button" onclick="leaveRoom()">Leave Room</button>
|
|
</div>
|
|
<div id="layout-container"></div>
|
|
<dialog id="recordings-dialog">
|
|
<h2>Recordings</h2>
|
|
<div id="recording-controls">
|
|
<button class="btn btn-primary" id="recording-button" onclick="manageRecording()">Start Recording</button>
|
|
<div id="recording-text" hidden>Room is being recorded</div>
|
|
</div>
|
|
<div id="recording-video-container"></div>
|
|
<div id="recording-list"></div>
|
|
<button class="btn btn-secondary" id="close-recordings-dialog" onclick="closeRecordingsDialog()">Close</button>
|
|
</dialog>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<p class="text">Made with love by <span>OpenVidu Team</span></p>
|
|
<a href="https://openvidu.io/" target="_blank">
|
|
<img id="openvidu-logo" src="images/openvidu_logo.png" alt="OpenVidu logo" />
|
|
</a>
|
|
</footer>
|
|
</body>
|
|
</html>
|