better error message for live view on iOS (#121)

CHANGELOG.md

@@ -14,6 +14,7 @@ Each release is tagged in Git and on the Docker repository
     workaround, so anamorphic videos looked correct on Chrome but slightly
     stretched on Firefox. Now both live streams and playback are fully correct
     on all browsers.
+*   UI: better error message on browsers where live view is unsupported.
 
 ## `v0.6.4` (2021-06-28)
 

ui/src/Live/index.tsx

@@ -2,6 +2,8 @@
 // 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
 
+import Container from "@material-ui/core/Container";
+import ErrorIcon from "@material-ui/icons/Error";
 import { Camera } from "../types";
 import LiveCamera from "./LiveCamera";
 import Multiview from "./Multiview";
@@ -12,6 +14,21 @@ export interface LiveProps {
 }
 
 const Live = ({ cameras, layoutIndex }: LiveProps) => {
+  if ("MediaSource" in window === false) {
+    return (
+      <Container>
+        <ErrorIcon
+          sx={{
+            float: "left",
+            color: "secondary.main",
+            marginRight: "1em",
+          }}
+        />
+        Live view doesn't work yet on your browser. See{" "}
+        <a href="https://github.com/scottlamb/moonfire-nvr/issues/121">#121</a>.
+      </Container>
+    );
+  }
   return (
     <Multiview
       layoutIndex={layoutIndex}