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;
+  }
+}

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

+---
+title: TestVideo - 视频组件
+nav:
+  title: 基础组件
+  path: /components
+group:
+  path: /
+---
+
+# TestVideo 视频组件
+
+## 视频组件 - 基本
+
+## 在使用该组件时，需将组件中 JessibucaVideo 文件夹，拷贝至环境根目录 public 中
+
+### api 参考 Jessibuca 组件 https://jessibuca.com/api.html
+
+### 代码演示
+
+<code src="./demos/dmeo1.tsx">
+
+| Jessibuca 常用参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| hiddenAutoPause | 是否开启当页面的'visibilityState'变为'hidden'的时候，自动暂停播放。 | boolean | false |
+| hasAudio | 是否有音频，如果设置 false，则不对音频数据解码，提升性能 | boolean | true |
+| isFlv | 当为 true 的时候：ws 协议不检验是否以.flv 为依据，进行协议解析。 | boolean | false |
+| isNotMute | 是否开启声音，默认是关闭声音播放的。 | boolean | false |
+| loadingText | 加载过程中文案 | string | "视频加载中" |
+| controlAutoHide | 底部控制台是否自动隐藏 | boolean | false |
+| recordType | 默认录制的视频格式 | string | mp4 |
+| operateBtns | 配置操作按钮，以下为 operateBtns 详细属性 | object |  |
+|  | fullscreen 是否显示全屏按钮 | boolean | true |
+|  | screenshot 是否显示截图按钮 | boolean | true |
+|  | play 是否显示播放暂停按钮 | boolean | true |
+|  | audio 是否显示声音按钮 | boolean | true |
+|  | record 是否显示录制按钮 | boolean | true |
+| VideoInfo 常用参数 | --- | --- | --- |
+| fullUrl | 完整 url，接入 flv 或者三方的链接 | string | "" |
+| useFullUrl | 是否为完整 url，是，则取 fullUrl | boolean | false |
+| key | 摄像头唯一标识 | string | "" |
+| cameraName | 摄像头名称 | string | "" |

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

+// @ts-ignore
+import React, { useRef, useEffect } from 'react';
+import Video from '../index';
+
+const Demo1 = (props) => {
+  const jessibuca = useRef(null);
+
+  let JessibucaObj = {
+    operateBtns: {
+      // fullscreen: false,
+      screenshot: false,
+    },
+    loadingText: '演示视频加载中',
+  };
+
+  let VideoInfo = {
+    key: '/live/s8',
+    fullUrl: 'http://flv.bdplay.nodemedia.cn/live/bbb.flv',
+    useFullUrl: false,
+    cameraName: `摄像头s8`,
+  };
+
+  useEffect(() => {
+    console.log(jessibuca);
+  }, []);
+
+  const stopVideo = () => {
+    jessibuca.current.pause();
+  };
+
+  const startVideo = () => {
+    jessibuca.current.play();
+  };
+  return (
+    <div>
+      <button onClick={stopVideo}>暂停</button>
+      <button onClick={startVideo}>开始</button>
+      <Video {...{ JessibucaObj: JessibucaObj, VideoInfo: VideoInfo }} ref={jessibuca} />
+    </div>
+  );
+};
+
+export default Demo1;

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

+// eslint-disable-next-line no-unused-vars
+import React, { useRef, useEffect, useImperativeHandle, forwardRef } 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);
+  const { VideoInfo, JessibucaObj } = props;
+  let baseUrl = `ws://${window.location.host}/jessica`;
+  let _VideoInfo = {
+    title: '摄像头',
+    url: `${baseUrl}/live/s8`,
+    fullUrl: '',
+    key: `摄像头`,
+  };
+  useEffect(() => {
+    console.log(_video);
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    () =>
+      // changeVal 就是暴露给父组件的方法, newVal是父组件传递的参数
+      _video.current.jessibuca,
+  );
+
+  VideoInfo.url = VideoInfo.useFullUrl ? VideoInfo.fullUrl : baseUrl + VideoInfo.key;
+  let operateBtns = {
+    fullscreen: true,
+    screenshot: true,
+    play: true,
+    record: true,
+    audio: true,
+  };
+  _VideoInfo = { ..._VideoInfo, ...VideoInfo };
+  if (JessibucaObj && JessibucaObj.operateBtns) {
+    JessibucaObj.operateBtns = {
+      ...operateBtns,
+      ...JessibucaObj.operateBtns,
+    };
+  }
+  // console.log(_video)
+  return (
+    <div className={style.app}>
+      <App1 {...{ VideoInfo: _VideoInfo, JessibucaObj: JessibucaObj }} ref={_video} />
+    </div>
+  );
+};
+
+const $Video = forwardRef(Video);
+
+export default $Video;

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

+.app {
+  width: 100%;
+  height: 500px;
+}

public/JessibucaVideo/Readme.md

+## 使用 Jessibuca 视频组件，依赖 decoder.js 和 decoder.wasm 文件，且位置固定在根目录 public 之下