more fixes

ohcnetwork · Aug 29, 2024 · a8e782e · a8e782e
1 parent 7e4e7a9
commit a8e782e
Show file tree

Hide file tree

Showing 10 changed files with 161 additions and 89 deletions.
diff --git a/src/Components/Assets/AssetType/ONVIFCamera.tsx b/src/Components/Assets/AssetType/ONVIFCamera.tsx
@@ -16,6 +16,7 @@ import routes from "../../../Redux/api";
 import useQuery from "../../../Utils/request/useQuery";
 
 import CareIcon from "../../../CAREUI/icons/CareIcon";
+import useOperateCamera from "../../CameraFeed/useOperateCamera";
 
 interface Props {
   assetId: string;
@@ -47,6 +48,8 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
   });
   const authUser = useAuthUser();
 
+  const { operate } = useOperateCamera(assetId ?? "", true);
+
   useEffect(() => {
     if (asset) {
       setAssetType(asset?.asset_class);
@@ -92,21 +95,14 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
 
   const addPreset = async (e: SyntheticEvent) => {
     e.preventDefault();
-    const config = getCameraConfig(asset as AssetData);
     const data = {
       bed_id: bed.id,
       preset_name: newPreset,
     };
     try {
       setLoadingAddPreset(true);
 
-      const response = await fetch(
-        `https://${resolvedMiddleware?.hostname}/status?hostname=${config.hostname}&port=${config.port}&username=${config.username}&password=${config.password}`,
-      );
-      if (!response.ok) {
-        throw new Error("Network error");
-      }
-      const presetData = await response.json();
+      const { data: presetData } = await operate({ type: "get_status" });
 
       const { res } = await request(routes.createAssetBed, {
         body: {

diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx
@@ -35,7 +35,7 @@ export default function CameraFeed(props: Props) {
   const streamUrl = getStreamUrl(props.asset);
   const inlineControls = useBreakpoints({ default: false, sm: true });
 
-  const player = usePlayer(streamUrl, playerRef);
+  const player = usePlayer(playerRef);
 
   const [isFullscreen, setFullscreen] = useFullscreen();
   const [state, setState] = useState<FeedAlertState>();
@@ -72,8 +72,27 @@ export default function CameraFeed(props: Props) {
     getPresets(props.onCameraPresetsObtained);
   }, [props.operate, props.onCameraPresetsObtained]);
 
-  const initializeStream = useCallback(() => {
+  const initializeStream = useCallback(async () => {
+    if (!playerRef.current) return;
+
+    const _streamUrl = await props
+      .operate({ type: "get_stream_token" })
+      .then(({ res, data }) => {
+        if (res?.status != 200) {
+          setState("authentication_error");
+          return props.onStreamError?.();
+        }
+        const result = data?.result as { token: string };
+        return getStreamUrl(props.asset, result.token);
+      })
+      .catch(() => {
+        setState("host_unreachable");
+        return props.onStreamError?.();
+      });
+
+    if (!_streamUrl) return;
     player.initializeStream({
+      url: _streamUrl,
       onSuccess: async () => {
         props.onStreamSuccess?.();
         const { res } = await props.operate({ type: "get_status" });
@@ -83,10 +102,12 @@ export default function CameraFeed(props: Props) {
       },
       onError: props.onStreamError,
     });
-  }, [player.initializeStream]);
+  }, [playerRef.current]);
 
   // Start stream on mount
-  useEffect(() => initializeStream(), [initializeStream]);
+  useEffect(() => {
+    initializeStream();
+  }, [initializeStream]);
 
   const resetStream = () => {
     setState("loading");
@@ -202,26 +223,43 @@ export default function CameraFeed(props: Props) {
           {player.status === "playing" && <FeedWatermark />}
 
           {/* No Feed informations */}
-          {state === "host_unreachable" && (
-            <NoFeedAvailable
-              message="Host Unreachable"
-              className="text-warning-500"
-              icon="l-exclamation-triangle"
-              streamUrl={streamUrl}
-              asset={props.asset}
-              onResetClick={resetStream}
-            />
-          )}
-          {player.status === "offline" && (
-            <NoFeedAvailable
-              message="Offline"
-              className="text-secondary-500"
-              icon="l-exclamation-triangle"
-              streamUrl={streamUrl}
-              asset={props.asset}
-              onResetClick={resetStream}
-            />
-          )}
+          {(() => {
+            switch (state) {
+              case "host_unreachable":
+                return (
+                  <NoFeedAvailable
+                    message="Host Unreachable"
+                    className="text-warning-500"
+                    icon="l-exclamation-triangle"
+                    streamUrl={streamUrl}
+                    asset={props.asset}
+                    onResetClick={resetStream}
+                  />
+                );
+              case "authentication_error":
+                return (
+                  <NoFeedAvailable
+                    message="Authentication Error"
+                    className="text-warning-500"
+                    icon="l-exclamation-triangle"
+                    streamUrl={streamUrl}
+                    asset={props.asset}
+                    onResetClick={resetStream}
+                  />
+                );
+              case "offline":
+                return (
+                  <NoFeedAvailable
+                    message="Offline"
+                    className="text-secondary-500"
+                    icon="l-exclamation-triangle"
+                    streamUrl={streamUrl}
+                    asset={props.asset}
+                    onResetClick={resetStream}
+                  />
+                );
+            }
+          })()}
 
           {/* Video Player */}
           <video

diff --git a/src/Components/CameraFeed/CameraFeedOld.tsx b/src/Components/CameraFeed/CameraFeedOld.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef, useCallback } from "react";
 import { useDispatch } from "react-redux";
 import useKeyboardShortcut from "use-keyboard-shortcut";
 import {
@@ -106,14 +106,11 @@ const CameraFeedOld = (props: any) => {
 
   const videoEl = liveFeedPlayerRef.current as HTMLVideoElement;
 
-  const streamUrl = `wss://${middlewareHostname}/stream/${cameraAsset?.accessKey}/channel/0/mse?uuid=${cameraAsset?.accessKey}&channel=0`;
-
   const { startStream } = useMSEMediaPlayer({
     config: {
       middlewareHostname,
       ...cameraAsset,
     },
-    url: streamUrl,
     videoEl,
   });
 
@@ -124,6 +121,7 @@ const CameraFeedOld = (props: any) => {
   const {
     absoluteMove,
     getCameraStatus,
+    getStreamToken,
     getPTZPayload,
     getPresets,
     gotoPreset,
@@ -243,12 +241,25 @@ const CameraFeedOld = (props: any) => {
     }
   }, [page.offset, cameraAsset.id, refreshPresetsHash]);
 
-  const startStreamFeed = () => {
+  const startStreamFeed = useCallback(async () => {
+    if (!liveFeedPlayerRef.current) return;
+
+    let _streamUrl = "";
+    await getStreamToken({
+      onSuccess: (data) => {
+        _streamUrl = `wss://${middlewareHostname}/stream/${cameraAsset?.accessKey}/channel/0/mse?uuid=${cameraAsset?.accessKey}&channel=0&token=${data.token}`;
+      },
+      onError: () => {
+        setStreamStatus(StreamStatus.Offline);
+      },
+    });
+    if (!_streamUrl) return;
     startStream({
+      url: _streamUrl,
       onSuccess: () => setStreamStatus(StreamStatus.Playing),
       onError: () => setStreamStatus(StreamStatus.Offline),
     });
-  };
+  }, [liveFeedPlayerRef.current]);
 
   const viewOptions = (page: number) => {
     return presets
@@ -272,7 +283,7 @@ const CameraFeedOld = (props: any) => {
     return () => {
       clearTimeout(tId);
     };
-  }, [startStream, streamStatus]);
+  }, [startStreamFeed, streamStatus]);
 
   const handlePagination = (cOffset: number) => {
     setPage({
@@ -287,13 +298,10 @@ const CameraFeedOld = (props: any) => {
         precision === 16 ? 1 : precision * 2,
       );
     },
-    reset: () => {
+    reset: async () => {
       setStreamStatus(StreamStatus.Loading);
       setVideoStartTime(null);
-      startStream({
-        onSuccess: () => setStreamStatus(StreamStatus.Playing),
-        onError: () => setStreamStatus(StreamStatus.Offline),
-      });
+      await startStreamFeed();
     },
     fullScreen: () => {
       if (!liveFeedPlayerRef.current) return;

diff --git a/src/Components/CameraFeed/FeedAlert.tsx b/src/Components/CameraFeed/FeedAlert.tsx
@@ -9,7 +9,8 @@ export type FeedAlertState =
   | "moving"
   | "zooming"
   | "saving_preset"
-  | "host_unreachable";
+  | "host_unreachable"
+  | "authentication_error";
 
 interface Props {
   state?: FeedAlertState;
@@ -24,6 +25,7 @@ const ALERT_ICON_MAP: Partial<Record<FeedAlertState, IconName>> = {
   zooming: "l-search",
   saving_preset: "l-save",
   host_unreachable: "l-exclamation-triangle",
+  authentication_error: "l-exclamation-triangle",
 };
 
 export default function FeedAlert({ state }: Props) {

diff --git a/src/Components/CameraFeed/routes.ts b/src/Components/CameraFeed/routes.ts
@@ -13,6 +13,12 @@ export type GetStatusResponse = {
   };
 };
 
+export type GetStreamTokenResponse = {
+  result: {
+    token: string;
+  };
+};
+
 export type GetPresetsResponse = {
   result: Record<string, number>;
 };
@@ -21,7 +27,9 @@ export const FeedRoutes = {
   operateAsset: {
     path: "/api/v1/asset/{id}/operate_assets/",
     method: "POST",
-    TRes: Type<GetStatusResponse | GetPresetsResponse>(),
+    TRes: Type<
+      GetStreamTokenResponse | GetStatusResponse | GetPresetsResponse
+    >(),
     TBody: Type<{ action: OperationAction }>(),
   },
 } as const;
diff --git a/src/Components/CameraFeed/useFeedPTZ.ts b/src/Components/CameraFeed/useFeedPTZ.ts
@@ -53,6 +53,7 @@ interface UseMSEMediaPlayerReturnType {
     value?: number,
   ) => PTZPayload;
   getCameraStatus: (options: IOptions) => void;
+  getStreamToken: (options: IOptions) => void;
   getPresets: (options: IOptions) => void;
   gotoPreset: (payload: IGotoPresetPayload, options: IOptions) => void;
 }
@@ -88,6 +89,23 @@ const getCameraStatus =
         : options?.onError && options.onError(resp));
   };
 
+const getStreamToken =
+  (config: IAsset, dispatch: any) =>
+  async (options: IOptions = {}) => {
+    if (!config.id) return;
+    const resp = await dispatch(
+      operateAsset(config.id, {
+        action: {
+          type: "get_stream_token",
+        },
+      }),
+    );
+    resp &&
+      (resp.status === 200
+        ? options?.onSuccess && options.onSuccess(resp.data.result)
+        : options?.onError && options.onError(resp));
+  };
+
 const getPresets =
   (config: IAsset, dispatch: any) =>
   async (options: IOptions = {}) => {
@@ -205,6 +223,7 @@ export const useFeedPTZ = ({
     relativeMove: relativeMove(config, dispatch),
     getPTZPayload,
     getCameraStatus: getCameraStatus(config, dispatch),
+    getStreamToken: getStreamToken(config, dispatch),
     getPresets: getPresets(config, dispatch),
     gotoPreset: gotoPreset(config, dispatch),
   };