fix: 视频组件修改

packages/base-components/TestVideo/src/App.jsx

@@ -22,7 +22,7 @@ class App extends React.Component {
     if (VideoInfo.url) {
       this.create(this.refs[`myVideo` + VideoInfo.key], `key`, JessibucaObj);
       setTimeout(() => {
-        this.play(VideoInfo.url + `_${VideoInfo.dataRate}`, `key`);
+        this.play(VideoInfo.url + `${VideoInfo.dataRate}`, `key`);
       }, 10);
     }
   }
@@ -69,7 +69,6 @@ class App extends React.Component {
       ...jsc,
       ...obj,
       container: dom,
-      decoder: '/JessibucaVideo/decoder.js',
     };
     if (dom) {
       this.jessibuca = new window.Jessibuca(jsc);

packages/base-components/TestVideo/src/TestVideo.md

@@ -11,7 +11,7 @@ group:
 
 ## 组件使用
 
-**需将组件中 JessibucaVideo 文件夹，拷贝至环境根目录 public 中**<br/> **且需在子应用或者基座上的入口文件 index.html 或者 index.ejs 中，用 script 标签将 jessibuca.js 引入**<br/> 如：<br/> `<script type="text/javascript" src="/civ_energy/JessibucaVideo/jessibuca.js"></script>`<br/> `<script type="text/javascript" src="/civbase/JessibucaVideo/jessibuca.js"></script>`
+**需将组件中 JessibucaVideo 文件夹，拷贝至环境根目录 public 中**<br/> **且需在子应用或者基座上的入口文件 index.html 或者 index.ejs 中，用 script 标签将 jessibuca.js 引入**<br/> 如：<br/> `<script type="text/javascript" src="/civ_energy/JessibucaVideo/jessibuca.js"></script>`<br/> `<script type="text/javascript" src="/civbase/JessibucaVideo/jessibuca.js"></script>`<br/> **在定义 decoder.js 文件路径时，需兼容子应用和基座**<br/> 如：<br/> `let _url = '/civ_energy/JessibucaVideo/decoder.js'`<br/> ` let JessibucaObj = { decoder: window.__POWERED_BY_QIANKUN__ ? '/civbase' + _url : _url }`<br/>
 
 ## 代码演示
 
@@ -21,6 +21,7 @@ group:
 
 | Jessibuca 常用参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| **decoder** | 是文件"/JessibucaVideo/decoder.js"的路径 | string | --- |
 | hiddenAutoPause | 是否开启当页面的'visibilityState'变为'hidden'的时候，自动暂停播放。 | boolean | false |
 | hasAudio | 是否有音频，如果设置 false，则不对音频数据解码，提升性能 | boolean | true |
 | isFlv | 当为 true 的时候：ws 协议不检验是否以.flv 为依据，进行协议解析。 | boolean | false |
@@ -37,9 +38,9 @@ group:
 | VideoInfo 参数 | --- | --- | --- |
 | fullUrl | 完整 url，接入 flv 或者三方的链接 | string | "" |
 | useFullUrl | 是否为完整 url，是，则取 fullUrl，否，则会用 key 去拼接 | boolean | false |
-| key | 摄像头唯一标识 | string | "" |
+| key | 摄像头唯一标识，一串 GUID | string | "" |
 | cameraName | 摄像头名称 | string | "" |
-| dataRate | 码率，1 为主码流，2,3 为其他码流，与消耗网络有关，主码流消耗最高 | number | 2 |
+| dataRate | 码率，1 为主码流，2,3 为其他码流，与消耗网络有关，主码流消耗最高，**由于拼接方式不定，改为是字符串传入** | string | '/2' |
 
 ## 写在最后
 

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

@@ -11,65 +11,59 @@ const Demo1 = (props) => {
       screenshot: false,
     },
     loadingText: '演示视频加载中',
+    decoder: '/JessibucaVideo/decoder.js',
   };
-
+  // 若是在子应用中，则需加上子应用名称，且兼容基座
+  // 如下：
+  // let _url = '/civ_energy/JessibucaVideo/decoder.js'
+  // let JessibucaObj = {
+  //   decoder: window.__POWERED_BY_QIANKUN__ ? '/civbase' + _url : _url
+  // }
   let VideoInfo = {
-    key: '/live/s8',
-    dataRate: 2,
-    fullUrl: 'ws://172.16.19.19:8080/jessica/rtsp/site_pd00001/ipc_172.16.19.7',
+    key: '1CEB209F-8BC7-44B5-9F6B-3D8FCB855E76',
+    dataRate: `/2`,
+    fullUrl: 'ws://172.16.19.19:8080/jessica/1CEB209F-8BC7-44B5-9F6B-3D8FCB855E76',
     useFullUrl: true,
     cameraName: `摄像头s8`,
   };
 
   useEffect(() => {
-    console.log(jessibuca);
-
+    // 事件 ，返回视频信息
     jessibuca.current.on('videoInfo', function (data) {
-      // console.log('timeUpdate', ts);
       console.log('width:', data.width, 'height:', data.width);
     });
-    // jessibuca.current.on('timeUpdate', function (ts) {
-    //   console.log('timeUpdate', ts);
-    //   // console.log('pause:',data)
-    // })
+
+    // 事件 ，播放视频之后的回调
     jessibuca.current.on('play', function (data) {
-      // console.log('timeUpdate', ts);
       console.log('play:', jessibuca);
     });
+
+    // 事件 ，暂停视频之后的回调
     jessibuca.current.on('pause', function (data) {
-      // console.log('timeUpdate', ts);
       console.log('pause:', data);
     });
+
+    // ******
+    // 其他事件需查看在线文档
+    // ******
   }, []);
 
   const stopVideo = () => {
-    try {
-      jessibuca.current.pause();
-      console.log(jessibuca.current.isPlaying());
-    } catch (ex) {
-      console.log(ex);
-    }
+    jessibuca.current.pause();
   };
 
   const startVideo = () => {
-    try {
-      if (jessibuca && jessibuca.current) {
-        jessibuca.current.play();
-        console.log(jessibuca.current.isPlaying());
-      }
-    } catch (ex) {
-      console.log(ex);
+    if (jessibuca && jessibuca.current) {
+      jessibuca.current.play();
+      // console.log(jessibuca.current.isPlaying());
     }
   };
   const testVideo = () => {
-    console.log(jessibuca.current.isPlaying());
+    // console.log(jessibuca.current.isPlaying());
   };
+
   const destroyVideo = () => {
-    try {
-      jessibuca.current.destroy();
-    } catch (ex) {
-      console.log(ex);
-    }
+    jessibuca.current.destroy();
   };
   return (
     <div>