import React, { useState } from 'react'; import { Button } from 'antd'; import VideoSliderModal from '../index'; const Demo = () => { const [showModal, setShowModal] = useState(false); // 关闭弹窗 const closeModal = () => { setShowModal(false); }; // 弹窗参数 const modalInfo = { title: '视频预览测试', open: showModal, onCancel: closeModal, }; // 视频数据源信息 const videos = [ { id: 'E48A1B9F-16AD-4728-9A9F-9D86E897B1CC', // 398993BB-A795-4237-BE75-B6A7EC9D675 name: '琼海电信小区1', // 设备名称 protocol: '萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181 username: '6c44c8e92d1c4d75a9818756025df550', password: '78b7dc88f9f4bf19c2b1aabfdd995244', dataRate: 'Sub', // Main 主码流 Sub 子码流 pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg: ws://172.16.19.19:8080/ address: '236644034', }, { id: '339B3B67-A7AE-45B2-89B7-227619A88A01', // 398993BB-A795-4237-BE75-B6A7EC9D675 name: '琼海电信小区2', // 设备名称 protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181 username: '6c44c8e92d1c4d75a9818756025df550', password: '78b7dc88f9f4bf19c2b1aabfdd995244', dataRate: 'Sub', // Main 主码流 Sub 子码流 pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg: ws://172.16.19.19:8080/ address: '236644034', }, { id: '972DF430-2E69-4960-86E2-C1D336B85280', // 398993BB-A795-4237-BE75-B6A7EC9D675 name: '琼海电信小区3', // 设备名称 protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181 username: '6c44c8e92d1c4d75a9818756025df550', password: '78b7dc88f9f4bf19c2b1aabfdd995244', dataRate: 'Sub', // Main 主码流 Sub 子码流 pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg: ws://172.16.19.19:8080/ address: '236644034', }, ]; const _JessibucaObj = { operateBtns: { screenshot: false, }, loadingText: '视频加载中', decoder: '/JessibucaVideo/decoder.js', }; return ( <> <Button onClick={() => setShowModal(true)}>打开弹窗</Button> <VideoSliderModal modalInfo={modalInfo} videoInfos={videos} JessibucaObj={_JessibucaObj} /> </> ); }; export default Demo;