add support for webrtc stream

package.json

@@ -97,7 +97,8 @@
     "rehype-raw": "^6.1.1",
     "rescript-webapi": "^0.8.0",
     "use-keyboard-shortcut": "^1.1.6",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "webrtc-adapter": "^8.2.3"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.0.26",

public/config.json

@@ -22,5 +22,8 @@
     "kasp_full_string": "Karunya Arogya Suraksha Padhathi",
     "sample_format_asset_import": "https://spreadsheets.google.com/feeds/download/spreadsheets/Export?key=11JaEhNHdyCHth4YQs_44YaRlP77Rrqe81VSEfg1glko&exportFormat=xlsx",
     "sample_format_external_result_import": "https://docs.google.com/spreadsheets/d/17VfgryA6OYSYgtQZeXU9mp7kNvLySeEawvnLBO_1nuE/export?format=csv&id=17VfgryA6OYSYgtQZeXU9mp7kNvLySeEawvnLBO_1nuE",
+    "enable_abdm": true,
+    "jwt_token_refresh_interval": 300000,
+    "use_webrtc": true
     "enable_abdm": true
 }

src/Common/hooks/useConfig.ts

@@ -69,6 +69,10 @@ export interface IConfig {
    */
   wartime_shifting: boolean;
   jwt_token_refresh_interval?: number;
+  /**
+   * Env to use webrtc for media streaming
+   */
+  use_webrtc?: boolean;
 }
 
 const useConfig = () => {

src/Common/hooks/useHLSPlayer.ts

@@ -12,6 +12,6 @@ export const useHLSPLayer = (ref: ReactPlayer | null) => {
   };
   return {
     startStream,
-    stopStream: undefined,
+    stopStream: () => {},
   };
 };

src/Common/hooks/useMSEplayer.ts

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from "react";
-import axios from "axios";
 
 export interface IAsset {
   middlewareHostname: string;
+  accessKey: string;
 }
 
 interface PTZPayload {
@@ -30,8 +30,8 @@ export enum StreamStatus {
 }
 
 interface UseMSEMediaPlayerReturnType {
-  stopStream: (config: { id: string }, options: IOptions) => void;
   startStream: (options?: IOptions) => void;
+  stopStream: () => void;
 }
 
 export interface IOptions {
@@ -48,25 +48,6 @@ enum PTZ {
   ZoomOut = "zoomOut",
 }
 
-const stopStream =
-  ({
-    middlewareHostname,
-    ws,
-  }: {
-    middlewareHostname: string;
-    ws?: WebSocket;
-  }) =>
-  (payload: { id: string }, options: IOptions) => {
-    const { id } = payload;
-    ws?.close();
-    axios
-      .post(`https://${middlewareHostname}/stop`, {
-        id,
-      })
-      .then((res) => options?.onSuccess && options.onSuccess(res))
-      .catch((err) => options.onError && options.onError(err));
-  };
-
 export const getPTZPayload = (action: PTZ): PTZPayload => {
   let x = 0;
   let y = 0;
@@ -244,14 +225,19 @@ export const useMSEMediaPlayer = ({
     }
   });
 
+  const stopStream = () => {
+    wsRef.current?.close();
+    fetch(`https://${config.middlewareHostname}/stop`, {
+      method: "POST",
+      body: JSON.stringify({ id: config.accessKey }),
+    });
+  };
+
   useEffect(() => {
     return () => {
       wsRef.current?.close();
     };
   }, []);
 
-  return {
-    startStream: startStream,
-    stopStream: stopStream({ ...config, ws: wsRef.current }),
-  };
+  return { startStream, stopStream };
 };