feat: 视频组件

config/config.js

@@ -105,6 +105,7 @@ export default {
           'TreeCustom',
           'AlarmScrollAssembly',
           'DataCarousel',
+          'TestVideo',
         ],
       },
       {

config/proxy.js

 const proxyURL = process.env.PANDA_ENV_PROXY || 'http://192.168.8.28:8911';
-
+let exUrl = '';
+if (proxyURL.includes(proxyURL.toLowerCase().includes('https'))) {
+  exUrl = proxyURL.replace('https', 'ws');
+} else {
+  exUrl = proxyURL.replace('http', 'ws');
+}
+const wsServerPath = exUrl;
 export default {
   '/api': {
     target: proxyURL,
     changeOrigin: true,
     pathRewrite: { '^/api': '' },
   },
+  '/jessica': {
+    target: wsServerPath,
+    changeOrigin: true,
+    ws: true,
+    pathRewrite: {
+      '/jessica': '/jessica',
+    },
+  },
   '/PandaMonitor': {
     target: proxyURL,
     changeOrigin: true,

packages/base-components/TestVideo/README.md

+# `@wisdom-components/TestVideo`
+
+> TODO: description
+
+## Usage
+
+```
+const testvideo = require('@wisdom-components/testvideo');
+
+# TestVideo 视频组件
+
+
+## 视频组件 - 基本
+### api 参考 Jessibuca 组件 https://jessibuca.com/api.html
+### 在使用该组件时，需将组件中JessibucaVideo文件夹，拷贝至环境根目录public中
+```

packages/base-components/TestVideo/package.json

+{
+  "name": "@wisdom-components/testvideo",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "yutian <249303761@qq.com>",
+  "homepage": "",
+  "license": "ISC",
+  "module": "es/index.js",
+  "main": "lib/index.js",
+  "sideEffects": [
+    "*.less"
+  ],
+  "directories": {
+    "lib": "lib",
+    "es": "es",
+    "dist": "dist",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib",
+    "es",
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "node ./__tests__/@wisdom-components/TestVideo.test.js"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.17.9"
+  }
+}
\ No newline at end of file

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

+import React from 'react';
+
+import style from './App.less';
+
+// import pubsub from 'pubsub-js'
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.jessibuca = null;
+    this.showOperateBtns = true;
+    this.$container = null;
+    this.forceNoOffscreen = false;
+
+    this.state = {
+      isPlaying: false,
+    };
+  }
+  createAll() {
+    let { VideoInfo, JessibucaObj } = this.props;
+    this.destroy();
+    if (VideoInfo.url) {
+      this.create(this.refs[`myVideo` + VideoInfo.key], `key`, JessibucaObj);
+      setTimeout(() => {
+        this.play(VideoInfo.url, `key`);
+      }, 10);
+    }
+  }
+  componentDidMount() {
+    this.createAll();
+  }
+  componentWillUnmount() {
+    this.destroy();
+  }
+  create(dom, key, obj) {
+    if (this.jessibuca) this.jessibuca.destroy();
+
+    let jsc = {
+      videoBuffer: 0.2, // 缓存时长
+      isResize: false,
+      text: '',
+      isFlv: false,
+      loadingText: '加载中',
+      debug: false,
+      recordType: 'mp4',
+      loadingTimeout: 60,
+      loadingText: '视频加载中',
+      loadingTimeoutReplay: true,
+      timeout: 60,
+      controlAutoHide: true,
+      heartTimeout: 60,
+      heartTimeoutReplay: true,
+      showBandwidth: true, // 显示网速
+      operateBtns: {
+        fullscreen: true,
+        screenshot: true,
+        play: true,
+        record: true,
+        audio: true,
+      },
+      isNotMute: false,
+    };
+    jsc = {
+      ...jsc,
+      ...obj,
+      container: dom,
+      decoder: '/JessibucaVideo/decoder.js',
+    };
+    if (dom) {
+      this.jessibuca = new window.Jessibuca(jsc);
+    }
+  }
+
+  play(url, key) {
+    if (this.jessibuca) {
+      this.jessibuca.play(url);
+      this.setState({
+        isPlaying: true,
+      });
+    }
+  }
+
+  pause() {
+    if (this.jessibucaArr) {
+      debugger;
+      for (let key in this.jessibucaArr) {
+        this.jessibucaArr[key].pause();
+      }
+      this.setState({
+        isPlaying: false,
+      });
+    }
+  }
+
+  destroy() {
+    if (this.jessibuca) {
+      this.jessibuca.destroy();
+      this.setState({
+        isPlaying: false,
+      });
+    }
+  }
+  renderCheckedArr() {
+    let { VideoInfo } = this.props;
+    return (
+      <div className={style.containerOut}>
+        {
+          <div
+            className={style.container}
+            key={VideoInfo.key}
+            ref={`myVideo` + VideoInfo.key}
+          ></div>
+        }
+      </div>
+    );
+  }
+  render() {
+    return <div className={style.root}>{this.renderCheckedArr()}</div>;
+  }
+}
+
+export default App;

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

+.root {
+  width: 100%;
+  height: 100%;
+
+  .containerOut {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+  }
+
+  .containerOut .container {
+    width: 100%;
+    height: 100%;
+    background: rgba(13, 14, 27, 0.7);
+    border: 1px solid transparent;
+  }
+}