feat h264监控在线打开

src/locales/zh-CN/common.ts

@@ -41,5 +41,7 @@ export default {
   'common.confirm_publish': '确认发布',
   'common.set_default': '设为默认版本',
   'common.bind_device': '绑定设备',
-  "common.tip.title": '温馨提示'
+  "common.tip.title": '温馨提示',
+  'common.video_opening': '视频打开中',
+  'common.open_failure': '打开失败',
 }

src/pages/Device/DeviceList/components/VideoModal.tsx

@@ -16,6 +16,7 @@ export type VideoModalProps = {
   handleModal: () => void;
   values: Partial<API.Device>;
   reload: any;
+  videoServerParam: API.RtspRes;
 };
 
 const VideoModal: React.FC<VideoModalProps> = (props) => {
@@ -44,7 +45,7 @@ const VideoModal: React.FC<VideoModalProps> = (props) => {
            width={1280}
            onOk={props.handleModal} onCancel={props.handleModal}
            footer={null}>
-      {videoInit && (<WebRTCStreamer is_open={props.modalOpen} stream_url={props.values.param} server_url={WEBRTC_SERVER_HOST}></WebRTCStreamer>)}
+      {videoInit && (<WebRTCStreamer is_open={props.modalOpen} stream_url={props.values.param} server_url={props.videoServerParam.host || ''}></WebRTCStreamer>)}
 
     </Modal>
   )

src/pages/Device/DeviceList/index.tsx

@@ -16,7 +16,7 @@ import {ColumnDrawer as DeviceCategoryColumnDrawer} from "@/pages/Device/DeviceC
 import {
   deleteDeviceDeleteDevice,
   postDeviceGetDeviceList,
-  deleteDeviceDeleteDeviceByIds
+  deleteDeviceDeleteDeviceByIds, postDeviceOpenRtspCamera, postDeviceCloseRtspCamera
 } from '@/services/device/Device';
 import {PlusOutlined, RedoOutlined} from '@ant-design/icons';
 import type {ActionType, ProColumns} from '@ant-design/pro-components';
@@ -73,8 +73,8 @@ const DeviceList: React.FC = () => {
   const [hasInit, setHasInit] = useState<boolean>(false)
   const [nodeTreeData, setNodeTreeData] = React.useState<DataNode[]>([]);
   const [selectNodes, setSelectNodes] = React.useState<any[]>([]);
-
-
+  const [videoOpening, setVideoOpening] = useState<boolean>(false);
+  const [videoServerParam, setVideoServerParam] = useState<API.RtspRes>({})
   useEffect(() => {
     postDeviceGroupGetDeviceGroupTree().then((resp) => {
       setNodeTreeData(resp.data.tree)
@@ -86,7 +86,13 @@ const DeviceList: React.FC = () => {
   const handleVideoModal = ()=>{
     if (videoModalOpen) {
       setVideoModalOpen(false)
+      if (videoServerParam?.pid || 0) {
+        postDeviceCloseRtspCamera({pid: videoServerParam.pid}).then((resp) => {
+            console.log(resp)
+        })
+      }
       setCurrentRow(undefined)
+      setVideoServerParam({})
     } else {
       setVideoModalOpen(true)
     }
@@ -394,8 +400,24 @@ const DeviceList: React.FC = () => {
           <a
             key="video"
             onClick={() => {
-              setVideoModalOpen(true);
-              setCurrentRow(record);
+              setVideoOpening(true)
+              if (record.param) {
+                postDeviceOpenRtspCamera({url: record.param}).then((resp) => {
+                  setVideoServerParam(resp.data)
+                  setVideoOpening(false)
+                  setVideoModalOpen(true);
+                  console.log(resp.data)
+                  setCurrentRow(record);
+                }).catch(()=>{
+                  setVideoOpening(false)
+                  message.error(intl.formatMessage({id: 'common.open_failure', defaultMessage: '$$$'}))
+                })
+              } else {
+                setVideoOpening(false)
+                message.error(intl.formatMessage({id: 'common.open_failure', defaultMessage: '$$$'}))
+              }
+              // setVideoModalOpen(true);
+              // setCurrentRow(record);
             }}>
             <FormattedMessage id="common.open_video" defaultMessage="$$$" />
           </a>
@@ -430,6 +452,10 @@ const DeviceList: React.FC = () => {
               id: 'pages.searchTable.title',
               defaultMessage: '$$$',
             })}
+            loading={{tip: intl.formatMessage({
+                id: 'common.video_opening',
+                defaultMessage: '$$$'
+              }), spinning: videoOpening}}
             options={{fullScreen: true, setting: true, density: true, reload: true}}
             actionRef={actionRef}
             rowKey="key"
@@ -612,6 +638,7 @@ const DeviceList: React.FC = () => {
       <VideoModal modalOpen={videoModalOpen}
                   handleModal={handleVideoModal}
                   values={currentRow || {}}
+                  videoServerParam={videoServerParam}
                   reload={actionRef.current?.reload}
       />
 

src/services/device/Device.ts

@@ -118,3 +118,37 @@ export async function putDeviceUpdateDevice(body: API.Device, options?: { [key:
     ...(options || {}),
   });
 }
+
+/** 关闭rtsp摄像头驱动 POST /device/closeRtspCamera */
+export async function postDeviceCloseRtspCamera(
+    body: API.KillRtspReq,
+    options?: { [key: string]: any },
+) {
+    return request<API.Response & { msg?: string }>(`/api/v1/device/closeRtspCamera`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        data: body,
+        ...(options || {}),
+    });
+}
+
+
+/** 打开rtsp摄像头驱动 POST /device/openRtspCamera */
+export async function postDeviceOpenRtspCamera(
+    body: API.RtspReq,
+    options?: { [key: string]: any },
+) {
+    return request<API.Response & { data?: API.RtspRes; msg?: string }>(
+        `/api/v1/device/openRtspCamera`,
+        {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            data: body,
+            ...(options || {}),
+        },
+    );
+}

src/services/device/typings.d.ts

@@ -23,6 +23,20 @@ declare namespace API {
     updateTime?: string;
   };
 
+  type RtspReq = {
+    /** rtsp地址 */
+    url?: string;
+  };
+  type KillRtspReq = {
+    /** rtsp地址 */
+    pid?: number;
+  };
+
+  type RtspRes = {
+    host?: string;
+    pid?: number;
+  };
+
   type DeviceDeviceCategoryResponse = {
     deviceCategory?: DeviceCategory;
   };