fix live player

src/hooks/use-camera-activity.ts

@@ -58,8 +58,8 @@ export default function useCameraActivity(
   return {
     activeTracking: hasActiveObjects,
     activeMotion: detectingMotion == "ON",
-    activeAudio: camera.audio.enabled_in_config
+    activeAudio: camera.audio?.enabled_in_config ?
-      ? audioRms >= camera.audio.min_volume
+      audioRms >= camera.audio.min_volume
       : false,
   };
 }

src/index.tsx

@@ -31,9 +31,9 @@ export const Context = createContext<RootStore>(rootStore)
 root.render(
     <Context.Provider value={rootStore}>
       <AuthProvider {...keycloakConfig}>
-        <React.StrictMode>
+        {/* <React.StrictMode> */}
           <App />
-        </React.StrictMode>
+        {/* </React.StrictMode> */}
       </AuthProvider>
     </Context.Provider>
 );

src/pages/LiveCameraPage.tsx

@@ -0,0 +1,47 @@
+import React, { Fragment, useContext, useEffect } from 'react';
+import { Context } from '..';
+import { observer } from 'mobx-react-lite';
+import { useParams } from 'react-router-dom';
+import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
+import { useQuery } from '@tanstack/react-query';
+import CenterLoader from '../shared/components/CenterLoader';
+import RetryError from './RetryError';
+import Player from '../shared/components/frigate/Player';
+import { Flex } from '@mantine/core';
+import JSMpegPlayer from '../shared/components/frigate/JSMpegPlayer';
+
+const LiveCameraPage = observer(() => {
+    let { id: cameraId } = useParams<'id'>()
+    if (!cameraId) throw Error('Camera id does not exist')
+
+    const { data: camera, isPending, isError, refetch } = useQuery({
+        queryKey: [frigateQueryKeys.getCameraWHost, cameraId],
+        queryFn: () => frigateApi.getCameraWHost(cameraId!)
+    })
+
+    const { sideBarsStore } = useContext(Context)
+    useEffect(() => {
+        sideBarsStore.rightVisible = false
+        sideBarsStore.setLeftChildren(null)
+        sideBarsStore.setRightChildren(null)
+    }, [])
+
+
+    if (isPending) return <CenterLoader />
+
+    if (isError) return <RetryError onRetry={refetch} />
+
+    // const hostNameWPort = camera.frigateHost ? new URL(camera.frigateHost.host).host : ''
+    // const wsUrl = frigateApi.cameraWsURL(hostNameWPort, camera.name)
+
+    return (
+        <Flex w='100%' h='100%' justify='center'>
+            <Player camera={camera} />
+            {/* <JSMpegPlayer key={wsUrl} wsUrl={wsUrl}/> */}
+            {/* {JSON.stringify(camera)} */}
+            {/* {cameraWsURL} */}
+        </Flex>
+    );
+})
+
+export default LiveCameraPage;

src/pages/MainBody.tsx

@@ -1,25 +1,18 @@
-import { Container, Flex, Grid, Group, Skeleton, Text } from '@mantine/core';
+import { Flex, Grid, Group } from '@mantine/core';
-import ProductTable, { TableAdapter } from '../widgets/ProductTable';
 import HeadSearch from '../shared/components/HeadSearch';
 import ViewSelector, { SelectorViewState } from '../shared/components/ViewSelector';
 import { useContext, useState, useEffect } from 'react';
-import ProductGrid, { GridAdapter } from '../shared/components/grid.aps/ProductGrid';
 import { getCookie, setCookie } from 'cookies-next';
 import { Context } from '..';
 import { observer } from 'mobx-react-lite'
 import CenterLoader from '../shared/components/CenterLoader';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { frigateApi, frigateQueryKeys, mapHostToHostname } from '../services/frigate.proxy/frigate.api';
 import RetryError from './RetryError';
