fix: 萤石云视频组件增加回放

packages/base-components/VmsVideo/package.json

@@ -33,6 +33,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "ezuikit-js": "^7.6.3"
+    "ezuikit-js": "7.7.6"
   }
 }

packages/base-components/VmsVideo/src/demos/dmeo1.tsx

@@ -60,16 +60,22 @@ const Demo1 = (props) => {
     //   height: 500,
   }; */
 
-  /* {
-    id: '398993BB-A795-4237-BE75-B6A7EC9D675', // 398993BB-A795-4237-BE75-B6A7EC9D675
-    name: '设备1', // 设备名称
-    protocol: '萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
-    username: '6c44c8e92d1c4d75a9818756025df550',
-    password: '78b7dc88f9f4bf19c2b1aabfdd995244',
-    dataRate: 'Sub', // Main 主码流  Sub 子码流
-    pandavmsHost: 'ws://172.16.19.19:8080/', // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
-    address: '123638446',
-  }; */
+  // VideoParam = {
+  //   id: '819DE637-BB78-49EB-9FBD-02907A3C1141', // 398993BB-A795-4237-BE75-B6A7EC9D675
+  //   name: '锦绣豪庭_通道_2', // 设备名称
+  //   protocol: '萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
+  //   username: 'cd12d49994a04fb2839037d3f559a801',
+  //   password: '24ecede07e9be5c5fccb85ccfec5e1ba',
+  //   dataRate: 'Sub', // Main 主码流  Sub 子码流
+  //   pandavmsHost: 'ws://221.229.200.85:8086/', // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
+  //   address: 'F65095407',
+  //   channel: 2,
+  //   options:{
+  //     begin: '20231010000000',
+  //     end: '20231010235959'
+  //   },
+  //   type:'rec'
+  // };
 
   useEffect(() => {
     // 事件 ，返回视频信息

packages/base-components/VmsVideo/src/index.jsx

-/*
- * @Author: 634665781 634665781@qq.com
- * @Date: 2023-04-11 13:40:18
- * @LastEditors: yutian 249303761@qq.com
- * @LastEditTime: 2023-08-31 11:34:30
- * @FilePath: \wisdom-components\packages\base-components\VmsVideo\src\index.jsx
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
 /*
  * @Author: 634665781 634665781@qq.com
  * @Date: 2023-04-11 13:40:18
@@ -28,17 +20,6 @@ import React, {
 } from 'react';
 import App1 from './App';
 import style from './index.less';
-// import * as Jessibuca from './JessibucaVideo/jessibuca';
-
-//  proxy.js配置
-// '/jessica/': {
-//   target: wsServerPath,
-//   changeOrigin: true,
-//   ws: true,
-//   pathRewrite: {
-//     '/jessica': '/jessica',
-//   },
-// },
 
 const Video = (props, ref) => {
   const _video = useRef(null);
@@ -47,7 +28,7 @@ const Video = (props, ref) => {
   let PlayersA = '';
   const { VideoInfo, JessibucaObj, gateway } = props;
   let baseUrl = `ws://${window.location.host}/jessica`;
-  let keyID = VideoInfo.id;
+  let keyID = 'VIDEO-' + VideoInfo.id;
   let _VideoInfo = {
     title: '摄像头',
     // dataRate: 1,
@@ -69,28 +50,48 @@ const Video = (props, ref) => {
       )
       .then(function (response) {
         let accessToken = response.data.data.accessToken;
-        PlayersA = new EZUIKit.EZUIKitPlayer({
-          id: keyID, // 视频容器ID
-          accessToken: accessToken,
-          url: `ezopen://open.ys7.com/${VideoInfo.address}/${VideoInfo.channel || 1}.hd.live`,
-          template: 'pcLive',
-          footer: ['talk', 'broadcast', 'hd', 'fullScreen'],
-          width: VideoInfo.width || refs?.current?.offsetWidth || 952,
-          height: VideoInfo.height || refs?.current?.offsetHeight || 500,
-        });
-
-        PlayersA.pause = PlayersA.stop;
-        if (ref) ref.current = PlayersA;
+        if (!VideoInfo.type || VideoInfo.type !== 'rec') return videoPlayLive(accessToken);
+        videoPlayRec(accessToken);
       })
 
       .catch(function (error) {
-        // console.log(error);
         try {
           PlayersA && PlayersA.stop();
         } catch (e) {}
       });
   };
 
+  const videoPlayLive = (accessToken) => {
+    PlayersA = new EZUIKit.EZUIKitPlayer({
+      id: keyID, // 视频容器ID
+      accessToken: accessToken,
+      url: `ezopen://open.ys7.com/${VideoInfo.address}/${VideoInfo.channel || 1}.hd.live`,
+      template: 'pcLive',
+      footer: ['talk', 'broadcast', 'hd', 'fullScreen'],
+      width: VideoInfo.width || refs?.current?.offsetWidth || 952,
+      height: VideoInfo.height || refs?.current?.offsetHeight || 500,
+    });
+
+    PlayersA.pause = PlayersA.stop;
+    if (ref) ref.current = PlayersA;
+  };
+
+  const videoPlayRec = (accessToken) => {
+    PlayersA = new EZUIKit.EZUIKitPlayer({
+      id: keyID, // 视频容器ID
+      accessToken: accessToken,
+      url: `ezopen://open.ys7.com/${VideoInfo.address}/${VideoInfo.channel || 1}.hd.rec`,
+      template: 'security',
+      footer: ['talk', 'broadcast', 'hd', 'fullScreen'],
+      width: VideoInfo.width || refs?.current?.offsetWidth || 952,
+      height: VideoInfo.height || refs?.current?.offsetHeight || 500,
+    });
+
+    PlayersA.pause = PlayersA.stop;
+    // VideoInfo.options && PlayersA.changePlayUrl(VideoInfo.options);
+    if (ref) ref.current = PlayersA;
+  };
+
   if (VideoInfo.protocol != '萤石EZOPEN') {
     useImperativeHandle(ref, () => {
       // changeVal 就是暴露给父组件的方法, newVal是父组件传递的参数
@@ -98,6 +99,12 @@ const Video = (props, ref) => {
     });
   }
 
+  useEffect(() => {
+    if (VideoInfo.protocol === '萤石EZOPEN') {
+      VideoInfo.options && PlayersA && PlayersA.changePlayUrl(VideoInfo.options);
+    }
+  }, [VideoInfo.options]);
+
   useEffect(() => {
     if (VideoInfo.protocol != '萤石EZOPEN') {
     } else {
@@ -118,8 +125,10 @@ const Video = (props, ref) => {
           refs?.current && resizeObserver.unobserve(refs.current);
         } catch (e) {}
         try {
-          PlayersA && PlayersA.stop();
-          PlayersA && PlayersA.destroy();
+          PlayersA &&
+            PlayersA.stop().then(() => {
+              PlayersA && PlayersA.destroy();
+            });
         } catch (e) {}
         // eslint-disable-next-line react-hooks/exhaustive-deps
         PlayersA = null;