Merge branch 'perf/env-var-parse' into 'main_dev'

perf: 优化环境变量解析&&新增变量控制GBT设备播放协议

See merge request yunteng/thingskit-view!259

@@ -12,3 +12,7 @@ VITE_GLOB_CONTENT_SECURITY_POLICY = false
 
 # 公共路径
 VITE_GLOB_PUBLIC_PATH = /large-designer/
+
+# Streaming media content security protocol
+VITE_GLOB_STREAM_MEDIA_CONTENT_SECURITY_PROTOCOL = false
+

@@ -11,3 +11,6 @@ VITE_GLOB_CONTENT_SECURITY_POLICY = false
 
 # 公共路径
 VITE_GLOB_PUBLIC_PATH = /large-designer/
+
+# Streaming media content security protocol
+VITE_GLOB_STREAM_MEDIA_CONTENT_SECURITY_PROTOCOL = false

@@ -4,6 +4,31 @@ import { Plugin } from "vite";
 import { GLOB_CONFIG_FILE_NAME } from "./const";
 import { getGlobalConfigName } from "./getGlobConfigName";
 
+
+const stringToJSONParse = (string: string) => {
+  try {
+    return JSON.parse(string);
+  } catch (error) {
+    return string;
+  }
+};
+
+export function parseEnv(env: Record<string, string>) {
+  const res: Record<string, string> = {};
+
+  Object.keys(env).forEach((key) => {
+    try {
+      const value = env[key];
+      res[key] = stringToJSONParse(value);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.log(`env variable ${key} can't serialization!`);
+    }
+  });
+
+  return res;
+}
+
 export function GenerateBuildConfig(viteEnv: Record<string, any>) {
   return {
     name: 'vite-plugin-generate-global-config',
@@ -15,7 +40,7 @@ export function GenerateBuildConfig(viteEnv: Record<string, any>) {
         try {
           const windowConf = `window.${configName}`;
           // Ensure that the variable will not be modified 
-          const configStr = `${windowConf}=${JSON.stringify(config)};
+          const configStr = `${windowConf}=${JSON.stringify(parseEnv(config))};
             Object.freeze(${windowConf});
             Object.defineProperty(window, "${configName}", {
               configurable: false,

@@ -10,7 +10,8 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     VITE_GLOB_UPLOAD_URL,
     VITE_GLOB_WEB_SOCKET,
     VITE_GLOB_CONTENT_SECURITY_POLICY,
-    VITE_GLOB_PUBLIC_PATH
+    VITE_GLOB_PUBLIC_PATH,
+    VITE_GLOB_STREAM_MEDIA_CONTENT_SECURITY_PROTOCOL
   } = getAppEnvConfig();
 
   if (!/[a-zA-Z_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
@@ -28,7 +29,8 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     uploadUrl: VITE_GLOB_UPLOAD_URL,
     socketUrl: VITE_GLOB_WEB_SOCKET,
     securityPolicy: VITE_GLOB_CONTENT_SECURITY_POLICY,
-    publicPath: VITE_GLOB_PUBLIC_PATH
+    publicPath: VITE_GLOB_PUBLIC_PATH,
+    streamMediaContentSecurityProtocol: VITE_GLOB_STREAM_MEDIA_CONTENT_SECURITY_PROTOCOL
   };
 
   return glob as Readonly<GlobConfig>;

@@ -6,8 +6,7 @@ let initialFlag = false;
 export function useWebSecurityPolicy() {
   if (window && window.document && window.document.documentElement) {
     const { securityPolicy } = useGlobSetting();
-    const flag = isBoolean(securityPolicy) ? securityPolicy : securityPolicy === 'true'  
-    if (flag && !initialFlag) {
+    if (securityPolicy && !initialFlag) {
       const meta = document.createElement('meta');
       meta.setAttribute('http-equiv', 'Content-Security-Policy');
       meta.setAttribute('content', 'upgrade-insecure-requests');

@@ -2,11 +2,12 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { SingleCameraConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
-import {StreamType} from "@/components/Video/src/types";
-import {useFingerprint} from "@/utils/external/useFingerprint";
-import {getOpenFlvPlayUrl, getVideoControlStart} from "@/api/external/flvPlay";
-import {getVideoUrl} from "@/api/external/common";
-import {CameraRecord} from "@/api/external/common/model";
+import { StreamType } from "@/components/Video/src/types";
+import { useFingerprint } from "@/utils/external/useFingerprint";
+import { getOpenFlvPlayUrl, getVideoControlStart } from "@/api/external/flvPlay";
+import { getVideoUrl } from "@/api/external/common";
+import { CameraRecord } from "@/api/external/common/model";
+import { useGlobSetting } from '@/hooks/external/setting';
 
 export enum sourceTypeEnum {
   CUSTOM = 'custom',
@@ -89,7 +90,7 @@ export const isRtspProtocol = (url: string) => {
 };
 
 export async function getPlayUrl(
-    params: CameraRecord
+  params: CameraRecord
 ): Promise<{ url: string; type: StreamType } | undefined> {
   const { accessMode } = params;
   if (accessMode === AccessMode.ManuallyEnter) {
@@ -106,18 +107,20 @@ export async function getPlayUrl(
       }
     }
   } else if (accessMode === AccessMode.GBT28181) {
+    const { streamMediaContentSecurityProtocol } = useGlobSetting()
+    console.log(useGlobSetting())
     const { deviceId, channelNo } = params?.params || {};
     const result = await getVideoControlStart({ channelId: channelNo!, deviceId: deviceId! });
-    return { url: result.data.flv, type: 'flv' };
+    return { url: streamMediaContentSecurityProtocol ? result.data.https_flv : result.data.flv, type: 'flv' };
   } else {
     const { id, playProtocol } = params;
     const result = await getVideoUrl(id);
     const type: StreamType =
-        playProtocol === FluoriteMideaProtocolEnum.FLV
-            ? 'flv'
-            : playProtocol === FluoriteMideaProtocolEnum.HLS
-                ? 'hls'
-                : 'auto';
+      playProtocol === FluoriteMideaProtocolEnum.FLV
+        ? 'flv'
+        : playProtocol === FluoriteMideaProtocolEnum.HLS
+          ? 'hls'
+          : 'auto';
     return { url: result.data.url, type };
   }
 }

@@ -4,6 +4,30 @@ import type { GlobEnvConfig } from '/#/external/config';
 import { getGlobalConfigName } from '../../../../build/external/vite/plugins/globConfig/getGlobConfigName';
 import { ProjectRuntimeEnvEnum } from '@/enums/external/envEnum';
 
+const stringToJSONParse = (string: string) => {
+  try {
+    return JSON.parse(string);
+  } catch (error) {
+    return string;
+  }
+};
+
+export function parseEnv(env: Record<string, string>) {
+  const res: Record<string, string> = {};
+
+  Object.keys(env).forEach((key) => {
+    try {
+      const value = env[key];
+      res[key] = stringToJSONParse(value);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.log(`env variable ${key} can't serialization!`);
+    }
+  });
+
+  return res;
+}
+
 
 export function getCommonStoragePrefix() {
   // const { VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig();
@@ -23,7 +47,7 @@ export function getAppEnvConfig() {
 
   const ENV = (import.meta.env.DEV
     ? // Get the global configuration (the configuration will be extracted independently when packaging)
-    (import.meta.env as unknown as GlobEnvConfig)
+    (parseEnv(import.meta.env) as unknown as GlobEnvConfig)
     : window[ENV_NAME as any]) as unknown as GlobEnvConfig;
 
   const {
@@ -35,7 +59,8 @@ export function getAppEnvConfig() {
     VITE_GLOB_WEB_SOCKET,
     VITE_GLOB_ALARM_NOTIFY_DURATION,
     VITE_GLOB_CONTENT_SECURITY_POLICY,
-    VITE_GLOB_PUBLIC_PATH
+    VITE_GLOB_PUBLIC_PATH,
+    VITE_GLOB_STREAM_MEDIA_CONTENT_SECURITY_PROTOCOL
   } = ENV;
 
   if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
@@ -53,7 +78,8 @@ export function getAppEnvConfig() {
     VITE_GLOB_WEB_SOCKET,
     VITE_GLOB_ALARM_NOTIFY_DURATION,
     VITE_GLOB_CONTENT_SECURITY_POLICY,
-    VITE_GLOB_PUBLIC_PATH
+    VITE_GLOB_PUBLIC_PATH,
+    VITE_GLOB_STREAM_MEDIA_CONTENT_SECURITY_PROTOCOL
   };
 }
 

@@ -152,6 +152,8 @@ export interface GlobConfig {
   securityPolicy: string;
   // assets file prefix
   publicPath: string
+  // Streaming media content security protocol
+  streamMediaContentSecurityProtocol: boolean
 }
 export interface GlobEnvConfig {
   // Site title
@@ -172,4 +174,6 @@ export interface GlobEnvConfig {
   VITE_GLOB_CONTENT_SECURITY_POLICY: string
   // public assets file prefix
   VITE_GLOB_PUBLIC_PATH: string
+  // Streaming media content security protocol
+  VITE_GLOB_STREAM_MEDIA_CONTENT_SECURITY_PROTOCOL: boolean
 }

@@ -11,6 +11,10 @@ interface ImportMetaEnv {
   VITE_GLOB_CONTENT_SECURITY_POLICY: boolean
 
   VITE_GLOB_APP_SHORT_NAME: string
+
+  // 流媒体播放协议
+  VITE_GLOB_STREAM_MEDIA_CONTENT_SECURITY_PROTOCOL: boolean
+
 }