demo.tsx 2.35 KB
Newer Older
1
import React, { useState } from 'react';
2 3 4 5 6
import { Button } from 'antd';
import VideoSliderModal from '../index';

const Demo = () => {
  const [showModal, setShowModal] = useState(false);
7
  // 关闭弹窗
8 9 10
  const closeModal = () => {
    setShowModal(false);
  };
11
  // 弹窗参数
12
  const modalInfo = {
13
    title: '视频预览测试',
14 15 16
    open: showModal,
    onCancel: closeModal,
  };
17 18

  // 视频数据源信息
19 20
  const videos = [
    {
21
      id: 'E48A1B9F-16AD-4728-9A9F-9D86E897B1CC', // 398993BB-A795-4237-BE75-B6A7EC9D675
22
      name: '琼海电信小区1', // 设备名称
23
      protocol: '萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
24 25 26
      username: '6c44c8e92d1c4d75a9818756025df550',
      password: '78b7dc88f9f4bf19c2b1aabfdd995244',
      dataRate: 'Sub', // Main 主码流  Sub 子码流
27
      pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
28 29 30
      address: '236644034',
    },
    {
31 32
      id: '339B3B67-A7AE-45B2-89B7-227619A88A01', // 398993BB-A795-4237-BE75-B6A7EC9D675
      name: '琼海电信小区2', // 设备名称
33 34 35 36
      protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
      username: '6c44c8e92d1c4d75a9818756025df550',
      password: '78b7dc88f9f4bf19c2b1aabfdd995244',
      dataRate: 'Sub', // Main 主码流  Sub 子码流
37
      pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
38 39 40
      address: '236644034',
    },
    {
41 42
      id: '972DF430-2E69-4960-86E2-C1D336B85280', // 398993BB-A795-4237-BE75-B6A7EC9D675
      name: '琼海电信小区3', // 设备名称
43 44 45 46
      protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
      username: '6c44c8e92d1c4d75a9818756025df550',
      password: '78b7dc88f9f4bf19c2b1aabfdd995244',
      dataRate: 'Sub', // Main 主码流  Sub 子码流
47
      pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
48 49 50 51
      address: '236644034',
    },
  ];

刘梦焕's avatar
刘梦焕 committed
52 53 54 55 56 57 58 59
  const _JessibucaObj = {
    operateBtns: {
      screenshot: false,
    },
    loadingText: '视频加载中',
    decoder: '/JessibucaVideo/decoder.js',
  };

60 61 62
  return (
    <>
      <Button onClick={() => setShowModal(true)}>打开弹窗</Button>
刘梦焕's avatar
刘梦焕 committed
63
      <VideoSliderModal modalInfo={modalInfo} videoInfos={videos} JessibucaObj={_JessibucaObj} />
64 65 66 67 68
    </>
  );
};

export default Demo;