2021-08-03 14:58:04 +08:00
|
|
|
<!DOCTYPE html>
|
2021-10-16 14:37:09 +08:00
|
|
|
<html class="busy">
|
2021-05-29 04:51:06 +08:00
|
|
|
<head>
|
2021-10-06 14:52:28 +08:00
|
|
|
<title>Streamana</title>
|
2021-07-29 05:22:52 +08:00
|
|
|
<meta charset="utf-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
2021-07-22 13:35:18 +08:00
|
|
|
<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>
|
2021-10-06 14:52:28 +08:00
|
|
|
<link href="./streamana.css" rel="stylesheet">
|
|
|
|
<script type="module" src="./streamana.js"></script>
|
2021-05-29 04:51:06 +08:00
|
|
|
</head>
|
2021-10-16 14:37:09 +08:00
|
|
|
<body class="d-flex flex-column vh-100 d-none">
|
|
|
|
<div id="busy" class="busy"></div>
|
2021-07-22 13:35:18 +08:00
|
|
|
<nav id="nav" class="navbar navbar-light bg-light flex-grow-0">
|
2021-05-29 04:51:06 +08:00
|
|
|
<div class="container-fluid">
|
2021-07-29 15:46:39 +08:00
|
|
|
<div class="row gx-2 gy-2 gy-sm-0 w-100 mx-0 align-items-center">
|
2021-10-01 15:18:46 +08:00
|
|
|
<div class="col-sm col-auto order-0">
|
2021-07-29 15:46:39 +08:00
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent">
|
|
|
|
<span class="navbar-toggler-icon"></span>
|
|
|
|
</button>
|
|
|
|
</div>
|
2021-07-30 04:46:35 +08:00
|
|
|
<div class="col-sm order-3 order-sm-2 d-sm-block">
|
2021-07-29 15:46:39 +08:00
|
|
|
<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">
|
2021-09-04 22:53:31 +08:00
|
|
|
<label for="go-live">Live</label>
|
2021-07-29 15:46:39 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-05-29 04:51:06 +08:00
|
|
|
</div>
|
2021-10-01 15:18:46 +08:00
|
|
|
<div id="mic" class="col-sm col-auto order-1">
|
2021-08-20 19:39:32 +08:00
|
|
|
<button type="button" class="navbar-toggler">
|
2021-09-02 15:53:36 +08:00
|
|
|
<span id="mic-icon" class="navbar-toggler-icon mic-icon off"></span>
|
2021-08-20 19:39:32 +08:00
|
|
|
</button>
|
|
|
|
</div>
|
2021-10-01 15:18:46 +08:00
|
|
|
<div id="camera" class="col-sm col-auto order-1">
|
2021-09-02 05:25:34 +08:00
|
|
|
<button type="button" class="navbar-toggler">
|
2021-09-02 15:53:36 +08:00
|
|
|
<span id="camera-icon" class="navbar-toggler-icon camera-icon off"></span>
|
2021-09-02 05:25:34 +08:00
|
|
|
</button>
|
|
|
|
</div>
|
2021-10-01 15:18:46 +08:00
|
|
|
<div id="camera-swap" class="col-sm col-auto order-1 d-none">
|
2021-09-02 05:25:34 +08:00
|
|
|
<button type="button" class="navbar-toggler">
|
2021-09-02 15:53:36 +08:00
|
|
|
<span class="navbar-toggler-icon camera-swap-icon"></span>
|
2021-09-02 05:25:34 +08:00
|
|
|
</button>
|
|
|
|
</div>
|
2021-07-29 05:22:52 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-05-29 04:51:06 +08:00
|
|
|
</nav>
|
2021-07-22 13:35:18 +08:00
|
|
|
<div class="collapse p-3 bg-light text-dark card border-dark flex-grow-0" id="navbarToggleExternalContent">
|
|
|
|
<div class="pb-4">
|
2021-10-06 14:43:07 +08:00
|
|
|
<label for="resolution" class="form-label">Video resolution</label>
|
|
|
|
<select id="resolution" class="form-select">
|
|
|
|
</select>
|
2021-07-22 13:35:18 +08:00
|
|
|
</div>
|
2021-09-01 13:40:22 +08:00
|
|
|
<div class="form-check">
|
|
|
|
<input id="greyscale" class="form-check-input" type="checkbox">
|
|
|
|
<label for="greyscale" class="form-check-label">Greyscale</label>
|
|
|
|
</div>
|
2021-07-22 13:35:18 +08:00
|
|
|
<div class="form-check">
|
|
|
|
<input id="lock-portrait" class="form-check-input" type="checkbox">
|
2021-08-21 19:08:22 +08:00
|
|
|
<label for="lock-portrait" class="form-check-label">Lock and rotate portrait mode</label>
|
2021-07-26 06:37:55 +08:00
|
|
|
</div>
|
|
|
|
<div class="form-check">
|
2021-08-19 16:53:58 +08:00
|
|
|
<input id="zoom-video" class="form-check-input" type="checkbox">
|
2021-08-21 19:08:22 +08:00
|
|
|
<label for="zoom-video" class="form-check-label">Minimize vertical bars in local video display</label>
|
2021-07-22 13:35:18 +08:00
|
|
|
</div>
|
2021-10-15 01:07:21 +08:00
|
|
|
<div class="pt-4">
|
|
|
|
<label class="form-label">Ingestion protocol</label>
|
|
|
|
<div>
|
|
|
|
<div class="form-check form-check-inline">
|
|
|
|
<input id="protocol-hls" name="protocol" class="form-check-input" type="radio" value="ffmpeg-worker-hls.js">
|
|
|
|
<label for="protocol-hls" class="form-check-label">HLS (H.264)</label>
|
|
|
|
</div>
|
|
|
|
<div class="form-check form-check-inline">
|
|
|
|
<input id="protocol-dash" name="protocol" class="form-check-input" type="radio" value="ffmpeg-worker-dash.js">
|
|
|
|
<label for="protocol-dash" class="form-check-label">DASH (VP9)</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-08-17 16:20:28 +08:00
|
|
|
<div class="pt-4">
|
2021-10-06 14:43:07 +08:00
|
|
|
<label for="ffmpeg-lib-url" class="form-label">FFmpeg library URL</label>
|
2021-10-15 01:07:21 +08:00
|
|
|
<input id="ffmpeg-lib-url" class="form-control" type="text">
|
2021-08-17 16:20:28 +08:00
|
|
|
</div>
|
2021-05-29 04:51:06 +08:00
|
|
|
</div>
|
2021-07-22 13:35:18 +08:00
|
|
|
<div id="error-alert" class="alert alert-danger alert-dismissible fade mb-0 flex-grow-0" role="alert">
|
2021-05-29 04:51:06 +08:00
|
|
|
<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>
|
2021-08-19 16:53:58 +08:00
|
|
|
<div class="position-relative overflow-hidden flex-grow-1 mx-auto d-flex align-items-center">
|
2021-07-24 06:17:20 +08:00
|
|
|
<canvas id="canvas" class="mw-100 mh-100" playsinline></canvas>
|
|
|
|
<div class="position-absolute top-50 start-50 translate-middle">
|
2021-05-29 04:51:06 +08:00
|
|
|
<div id="waiting" class="text-primary spinner-border d-none" role="status">
|
|
|
|
<span class="visually-hidden">Loading...</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|