-import { CameraConfig, FrigateConfig } from '../types/frigateConfig';
+import { FrigateConfig } from '../types/frigateConfig';
 import { GetFrigateHostWConfig } from '../services/frigate.proxy/frigate.schema';
-import { host } from '../shared/env.const';
-import AutoUpdatingCameraImage from '../shared/components/frigate/AutoUpdatingCameraImage';
 import CameraCard from '../shared/components/CameraCard';
 
-
-
-
 const MainBody = observer(() => {
     const { sideBarsStore } = useContext(Context)
     useEffect(() => {
@@ -34,43 +27,21 @@ const MainBody = observer(() => {
         setTableState(state)
     }
 
-    const { data: hosts, isPending, isError, refetch } = useQuery({
+    const { data: cameras, isPending, isError, refetch } = useQuery({
-        queryKey: [frigateQueryKeys.getFrigateHostsConfigs],
+        queryKey: [frigateQueryKeys.getCamerasWHost],
-        queryFn: async () => {
+        queryFn: frigateApi.getCamerasWHost
-            const hosts = await frigateApi.getHosts()
-            let fetchedConfigs = []
-            for (const host of hosts) {
-                if (host.enabled) {
-                    const hostName = mapHostToHostname(host)
-                    const config: FrigateConfig = await frigateApi.getHostConfig(hostName)
-                    if (config) {
-                        const hostWConfig: GetFrigateHostWConfig = { config: config, ...host }
-                        fetchedConfigs.push(hostWConfig)
-                    }
-                }
-            }
-            return fetchedConfigs
-        }
     })
 
     if (isPending) return <CenterLoader />
 
     if (isError) return <RetryError onRetry={refetch} />
 
-
+    const cards = () => {
-    // const child = () => {
+        return cameras.map(camera => (
-    //    return ( <Skeleton mih='20rem' miw='20rem' radius="md" animate={false} /> )
-    // }
-
-    const cards = (host: GetFrigateHostWConfig) => {
-        return Object.entries(host.config.cameras).map(
-            ([cameraName, cameraConfig]) => (
             <CameraCard
-                    key={host.id + cameraName}
+                key={camera.id}
-                    cameraName={cameraName}
+                camera={camera}
-                    hostName={host.name}
+            />))
-                    cameraConfig={cameraConfig}
-                    imageUrl={frigateApi.cameraImageURL(mapHostToHostname(host), cameraName)} />))
     }
 
     return (
@@ -93,11 +64,10 @@ const MainBody = observer(() => {
                 </Group>
             </Flex>
             <Flex justify='center' h='100%' direction='column'>
-                {hosts.map(host => (
+                <Grid mt='sm' justify="center" mb='sm' align='stretch'>
-                    <Grid mt='sm' key={host.id} justify="center" mb='sm' align='stretch'>
+                    {cards()}
-                        {cards(host)}
                 </Grid>
-                ))}
+                ))
             </Flex>
         </Flex>
     );

src/router/routes.path.ts

@@ -9,7 +9,7 @@ export const routesPath = {
     HOST_SYSTEM_PATH: '/hosts/:id/system',
     HOST_STORAGE_PATH: '/hosts/:id/storage',
     ROLES_PATH: '/roles',
-    LIVE_PATH: '/live',
+    LIVE_PATH: '/cameras/:id/',
     THANKS_PATH: '/thanks',
     USER_DETAILED_PATH: '/user',
     RETRY_ERROR_PATH: '/retry_error',

src/router/routes.tsx

@@ -10,6 +10,7 @@ import FrigateHostsPage from "../pages/FrigateHostsPage";
 import HostConfigPage from "../pages/HostConfigPage";
 import HostSystemPage from "../pages/HostSystemPage";
 import HostStoragePage from "../pages/HostStoragePage";
+import LiveCameraPage from "../pages/LiveCameraPage";
 
 interface IRoute {
     path: string,
@@ -41,6 +42,10 @@ export const routes: IRoute[] = [
         path: routesPath.HOST_STORAGE_PATH,
         component: <HostStoragePage />,
     },
+    {
+        path: routesPath.LIVE_PATH,
+        component: <LiveCameraPage />,
+    },
     {
         path: routesPath.MAIN_PATH,
         component: <MainBody />,

src/services/frigate.proxy/frigate.api.ts

@@ -1,7 +1,7 @@
 import axios from "axios"
 import { proxyURL } from "../../shared/env.const"
 import { z } from "zod"
-import { GetConfig, DeleteFrigateHost, GetFrigateHost, PutConfig, PutFrigateHost, GetFrigateHostWithCameras } from "./frigate.schema";
+import { GetConfig, DeleteFrigateHost, GetFrigateHost, PutConfig, PutFrigateHost, GetFrigateHostWithCameras, GetCameraWHost, GetCameraWHostWConfig } from "./frigate.schema";
 import { FrigateConfig } from "../../types/frigateConfig";
 
 
@@ -19,9 +19,11 @@ export const frigateApi = {
     getHostWithCameras: () => instance.get<GetFrigateHostWithCameras[]>('apiv1/frigate-hosts', { params: { include: 'cameras'}}).then(res => {
         return res.data
     }),
-    getHost: (id: string) => instance.get<GetFrigateHost>(`apiv1/frigate-hosts/${id}`).then(res => {
+    getHost: (id: string) => instance.get<GetFrigateHostWithCameras>(`apiv1/frigate-hosts/${id}`).then(res => {
         return res.data
     }),
+    getCamerasWHost: () => instance.get<GetCameraWHostWConfig[]>(`apiv1/cameras`).then(res => {return res.data}),
+    getCameraWHost: (id: string) => instance.get<GetCameraWHostWConfig>(`apiv1/cameras/${id}`).then(res => {return res.data}),
     putHosts: (hosts: PutFrigateHost[]) => instance.put<GetFrigateHost[]>('apiv1/frigate-hosts', hosts).then(res => {
         return res.data
     }),
@@ -42,19 +44,18 @@ export const mapCamerasFromConfig = (config: FrigateConfig): string[] => {
     return Object.keys(config.cameras)
 }
 
-
-
 export const mapHostToHostname = (host: GetFrigateHost): string => {
     const url = new URL(host.host)
     const hostName = url.host
     return hostName
 }
 
-
 export const frigateQueryKeys = {
     getConfig: 'config',
     getFrigateHosts: 'frigate-hosts',
     getFrigateHostsConfigs: 'frigate-hosts-configs',
     getFrigateHost: 'frigate-host',
+    getCamerasWHost: 'cameras-frigate-host',
+    getCameraWHost: 'camera-frigate-host',
     getHostConfig: 'host-config',
 }

src/services/frigate.proxy/frigate.schema.ts

@@ -1,5 +1,5 @@
 import { any, z } from "zod";
-import { FrigateConfig } from "../../types/frigateConfig";
+import { CameraConfig, FrigateConfig } from "../../types/frigateConfig";
 
 export const putConfigSchema = z.object({
     key: z.string(),
@@ -41,6 +41,10 @@ const getCameraSchema = z.object({
     state: z.boolean().nullable(),
 });
 
+const getCameraWithHostSchema = getCameraSchema.merge(z.object({
+    frigateHost: getFrigateHostSchema.optional()
+}))
+
 export const getFrigateHostWithCamerasSchema = getFrigateHostSchema.merge(z.object({
     cameras: z.array(getCameraSchema),
 }))
@@ -59,5 +63,7 @@ export type PutConfig = z.infer<typeof putConfigSchema>
 export type GetFrigateHost = z.infer<typeof getFrigateHostSchema>
 export type GetFrigateHostWithCameras = z.infer<typeof getFrigateHostWithCamerasSchema>
 export type GetFrigateHostWConfig = GetFrigateHost & { config: FrigateConfig}
+export type GetCameraWHost = z.infer<typeof getCameraWithHostSchema>
+export type GetCameraWHostWConfig = GetCameraWHost & { config?: CameraConfig }
 export type PutFrigateHost = z.infer<typeof putFrigateHostSchema>
 export type DeleteFrigateHost = z.infer<typeof deleteFrigateHostSchema>

src/shared/components/CameraCard.tsx

@@ -2,13 +2,10 @@ import React from 'react';
 import { CameraConfig } from '../../types/frigateConfig';
 import { AspectRatio, Button, Card, Flex, Grid, Group, Space, Text, createStyles, useMantineTheme } from '@mantine/core';
 import AutoUpdatingCameraImage from './frigate/AutoUpdatingCameraImage';
-
+import { useNavigate } from 'react-router-dom';
-interface CameraCardProps {
+import { routesPath } from '../../router/routes.path';
-    cameraName: string,
+import { GetCameraWHostWConfig, GetFrigateHost } from '../../services/frigate.proxy/frigate.schema';
-    hostName: string,
+import { frigateApi, mapHostToHostname } from '../../services/frigate.proxy/frigate.api';
-    cameraConfig: CameraConfig,
-    imageUrl: string
-}
 
 
 const useStyles = createStyles((theme) => ({
@@ -30,17 +27,21 @@ const useStyles = createStyles((theme) => ({
     }
 }))
 
+interface CameraCardProps {
+    camera: GetCameraWHostWConfig
+}
 
 const CameraCard = ({
-    cameraName,
+    camera
-    hostName,
-    cameraConfig,
-    imageUrl,
 }: CameraCardProps) => {
     const { classes } = useStyles();
+    const navigate = useNavigate()
+    const imageUrl = camera.frigateHost ? frigateApi.cameraImageURL(mapHostToHostname(camera.frigateHost), camera.name) : '' //todo implement get URL from live cameras
+
 
     const handleOpenLiveView = () => {
-        throw Error('Not yet implemented')
+        const url = routesPath.LIVE_PATH.replace(':id', camera.id)
+        navigate(url)
     }
     const handleOpenRecordings = () => {
         throw Error('Not yet implemented')
@@ -52,10 +53,10 @@ const CameraCard = ({
         <Grid.Col md={6} lg={3} p='0.2rem'>
             <Card h='100%' radius="lg" padding='0.5rem' className={classes.mainCard}>
                 {/* <Card maw='25rem' mah='25rem' mih='15rem' miw='15rem'> */}
-                <Text align='center' size='md' className={classes.headText} >{cameraName} / {hostName}</Text>
+                <Text align='center' size='md' className={classes.headText} >{camera.name} / {camera.frigateHost?.name}</Text>
                 <AutoUpdatingCameraImage
                     onClick={handleOpenLiveView}
-                    cameraConfig={cameraConfig}
+                    cameraConfig={camera.config}
                     url={imageUrl}
                     showFps={false}
                 />

src/shared/components/frigate/AutoUpdatingCameraImage.tsx

@@ -5,7 +5,7 @@ import { useDocumentVisibility } from "@mantine/hooks";
 import { AspectRatio, Flex } from "@mantine/core";
 
 interface AutoUpdatingCameraImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-  cameraConfig: CameraConfig
+  cameraConfig?: CameraConfig
   searchParams?: {};
   showFps?: boolean;
   className?: string;
@@ -85,7 +85,7 @@ export default function AutoUpdatingCameraImage({
       <CameraImage
         cameraConfig={cameraConfig}
         onload={handleLoad}
-        searchParams={`cache=${key}&${searchParams}`}
+        enabled={cameraConfig?.enabled}
         url={url}
         {...rest}
       />

src/shared/components/frigate/CameraImage.tsx

@@ -4,10 +4,10 @@ import { AspectRatio, Flex, createStyles, Text } from "@mantine/core";
 
 interface CameraImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   className?: string;
-  cameraConfig: CameraConfig;
+  cameraConfig?: CameraConfig;
   onload?: () => void;
-  searchParams?: {};
+  url: string,
-  url: string
+  enabled?: boolean
 };
 
 const useStyles = createStyles((theme) => ({
@@ -19,20 +19,18 @@ export default function CameraImage({
   className,
   cameraConfig,
   onload,
-  searchParams = "",
+  enabled,
   url, ...rest }: CameraImageProps) {
   const imgRef = useRef<HTMLImageElement | null>(null);
   const { classes } = useStyles();
 
-  const name = cameraConfig.name
-  const enabled = cameraConfig.enabled
 
   useEffect(() => {
     if (!cameraConfig || !imgRef.current) {
       return;
     }
     imgRef.current.src = url
-  }, [name, imgRef, searchParams]);
+  }, [imgRef]);
 
   return (
     <Flex direction='column' justify='center' h='100%'>

src/shared/components/frigate/JSMpegPlayer.tsx

@@ -1,100 +1,53 @@
 // @ts-ignore we know this doesn't have types
 import JSMpeg from "@cycjimmy/jsmpeg-player";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
-import { useResizeObserver } from "../../utils/resize-observer";
 
 type JSMpegPlayerProps = {
-  className?: string;
   wsUrl: string;
-  camera: string;
-  width: number;
-  height: number;
 };
 
-export default function JSMpegPlayer({
+
-  camera,
+const JSMpegPlayer = (
+  {
     wsUrl,
-  width,
-  height,
-  className,
-}: JSMpegPlayerProps) {
-  const playerRef = useRef<HTMLDivElement | null>(null);
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const [{ width: containerWidth, height: containerHeight }] =
-    useResizeObserver(containerRef);
 
-  // Add scrollbar width (when visible) to the available observer width to eliminate screen juddering.
+  }: JSMpegPlayerProps
-  // https://github.com/blakeblackshear/frigate/issues/1657
+) => {
-  let scrollBarWidth = 0;
+  const videoRef = useRef<HTMLCanvasElement>(null);
-  if (window.innerWidth && document.body.offsetWidth) {
+  const [playerInitialized, setPlayerInitialized] = useState(false)
-    scrollBarWidth = window.innerWidth - document.body.offsetWidth;
-  }
-  const availableWidth = scrollBarWidth
-    ? containerWidth + scrollBarWidth
-    : containerWidth;
-  const aspectRatio = width / height;
-
-  const scaledHeight = useMemo(() => {
-    const scaledHeight = Math.floor(availableWidth / aspectRatio);
-    const finalHeight = Math.min(scaledHeight, height);
-
-    if (containerHeight < finalHeight) {
-      return containerHeight;
-    }
-
-    if (finalHeight > 0) {
-      return finalHeight;
-    }
-
-    return 100;
-  }, [availableWidth, aspectRatio, height]);
-  const scaledWidth = useMemo(
-    () => Math.ceil(scaledHeight * aspectRatio - scrollBarWidth),
-    [scaledHeight, aspectRatio, scrollBarWidth]
-  );
 
   useEffect(() => {
-    if (!playerRef.current) {
+    let player: any;
-      return;
-    }
 
-    const video = new JSMpeg.VideoElement(
+    if (player && playerInitialized) {
-      playerRef.current,
+      player.destroy()
+      console.log('JSMpegPlayer destroyed player')
+    }
+    if (!playerInitialized && videoRef.current) {
+      console.log('JSMpegPlayer creating player')
+      player = new JSMpeg.Player(
         wsUrl,
+        { canvas: videoRef.current },
         {},
-      { protocols: [], audio: false, videoBufferSize: 1024 * 1024 * 4 }
+        { protocols: [], audio: false }
       );
-
+      setPlayerInitialized(true);
-    const fullscreen = () => {
-      if (video.els.canvas.webkitRequestFullScreen) {
-        video.els.canvas.webkitRequestFullScreen();
-      } else {
-        video.els.canvas.mozRequestFullScreen();
     }
-    };
-
-    video.els.canvas.addEventListener("click", fullscreen);
 
     return () => {
-      if (playerRef.current) {
       try {
-          video.destroy();
+        console.log('JSMpegPlayer destroying player')
-        } catch (e) {}
+        player.destroy()
-        playerRef.current = null;
+        console.log('JSMpegPlayer destroyed player')
+        setPlayerInitialized(false)
+      } catch (error) {
+        setPlayerInitialized(true)
+        console.error('JSMpegPlayer Error on unmount:', error);
       }
     };
   }, [wsUrl]);
 
-  return (
+  return <canvas key={wsUrl} ref={videoRef}></canvas>;
-    <div className={className} ref={containerRef}>
+};
-      <div
+
-        ref={playerRef}
+export default JSMpegPlayer
-        className={`jsmpeg`}
-        style={{
-          height: `${600}px`,
-          width: `${800}px`,
-        }}
-      />
-    </div>
-  );
-}

src/shared/components/frigate/Player.tsx

@@ -6,26 +6,26 @@ import { LivePlayerMode } from '../../../types/live';
 import useCameraActivity from '../../../hooks/use-camera-activity';
 import useCameraLiveMode from '../../../hooks/use-camera-live-mode';
 import WebRtcPlayer from './WebRTCPlayer';
+import { Flex } from '@mantine/core';
+import { frigateApi } from '../../../services/frigate.proxy/frigate.api';
+import { GetCameraWHostWConfig } from '../../../services/frigate.proxy/frigate.schema';
 
 type LivePlayerProps = {
-  className?: string;
+  camera: GetCameraWHostWConfig;
-  cameraConfig: CameraConfig;
   preferredLiveMode?: LivePlayerMode;
   showStillWithoutActivity?: boolean;
   windowVisible?: boolean;
-  host: string
 };
 
 const Player = ({
-  className,
+  camera,
-  cameraConfig,
   preferredLiveMode,
-  showStillWithoutActivity = true,
   windowVisible = true,
-  host
 }: LivePlayerProps) => {
 
-  const wsUrl = 'ws://localhost:4000/proxy-ws/ws?hostName=localhost:5000'
+  const hostNameWPort = camera.frigateHost ? new URL(camera.frigateHost.host).host : ''
+  const wsUrl = frigateApi.cameraWsURL(hostNameWPort, camera.name)
+  const cameraConfig = camera.config!
   
   const { activeMotion, activeAudio, activeTracking } =
     useCameraActivity(cameraConfig);
@@ -53,6 +53,7 @@ const Player = ({
     }
   }, [cameraActive, liveReady]);
 
+  console.log(`liveMode: `, liveMode)
   let player;
   if (liveMode == "webrtc") {
     player = (
@@ -86,20 +87,16 @@ const Player = ({
   } else if (liveMode == "jsmpeg") {
     player = (
       <JSMpegPlayer
-        className="w-full flex justify-center rounded-2xl overflow-hidden"
+        wsUrl={wsUrl}
-        camera='Not yet implemented'
-        width={600}
-        height={800}
-        wsUrl='Not yet implemented'
       />
     );
+  }
 
   return (
-      <div>
+    <Flex w='100%' h='100%' justify='center'>
-
+      {player}
-      </div>
+      </Flex>
   );
 }
-}
 
 export default Player;

src/shared/components/menu/HostSettingsMenu.tsx

@@ -25,6 +25,7 @@ const HostSettingsMenu = ({ id }: HostSettingsMenuProps) => {
     }
 
     const handleRestart = () => {
+        throw Error('Not yet implemented')
     }
     return (
         <Menu shadow="md" width={200}>

src/types/frigateConfig.ts

@@ -22,7 +22,7 @@ export interface BirdseyeConfig {
 export interface CameraConfig {
   audio: {
     enabled: boolean;
-    enabled_in_config: boolean;
+    enabled_in_config?: boolean | null;
     filters: string[] | null;
     listen: string[];
     max_not_heard: number;