Commit fe90406e authored by 周宏民's avatar 周宏民
parents 11de155b 424b1e03
......@@ -107,7 +107,6 @@ export default {
'AlarmScrollAssembly',
'DataCarousel',
'VmsVideo',
'VideoPopUp',
'VideoSliderModal',
],
},
......
# `@wisdom-components/VideoPopup`
> TODO: description
## Usage
```
const videopopup = require('@wisdom-components/VideoPopup');
// TODO: DEMONSTRATE API
```
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
---
title: VideoModal - 视频弹窗组件
nav:
title: 基础组件
path: /components
group:
path: /
---
# VmsVideo 视频弹窗组件
## 组件使用
<code src="./demos/demo.tsx">
## API
### Column 新增参数
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------------------------------------------- | ------- | ------ |
| ModalInfo| api 参考 Antd Modal 组件 https://ant.design/components/modal-cn#api | | |
| VideoInfo | api参考视频组件VmsVideo的VideoParam | | - |
| JessibucaObj | api参考视频组件VmsVideo的JessibucaObj | | - |
/*
* @Author: 634665781 634665781@qq.com
* @Date: 2023-04-11 13:40:18
* @LastEditors: 634665781 634665781@qq.com
* @LastEditTime: 2023-04-17 11:05:27
* @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, useState } from 'react';
import { Button } from 'antd';
import VideoPopUp from '../index';
const Demo = () => {
const [showModal, setShowModal] = useState(false);
const modalProps = {
ModalInfo: {
open: showModal,
onCancel: () => setShowModal(false),
title: '视频通道预览',
},
VideoInfo: {
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',
},
JessibucaObj: {},
};
return (
<>
<Button onClick={() => setShowModal(true)}>打开弹窗</Button>
<VideoPopUp {...modalProps} />
</>
);
};
export default Demo;
import TestVideo from '@wisdom-components/VmsVideo';
import { Modal } from 'antd';
import React from 'react';
import styles from './index.less';
const VideoPopUp = (props) => {
const { ModalInfo, VideoInfo, JessibucaObj } = props;
const _JessibucaObj = {
operateBtns: {
screenshot: false,
},
loadingText: '演示视频加载中',
decoder: '/JessibucaVideo/decoder.js',
...JessibucaObj,
};
return (
<Modal
title='视频预览'
width="60vw"
wrapClassName={styles.channelModal}
maskClosable={false}
footer={null}
{...ModalInfo}
>
<div className={styles.videobox}>
<TestVideo VideoInfo={VideoInfo} JessibucaObj={_JessibucaObj} />
</div>
</Modal>
);
};
export default VideoPopUp;
@root-entry-name: 'default';
@import '~antd/es/style/themes/index.less';
.channelModal {
.videobox {
height: 100%;
>div {
height: 100% !important;
}
}
:global {
.@{ant-prefix}-modal-body {
height: 70vh;
padding: 0;
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment