dmeo1.tsx 3.89 KB
Newer Older
程恺文's avatar
程恺文 committed
1 2 3 4
/*
 * @Author: 634665781 634665781@qq.com
 * @Date: 2023-04-11 13:40:18
 * @LastEditors: 634665781 634665781@qq.com
程恺文's avatar
程恺文 committed
5
 * @LastEditTime: 2023-04-17 11:05:27
程恺文's avatar
程恺文 committed
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
 * @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
  // }
程恺文's avatar
程恺文 committed
29 30 31 32
  // let VideoInfo = {
  // key: '123638446', //'1CEB209F-8BC7-44B5-9F6B-3D8FCB855E76',
  // dataRate: `/2`,
  // fullUrl: 'ws://172.16.19.19:8080/jessica/1CEB209F-8BC7-44B5-9F6B-3D8FCB855E76',
程恺文's avatar
程恺文 committed
33
  //  useFullUrl: true,
程恺文's avatar
程恺文 committed
34
  // cameraName: `摄像头s8`,
程恺文's avatar
程恺文 committed
35 36
  //  appKey: '6c44c8e92d1c4d75a9818756025df550',
  //  appSecret: '78b7dc88f9f4bf19c2b1aabfdd995244',
程恺文's avatar
程恺文 committed
37
  // protocol: '萤石EZOPEN',
程恺文's avatar
程恺文 committed
38 39
  //};

程恺文's avatar
程恺文 committed
40 41 42 43 44 45 46 47 48 49 50 51
  let VideoParam ={
    id: "11F102BC-CE03-4E32-AE60-F297934DFE3F", // 398993BB-A795-4237-BE75-B6A7EC9D675
    name: "琼海电信小区", // 设备名称
    protocol: "萤石云HTTP-FLV", // 萤石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",
  }
  
 /* {
程恺文's avatar
程恺文 committed
52 53
    id: '398993BB-A795-4237-BE75-B6A7EC9D675', // 398993BB-A795-4237-BE75-B6A7EC9D675
    name: '设备1', // 设备名称
程恺文's avatar
程恺文 committed
54
    protocol: '萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
程恺文's avatar
程恺文 committed
55 56 57 58 59
    username: '6c44c8e92d1c4d75a9818756025df550',
    password: '78b7dc88f9f4bf19c2b1aabfdd995244',
    dataRate: 'Sub', // Main 主码流  Sub 子码流
    pandavmsHost: 'ws://172.16.19.19:8080/', // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
    address: '123638446',
程恺文's avatar
程恺文 committed
60
  }; */
程恺文's avatar
程恺文 committed
61 62 63

  useEffect(() => {
    // 事件 ,返回视频信息
程恺文's avatar
程恺文 committed
64 65
    jessibuca &&
      jessibuca.current &&
程恺文's avatar
程恺文 committed
66 67 68 69 70
      jessibuca.current.on('videoInfo', function (data) {
        console.log('width:', data.width, 'height:', data.width);
      });

    // 事件 ,播放视频之后的回调
程恺文's avatar
程恺文 committed
71 72
    jessibuca &&
      jessibuca.current &&
程恺文's avatar
程恺文 committed
73 74 75 76 77
      jessibuca.current.on('play', function (data) {
        console.log('play:', jessibuca);
      });

    // 事件 ,暂停视频之后的回调
程恺文's avatar
程恺文 committed
78 79
    jessibuca &&
      jessibuca.current &&
程恺文's avatar
程恺文 committed
80 81 82 83 84 85 86 87 88 89
      jessibuca.current.on('pause', function (data) {
        console.log('pause:', data);
      });

    // ******
    // 其他事件需查看在线文档
    // ******
  }, []);

  const stopVideo = () => {
程恺文's avatar
程恺文 committed
90
    jessibuca.current.pause && jessibuca.current.pause();
程恺文's avatar
程恺文 committed
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
  };

  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>
      <Video {...{ JessibucaObj: JessibucaObj, VideoInfo: VideoParam }} ref={jessibuca} />
    </div>
  );
};

export default Demo1;