moonfire-nvr/ui/public/index.html
Scott Lamb 0236ab8d64 add live stream viewing to React prototype
It's a start. It can display several streams at once, which is nice.
There are lots of opportunities for improvement:

*   it doesn't keep the videos approximately in sync.
*   it accumulates extra buffering, drifting behind live. This is
    particularly noticeable when it's paused and played again; it can
    be several seconds before it jumps to after the break.
*   it always uses the sub stream rather main. I'd prefer it support
    "auto" (use main if the viewport is larger than the sub stream and
    there's sufficient bandwidth), "main", or "sub".
*   it has a kludgy heuristic where it throws away everything buffered 5
    seconds before the current timestamp. It should throw away
    everything before the current GOP instead, but I need to alter the
    API so it can easily know when that is.
*   it can't tell you when a camera connection is down. This needs an
    API change also.
*   it'd be nice to quickly double-click on a stream to view only it,
    then double-click again to go back to the multi-pane view.
*   it doesn't allow you to zoom in on part of the video. This would be
    nice particularly when viewing 4k video streams on small screens.
*   it has only four preconfigured layouts that subdivide a 16x9
    viewport. You have to choose every camera every time. It'd be nice
    to both allow more flexibility and have more memory.

React prototype: #111
live stream: #59
2021-03-26 16:45:47 -07:00

47 lines
1.4 KiB
HTML

<!DOCTYPE html>
<!--
- This file is part of Moonfire NVR, a security camera network video recorder.
- Copyright (C) 2021 The Moonfire NVR Authors; see AUTHORS and LICENSE.txt.
- SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="%PUBLIC_URL%/favicons/apple-touch-icon-94a09b5d2ddb5af47.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="%PUBLIC_URL%/favicons/favicon-32x32-ab95901a9e0d040e2.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="%PUBLIC_URL%/favicons/favicon-16x16-b16b3f2883aacf9f1.png"
/>
<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
<link
rel="mask-icon"
href="%PUBLIC_URL%/favicons/safari-pinned-tab-9792c2c82f04639f8.svg"
color="#e04e1b"
/>
<meta name="theme-color" content="#e04e1b" />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width"
/>
<meta name="description" content="security camera network video recorder" />
<title>Moonfire NVR</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" style="display: flex; flex-direction: column"></div>
</body>
</html>