fix: 修改js调用

config/config.js

@@ -80,6 +80,7 @@ export default {
     process.env.NODE_ENV === 'development'
       ? ['https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd.css']
       : [],
+  scripts: [{ src: '/JessibucaVideo/jessibuca.js', defer: true }],
   menus: {
     '/components': [
       {

packages/base-components/TestVideo/README.md

@@ -12,5 +12,11 @@ const testvideo = require('@wisdom-components/testvideo');
 
 ## 视频组件 - 基本
 ### api 参考 Jessibuca 组件 https://jessibuca.com/api.html
-### 在使用该组件时，需将组件中JessibucaVideo文件夹，拷贝至环境根目录public中
+## 在使用该组件时，需将组件中 JessibucaVideo 文件夹，拷贝至环境根目录 public 中
+## 且需在子应用或者基座上的入口文件index.html或者index.ejs中，用script标签将jessibuca.js引入
+如：<br/>
+    `<script type="text/javascript" src="/civ_energy/JessibucaVideo/jessibuca.js"></script>`<br/>
+    `<script type="text/javascript" src="/civbase/JessibucaVideo/jessibuca.js"></script>`
+
+
 ```

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

@@ -22,12 +22,17 @@ class App extends React.Component {
     if (VideoInfo.url) {
       this.create(this.refs[`myVideo` + VideoInfo.key], `key`, JessibucaObj);
       setTimeout(() => {
-        this.play(VideoInfo.url, `key`);
+        this.play(VideoInfo.url + `_${VideoInfo.dataRate}`, `key`);
       }, 10);
     }
   }
   componentDidMount() {
     this.createAll();
+
+    this.jessibuca.on('pause', function (data) {
+      // console.log('timeUpdate', ts);
+      console.log('pause:', data);
+    });
   }
   componentWillUnmount() {
     this.destroy();

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

@@ -9,16 +9,16 @@ group:
 
 # TestVideo 视频组件
 
-## 视频组件 - 基本
+## 组件使用
 
-## 在使用该组件时，需将组件中 JessibucaVideo 文件夹，拷贝至环境根目录 public 中
+**需将组件中 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>`
 
-### api 参考 Jessibuca 组件 https://jessibuca.com/api.html
-
-### 代码演示
+## 代码演示
 
 <code src="./demos/dmeo1.tsx">
 
+## 参数说明
+
 | Jessibuca 常用参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | hiddenAutoPause | 是否开启当页面的'visibilityState'变为'hidden'的时候，自动暂停播放。 | boolean | false |
@@ -34,8 +34,13 @@ group:
 |  | play 是否显示播放暂停按钮 | boolean | true |
 |  | audio 是否显示声音按钮 | boolean | true |
 |  | record 是否显示录制按钮 | boolean | true |
-| VideoInfo 常用参数 | --- | --- | --- |
+| VideoInfo 参数 | --- | --- | --- |
 | fullUrl | 完整 url，接入 flv 或者三方的链接 | string | "" |
-| useFullUrl | 是否为完整 url，是，则取 fullUrl | boolean | false |
+| useFullUrl | 是否为完整 url，是，则取 fullUrl，否，则会用 key 去拼接 | boolean | false |
 | key | 摄像头唯一标识 | string | "" |
 | cameraName | 摄像头名称 | string | "" |
+| dataRate | 码率，1 为主码流，2,3 为其他码流，与消耗网络有关，主码流消耗最高 | number | 2 |
+
+## 写在最后
+
+更多参数，方法，事件，可查看 demo1 中的调用方法，以及参考 Jessibuca 在线文档 ，https://jessibuca.com/api.html

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

@@ -15,26 +15,68 @@ const Demo1 = (props) => {
 
   let VideoInfo = {
     key: '/live/s8',
-    fullUrl: 'http://flv.bdplay.nodemedia.cn/live/bbb.flv',
-    useFullUrl: false,
+    dataRate: 2,
+    fullUrl: 'ws://172.16.19.19:8080/jessica/rtsp/site_pd00001/ipc_172.16.19.7',
+    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);
+    }
   };
 
   const startVideo = () => {
+    try {
+      if (jessibuca && jessibuca.current) {
         jessibuca.current.play();
+        console.log(jessibuca.current.isPlaying());
+      }
+    } catch (ex) {
+      console.log(ex);
+    }
+  };
+  const testVideo = () => {
+    console.log(jessibuca.current.isPlaying());
+  };
+  const destroyVideo = () => {
+    try {
+      jessibuca.current.destroy();
+    } catch (ex) {
+      console.log(ex);
+    }
   };
   return (
     <div>
       <button onClick={stopVideo}>暂停</button>
       <button onClick={startVideo}>开始</button>
+      <button onClick={testVideo}>测试</button>
+      <button onClick={destroyVideo}>销毁</button>
       <Video {...{ JessibucaObj: JessibucaObj, VideoInfo: VideoInfo }} ref={jessibuca} />
     </div>
   );

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

@@ -2,7 +2,7 @@
 import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
 import App1 from './App';
 import style from './index.less';
-import * as Jessibuca from './JessibucaVideo/jessibuca';
+// import * as Jessibuca from './JessibucaVideo/jessibuca';
 
 //  proxy.js配置
 // '/jessica/': {
@@ -21,12 +21,13 @@ const Video = (props, ref) => {
 
   let _VideoInfo = {
     title: '摄像头',
+    dataRate: 1,
     url: `${baseUrl}/live/s8`,
     fullUrl: '',
     key: `摄像头`,
   };
   useEffect(() => {
-    console.log(_video);
+    // console.log(_video);
   }, []);
 
   useImperativeHandle(