work on Firefox!

Fixes #286. I dug into Firefox code a bit to understand this but got a lost. But I guess there are different policies for what's accessible via `video.src = ""` than for `<video src="">`. This works for now, matches what other players such as `mpegts.js` do, and is closer to what Safari MME (required on iPhone) needs anyway. (With MME, apparently you have to use `video.srcObject`, or the `MediaSource`'s `sourceopen` event will never fire.)
scottlamb · Apr 17, 2024 · 8b5f2b4 · 8b5f2b4
1 parent a65994b
commit 8b5f2b4
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 41 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,10 @@ even on minor releases, e.g. `v0.7.5` -> `v0.7.6`.
     *   live view: new dual camera layout, more descriptive layout names,
         full screen option, re-open with last layout and camera selection
     *   list view: filter button becomes outlined when enabled
+*   Fix [#286](https://github.com/scottlamb/moonfire-nvr/issues/286):
+    live view now works on Firefox! Formerly, it'd fail with messages such as
+    `Security Error: Content at https://mydomain.com/ may not load data from blob:https://mydomain.com/44abc5dc-750d-48d1-817d-2e6a52445592`.
+
 
 ## v0.7.13 (2024-02-12)
 

diff --git a/ui/src/Live/LiveCamera.tsx b/ui/src/Live/LiveCamera.tsx
@@ -2,7 +2,7 @@
 // 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 React, { SyntheticEvent } from "react";
+import React from "react";
 import { Camera } from "../types";
 import { Part, parsePart } from "./parser";
 import * as api from "../api";
@@ -63,15 +63,34 @@ class LiveCameraDriver {
     camera: Camera,
     setPlaybackState: (state: PlaybackState) => void,
     setAspect: (aspect: [number, number]) => void,
-    videoRef: React.RefObject<HTMLVideoElement>
+    video: HTMLVideoElement
   ) {
     this.camera = camera;
     this.setPlaybackState = setPlaybackState;
     this.setAspect = setAspect;
-    this.videoRef = videoRef;
+    this.video = video;
+    video.addEventListener("pause", this.videoPause);
+    video.addEventListener("play", this.videoPlay);
+    video.addEventListener("playing", this.videoPlaying);
+    video.addEventListener("timeupdate", this.videoTimeUpdate);
+    video.addEventListener("waiting", this.videoWaiting);
     this.src.addEventListener("sourceopen", this.onMediaSourceOpen);
+    this.video.src = this.url;
   }
 
+  unmount = () => {
+    this.stopStream("unmount");
+    const v = this.video;
+    v.removeEventListener("pause", this.videoPause);
+    v.removeEventListener("play", this.videoPlay);
+    v.removeEventListener("playing", this.videoPlaying);
+    v.removeEventListener("timeupdate", this.videoTimeUpdate);
+    v.removeEventListener("waiting", this.videoWaiting);
+    v.src = "";
+    v.load();
+    URL.revokeObjectURL(this.url);
+  };
+
   onMediaSourceOpen = () => {
     this.startStream("sourceopen");
   };
@@ -252,12 +271,11 @@ class LiveCameraDriver {
     if (
       this.buf.state !== "open" ||
       this.buf.busy ||
-      this.buf.srcBuf.buffered.length === 0 ||
-      this.videoRef.current === null
+      this.buf.srcBuf.buffered.length === 0
     ) {
       return;
     }
-    const curTs = this.videoRef.current.currentTime;
+    const curTs = this.video.currentTime;
 
     // TODO: call out key frames in the part headers. The "- 5" here is a guess
     // to avoid removing anything from the current GOP.
@@ -273,13 +291,23 @@ class LiveCameraDriver {
     this.error(`SourceBuffer ${e.type}`);
   };
 
-  videoPlaying = (e: SyntheticEvent<HTMLVideoElement, Event>) => {
+  videoPause = () => {
+    this.stopStream("pause");
+  };
+
+  videoPlay = () => {
+    this.startStream("play");
+  };
+
+  videoPlaying = () => {
     if (this.buf.state !== "error") {
       this.setPlaybackState({ state: "normal" });
     }
   };
 
-  videoWaiting = (e: SyntheticEvent<HTMLVideoElement, Event>) => {
+  videoTimeUpdate = () => {};
+
+  videoWaiting = () => {
     if (this.buf.state !== "error") {
       this.setPlaybackState({ state: "waiting" });
     }
@@ -302,7 +330,7 @@ class LiveCameraDriver {
   camera: Camera;
   setPlaybackState: (state: PlaybackState) => void;
   setAspect: (aspect: [number, number]) => void;
-  videoRef: React.RefObject<HTMLVideoElement>;
+  video: HTMLVideoElement;
 
   src = new MediaSource();
   buf: BufferState = { state: "closed" };
@@ -321,7 +349,6 @@ class LiveCameraDriver {
  * Note there's a significant setup cost to creating a LiveCamera, so the parent
  * should use React's <tt>key</tt> attribute to avoid unnecessarily mounting
  * and unmounting a camera.
- *
  */
 const LiveCamera = ({ camera, chooser }: LiveCameraProps) => {
   const [aspect, setAspect] = React.useState<[number, number]>([16, 9]);
@@ -339,25 +366,15 @@ const LiveCamera = ({ camera, chooser }: LiveCameraProps) => {
   });
 
   // Load the camera driver.
-  const [driver, setDriver] = React.useState<LiveCameraDriver | null>(null);
   React.useEffect(() => {
     setPlaybackState({ state: "normal" });
-    if (camera === null) {
-      setDriver(null);
+    const video = videoRef.current;
+    if (camera === null || video === null) {
       return;
     }
-    const d = new LiveCameraDriver(
-      camera,
-      setPlaybackState,
-      setAspect,
-      videoRef
-    );
-    setDriver(d);
+    const d = new LiveCameraDriver(camera, setPlaybackState, setAspect, video);
     return () => {
-      // Explictly stop the stream on unmount. There don't seem to be any DOM
-      // event handlers that run in this case. (In particular, the MediaSource's
-      // sourceclose doesn't run.)
-      d.stopStream("unmount or camera change");
+      d.unmount();
     };
   }, [camera]);
 
@@ -372,22 +389,6 @@ const LiveCamera = ({ camera, chooser }: LiveCameraProps) => {
     return () => clearTimeout(timerId);
   }, [playbackState]);
 
-  const videoElement =
-    driver === null ? (
-      <video />
-    ) : (
-      <video
-        ref={videoRef}
-        muted
-        autoPlay
-        src={driver.url}
-        onPause={() => driver.stopStream("pause")}
-        onPlay={() => driver.startStream("play")}
-        onPlaying={driver.videoPlaying}
-        onTimeUpdate={driver.tryTrimBuffer}
-        onWaiting={driver.videoWaiting}
-      />
-    );
   return (
     <Box
       ref={boxRef}
@@ -446,7 +447,7 @@ const LiveCamera = ({ camera, chooser }: LiveCameraProps) => {
           <Alert severity="error">{playbackState.message}</Alert>
         </div>
       )}
-      {videoElement}
+      <video ref={videoRef} muted autoPlay />
     </Box>
   );
 };