mirror of
https://github.com/davedoesdev/streamana.git
synced 2024-08-20 23:27:41 +08:00
67 lines
3.4 KiB
HTML
67 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<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>
|
|
<link href="./example.css" rel="stylesheet">
|
|
<script type="module" src="./example.js"></script>
|
|
</head>
|
|
<body class="d-flex flex-column vh-100">
|
|
<nav id="nav" class="navbar navbar-light bg-light flex-grow-0">
|
|
<div class="container-fluid">
|
|
<div class="row gx-2 gy-2 gy-sm-0 w-100 mx-0 align-items-center">
|
|
<div class="col-sm col-auto order-1">
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
</div>
|
|
<div class="col-sm order-3 order-sm-2 d-sm-block">
|
|
<input id="ingestion-url" type="text" class="form-control" placeholder="Ingestion URL">
|
|
</div>
|
|
<div class="col-sm col-auto order-2 order-sm-3 ms-auto">
|
|
<div class="input-group-text">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="go-live" disabled autocomplete="off">
|
|
<label for="go-live">Go Live</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="collapse p-3 bg-light text-dark card border-dark flex-grow-0" id="navbarToggleExternalContent">
|
|
<div class="pb-4">
|
|
<label for="ffmpeg-lib-url" class="form-label">FFmpeg library URL</label>
|
|
<input id="ffmpeg-lib-url" class="form-control" placeholder="ffmpeg-worker-hls.js" type="text">
|
|
</div>
|
|
<div class="form-check">
|
|
<input id="lock-portrait" class="form-check-input" type="checkbox">
|
|
<label for="lock-portrait" class="form-check-label">Lock and rotate portrait video</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input id="zoom-video" class="form-check-input" type="checkbox">
|
|
<label for="zoom-video" class="form-check-label">Display video without vertical bars</label>
|
|
</div>
|
|
<div class="pt-4">
|
|
<label for="resolution" class="form-label">Encoder resolution</label>
|
|
<select id="resolution" class="form-select">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="error-alert" class="alert alert-danger alert-dismissible fade mb-0 flex-grow-0" role="alert">
|
|
<strong>An error occurred!</strong> See the Developer Console for details.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
<div class="position-relative overflow-hidden flex-grow-1 mx-auto d-flex align-items-center">
|
|
<canvas id="canvas" class="mw-100 mh-100" playsinline></canvas>
|
|
<div class="position-absolute top-50 start-50 translate-middle">
|
|
<div id="waiting" class="text-primary spinner-border d-none" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|