dmeo1.tsx

/*
 * @Author: 634665781 634665781@qq.com
 * @Date: 2023-04-11 13:40:18
 * @LastEditors: 634665781 634665781@qq.com
 * @LastEditTime: 2023-05-30 11:08:31
 * @FilePath: \wisdom-components\packages\base-components\TestVideo\src\demos\dmeo1.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// @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: '演示视频加载中',
    decoder: '/JessibucaVideo/decoder.js',
  };
  // 若是在子应用中，则需加上子应用名称，且兼容基座
  // 如下：
  // let _url = '/civ_energy/JessibucaVideo/decoder.js'
  // let JessibucaObj = {
  //   decoder: window.__POWERED_BY_QIANKUN__ ? '/civbase' + _url : _url
  // }
  // let VideoInfo = {
  // key: '123638446', //'1CEB209F-8BC7-44B5-9F6B-3D8FCB855E76',
  // dataRate: `/2`,
  // fullUrl: 'ws://172.16.19.19:8080/jessica/1CEB209F-8BC7-44B5-9F6B-3D8FCB855E76',
  //  useFullUrl: true,
  // cameraName: `摄像头s8`,
  //  appKey: '6c44c8e92d1c4d75a9818756025df550',
  //  appSecret: '78b7dc88f9f4bf19c2b1aabfdd995244',
  // protocol: '萤石EZOPEN',
  //};

  let VideoParam = {
    id: '30E1F9B0-78C2-4947-9C9A-43C86A6678D4',
    name: '武汉测试',
    protocol: '萤石云HTTP-FLV',
    username: '6c44c8e92d1c4d75a9818756025df550',
    password: '78b7dc88f9f4bf19c2b1aabfdd995244',
    pandavmsHost: 'ws://192.168.8.30:7000/',
    address: 'C83178215',
  };
  let VideoParam1 = {
    id: '38FB4BA7-C61F-466C-9B57-5B401441DABC',
    name: 'K21319413_通道_1',
    protocol: '萤石云HTTP-FLV',
    username: '6c44c8e92d1c4d75a9818756025df550',
    password: '78b7dc88f9f4bf19c2b1aabfdd995244',
    dataRate: 'Sub', // Main 主码流  Sub 子码流
    pandavmsHost: 'ws://192.168.10.182:7000/',
    address: 'K21319413',
  };

  VideoParam1 = {
    id: 'CDCD0D7D-D18B-4FEE-AD4B-DF9CA50D2986',
    name: '设备12_通道_9',
    protocol: 'RTSP',
    username: 'admin',
    password: 'zls_1234@abcd',
    dataRate: 'Sub', // Main 主码流  Sub 子码流
    pandavmsHost: 'ws://192.168.8.30:7000/',
    address: '172.16.19.2',
  };

  /*{
    id: '11F102BC-CE03-4E32-AE60-F297934DFE3F', // 398993BB-A795-4237-BE75-B6A7EC9D675
    name: '琼海电信小区', // 设备名称
    protocol:'萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
    username: '6c44c8e92d1c4d75a9818756025df550',
    password: '78b7dc88f9f4bf19c2b1aabfdd995244',
    dataRate: 'Sub', // Main 主码流  Sub 子码流
    pandavmsHost: `ws://192.168.8.27:9876/`, // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
    address: '236644034',
    //   width: 952,
    //   height: 500,
  }; */

  // 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', // 回放标识
  // };

  // VideoParam = {
  //   id: 'D21D9F91-F546-4A54-AE31-8E30A83214B2', // 398993BB-A795-4237-BE75-B6A7EC9D675
  //   name: '金山蓝景_通道_1', // 设备名称
  //   protocol: '萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
  //   username: '6c44c8e92d1c4d75a9818756025df550',
  //   password: '78b7dc88f9f4bf19c2b1aabfdd995244',
  //   dataRate: 'Sub', // Main 主码流  Sub 子码流
  //   pandavmsHost: 'ws://120.194.86.66:8096/', // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
  //   address: 'F97957614',
  //   channel: 1,
  //   options:{ // 不传递默认是今天的回放
  //     begin: '20231010000000', // 回放开始时间
  //     end: '20231010235959', // 回放结束时间
  //   },
  //   type:'rec', // 回放标识
  // };

  useEffect(() => {
    // 事件 ，返回视频信息
    jessibuca &&
      jessibuca.current &&
      jessibuca.current.on('videoInfo', function (data) {
        console.log('width:', data.width, 'height:', data.width);
      });

    // 事件 ，播放视频之后的回调
    jessibuca &&
      jessibuca.current &&
      jessibuca.current.on('play', function (data) {
        console.log('play:', jessibuca);
      });

    // 事件 ，暂停视频之后的回调
    jessibuca &&
      jessibuca.current &&
      jessibuca.current.on('pause', function (data) {
        console.log('pause:', data);
      });

    // ******
    // 其他事件需查看在线文档
    // ******
    return () => {
      console.log('销毁。。。。。。。。。。。。。。。。。。。。。。。。。');

      stopVideo();
    };
  }, []);

  const stopVideo = () => {
    jessibuca.current.pause && jessibuca.current.pause();
  };

  const startVideo = () => {
    if (jessibuca && jessibuca.current) {
      jessibuca.current.play();
      // console.log(jessibuca.current.isPlaying());
    }
  };
  const testVideo = () => {
    // console.log(jessibuca.current.isPlaying());
  };

  const destroyVideo = () => {
    if (VideoParam.protocol != '萤石EZOPEN')
      jessibuca && jessibuca.current && jessibuca.current.destroy();
  };
  return (
    <div>
      <button onClick={stopVideo}>暂停</button>
      <button onClick={startVideo}>开始</button>
      <button onClick={testVideo}>测试</button>
      <button onClick={destroyVideo}>销毁</button>
      <div style={{ height: '700px' }}>
        <Video {...{ JessibucaObj: JessibucaObj, VideoInfo: VideoParam }} ref={jessibuca} />
      </div>
      <div style={{ height: '700px' }}>
        <Video {...{ JessibucaObj: JessibucaObj, VideoInfo: VideoParam1 }} ref={jessibuca} />
      </div>
    </div>
  );
};

export default Demo1;