From f9e1ad253f8aeab8666af992875999cc590c7670 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 30 Jun 2024 07:04:45 -0500
Subject: [PATCH] Check websocket readyState for disconnect and fix firefox pip
(#12216)
---
web/src/components/player/MsePlayer.tsx | 6 ++--
web/src/views/live/LiveCameraView.tsx | 43 ++++++++++++++----------
web/src/views/live/LiveDashboardView.tsx | 29 +++++++++-------
3 files changed, 46 insertions(+), 32 deletions(-)
diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 8a371fed7..c2769cd94 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -128,12 +128,12 @@ function MSEPlayer({
setSafariPlaying(false);
}
- if (wsRef.current && wsState != WebSocket.CLOSED) {
+ if (wsRef.current) {
setWsState(WebSocket.CLOSED);
wsRef.current.close();
wsRef.current = null;
}
- }, [wsState, bufferTimeout, safariPlaying]);
+ }, [bufferTimeout, safariPlaying]);
const onOpen = () => {
setWsState(WebSocket.OPEN);
@@ -359,7 +359,7 @@ function MSEPlayer({
// ensure we disconnect for slower connections
useEffect(() => {
- if (wsState === WebSocket.OPEN && !playbackEnabled) {
+ if (wsRef.current?.readyState === WebSocket.OPEN && !playbackEnabled) {
if (bufferTimeout) {
clearTimeout(bufferTimeout);
setBufferTimeout(undefined);
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index f75a7186a..fdb2446e9 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -21,7 +21,11 @@ import { TooltipProvider } from "@/components/ui/tooltip";
import { useResizeObserver } from "@/hooks/resize-observer";
import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
-import { LiveStreamMetadata, VideoResolutionType } from "@/types/live";
+import {
+ LivePlayerError,
+ LiveStreamMetadata,
+ VideoResolutionType,
+} from "@/types/live";
import { CameraPtzInfo } from "@/types/ptz";
import { RecordingStartingPoint } from "@/types/record";
import React, {
@@ -33,6 +37,7 @@ import React, {
} from "react";
import {
isDesktop,
+ isFirefox,
isIOS,
isMobile,
isTablet,
@@ -275,6 +280,15 @@ export default function LiveCameraView({
}
}, [fullscreen, isPortrait, cameraAspectRatio, containerAspectRatio]);
+ const handleError = useCallback((e: LivePlayerError) => {
+ if (e == "mse-decode") {
+ setWebRTC(true);
+ } else {
+ setWebRTC(false);
+ setLowBandwidth(true);
+ }
+ }, []);
+
return (