dmeo2.tsx 4.1 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135
import React, { useRef, useEffect, useState } from 'react';
import Video from '../recVideo';

const Demo2 = (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: '9745259F-76B5-4ECB-BDD7-8B1B2C5C84CD',
    name: '3L00AE9PAJ00034',
    protocol: '乐橙云HTTP-FLV',
    username: 'lc0f4b952c86c34c4b',
    password: 'dfdcae9267bf4964ae09998e16f016',
    pandavmsHost: 'ws://192.168.12.154:8080/',
    address: '3L00AE9PAJ00034',
  };

  VideoParam = {
    channel: '2',
    // dataRate: 'Sub', // Main 主码流  Sub 子码流
    name: 'RTSP银河湾五期_通道_2',
    id: '46D6E990-8049-4A61-B592-8503BDFAA07A',
    username: 'admin',
    password: 'zls_1234@abcd',
    address: '172.16.19.2',
    protocol: 'RTSP',
    pandavmsHost: 'ws://192.168.8.30:7000/', // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
    hoursRuler: 48,
    beginTime: '2024-01-01 00:00:00', // 回放开始时间
    endTime: '2024-01-02 23:59:59', // 回放结束时间
  };

  const [VideoInfo, setVideoInfo] = useState(VideoParam);

  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 && jessibuca.current && 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());
    setVideoInfo({
      channel: '2',
      // dataRate: 'Sub', // Main 主码流  Sub 子码流
      name: 'RTSP银河湾五期_通道_2',
      id: '46D6E990-8049-4A61-B592-8503BDFAA07A',
      username: 'admin',
      password: 'zls_1234@abcd',
      address: '172.16.19.2',
      protocol: 'RTSP',
      pandavmsHost: 'ws://192.168.8.30:7000/', // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
      hoursRuler: 24,
      beginTime: '2024-01-01 00:00:00',
      endTime: '2024-01-01 23:59:59',
    });
  };

  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: VideoInfo }} ref={jessibuca} />
      </div>
    </div>
  );
};

export default Demo2;