dmeo1.tsx 4.41 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-05-30 11:08:31
程恺文'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: "9745259F-76B5-4ECB-BDD7-8B1B2C5C84CD",
    name: "3L00AE9PAJ00034",
    protocol: "乐橙云HTTP-FLV",
    username: "lc0f4b952c86c34c4b",
    password: "dfdcae9267bf4964ae09998e16f016",
    pandavmsHost:'ws://192.168.12.154:8080/',
    address: "3L00AE9PAJ00034"
  }
  
  
  /*{
程恺文's avatar
程恺文 committed
52 53
    id: '11F102BC-CE03-4E32-AE60-F297934DFE3F', // 398993BB-A795-4237-BE75-B6A7EC9D675
    name: '琼海电信小区', // 设备名称
程恺文's avatar
程恺文 committed
54
    protocol:'萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
程恺文's avatar
程恺文 committed
55 56
    username: '6c44c8e92d1c4d75a9818756025df550',
    password: '78b7dc88f9f4bf19c2b1aabfdd995244',
程恺文's avatar
程恺文 committed
57 58
    dataRate: 'Sub', // Main 主码流  Sub 子码流
    pandavmsHost: `ws://192.168.8.27:9876/`, // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
程恺文's avatar
程恺文 committed
59
    address: '236644034',
程恺文's avatar
程恺文 committed
60 61
    //   width: 952,
    //   height: 500,
程恺文's avatar
程恺文 committed
62
  }; */
程恺文's avatar
程恺文 committed
63 64

  /* {
程恺文's avatar
程恺文 committed
65 66
    id: '398993BB-A795-4237-BE75-B6A7EC9D675', // 398993BB-A795-4237-BE75-B6A7EC9D675
    name: '设备1', // 设备名称
程恺文's avatar
程恺文 committed
67
    protocol: '萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
程恺文's avatar
程恺文 committed
68 69 70 71 72
    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
73
  }; */
程恺文's avatar
程恺文 committed
74 75 76

  useEffect(() => {
    // 事件 ,返回视频信息
程恺文's avatar
程恺文 committed
77 78
    jessibuca &&
      jessibuca.current &&
程恺文's avatar
程恺文 committed
79 80 81 82 83
      jessibuca.current.on('videoInfo', function (data) {
        console.log('width:', data.width, 'height:', data.width);
      });

    // 事件 ,播放视频之后的回调
程恺文's avatar
程恺文 committed
84 85
    jessibuca &&
      jessibuca.current &&
程恺文's avatar
程恺文 committed
86 87 88 89 90
      jessibuca.current.on('play', function (data) {
        console.log('play:', jessibuca);
      });

    // 事件 ,暂停视频之后的回调
程恺文's avatar
程恺文 committed
91 92
    jessibuca &&
      jessibuca.current &&
程恺文's avatar
程恺文 committed
93 94 95 96 97 98 99
      jessibuca.current.on('pause', function (data) {
        console.log('pause:', data);
      });

    // ******
    // 其他事件需查看在线文档
    // ******
程恺文's avatar
程恺文 committed
100
    return () => {
程恺文's avatar
程恺文 committed
101
      console.log('销毁。。。。。。。。。。。。。。。。。。。。。。。。。');
程恺文's avatar
程恺文 committed
102 103 104

      stopVideo();
    };
程恺文's avatar
程恺文 committed
105 106 107
  }, []);

  const stopVideo = () => {
程恺文's avatar
程恺文 committed
108
    jessibuca.current.pause && jessibuca.current.pause();
程恺文's avatar
程恺文 committed
109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130
  };

  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>
程恺文's avatar
程恺文 committed
131 132
      <div style={{ height: '700px' }}>
        <Video {...{ JessibucaObj: JessibucaObj, VideoInfo: VideoParam }} ref={jessibuca} />
程恺文's avatar
程恺文 committed
133
      </div>
程恺文's avatar
程恺文 committed
134 135 136 137 138
    </div>
  );
};

export default Demo1;