@vtx/player 0.0.5 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/index.d.ts +199 -203
- package/dist/index.es.js +2 -2
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/dist/types/api/fetch.d.ts +12 -12
- package/dist/types/api/index.d.ts +15 -16
- package/dist/types/api/types.d.ts +107 -117
- package/dist/types/components/bill-player/index.d.ts +21 -21
- package/dist/types/components/controls/index.d.ts +52 -52
- package/dist/types/components/history-control/index.d.ts +39 -39
- package/dist/types/components/history-player/index.d.ts +31 -31
- package/dist/types/components/live-channel-player/index.d.ts +16 -18
- package/dist/types/components/live-control/index.d.ts +35 -37
- package/dist/types/components/live-player/index.d.ts +22 -22
- package/dist/types/components/player/index.d.ts +84 -84
- package/dist/types/context/index.d.ts +8 -8
- package/dist/types/hooks/useSettings.d.ts +9 -9
- package/dist/types/icons/index.d.ts +54 -54
- package/dist/types/main.d.ts +8 -8
- package/dist/types/utils/index.d.ts +67 -60
- package/package.json +100 -100
package/README.md
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
# vtx-vis
|
|
2
|
-
|
|
1
|
+
# vtx-vis
|
|
2
|
+
|
|
3
3
|
视频业务组件
|
package/dist/index.d.ts
CHANGED
|
@@ -5,221 +5,217 @@ import { VideoType as VideoType$1 } from '@/components/player';
|
|
|
5
5
|
import * as react from 'react';
|
|
6
6
|
import { GetHistoryUrlParams, LoadVideoInfoParams } from '@/api/types';
|
|
7
7
|
|
|
8
|
-
/** 视频流格式 */
|
|
9
|
-
declare type VideoType = 'flv' | 'hls' | 'hk_ws';
|
|
10
|
-
interface ConstructorParams {
|
|
11
|
-
url: string;
|
|
12
|
-
/** 渲染容器 */
|
|
13
|
-
container: HTMLDivElement;
|
|
14
|
-
/** 是否直播,flv.js需要 */
|
|
15
|
-
live?: boolean;
|
|
16
|
-
/** 视频流格式 */
|
|
17
|
-
type?: VideoType;
|
|
18
|
-
/** 开始时间,历史回放需要 */
|
|
19
|
-
startTime?: moment.MomentInput;
|
|
20
|
-
/** 结束时间,历史回放需要 */
|
|
21
|
-
endTime?: moment.MomentInput;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* 视频播放核心类
|
|
25
|
-
*/
|
|
26
|
-
declare class Player {
|
|
27
|
-
/** 视频地址 */
|
|
28
|
-
url: string;
|
|
29
|
-
/** 视频流格式 */
|
|
30
|
-
type: VideoType;
|
|
31
|
-
private player;
|
|
32
|
-
private video;
|
|
33
|
-
/** 开始时间,历史回放需要 */
|
|
34
|
-
private startTime?;
|
|
35
|
-
/** 结束时间,历史回放需要 */
|
|
36
|
-
private endTime?;
|
|
37
|
-
/** 跳转时间,用于处理进度条位置 */
|
|
38
|
-
private seekTime?;
|
|
39
|
-
/** 之前的视频播放速度,用于处理海康音量控制 */
|
|
40
|
-
private preSpeed;
|
|
41
|
-
constructor(params: ConstructorParams);
|
|
42
|
-
/** 播放 */
|
|
43
|
-
play(): Promise<void>;
|
|
44
|
-
/** 回放 */
|
|
45
|
-
playBack(): Promise<void>;
|
|
46
|
-
/** 销毁 */
|
|
47
|
-
destroy(): void;
|
|
48
|
-
/** 截图 */
|
|
49
|
-
capture(captureName?: string, time?: boolean): void;
|
|
50
|
-
/** 尺寸重置 */
|
|
51
|
-
resize(): void;
|
|
52
|
-
/**
|
|
53
|
-
* 设置音量
|
|
54
|
-
* @param value
|
|
55
|
-
*/
|
|
56
|
-
setVolume(value: number): void;
|
|
57
|
-
/**
|
|
58
|
-
* 设置播放速度
|
|
59
|
-
* @param speed
|
|
60
|
-
*/
|
|
61
|
-
setSpeed(speed: 0.5 | 1 | 2): void;
|
|
62
|
-
/**
|
|
63
|
-
* 时间更新事件
|
|
64
|
-
* @param callback 回调函数
|
|
65
|
-
*/
|
|
66
|
-
onTimeUpdate(callback: (currentTime: number) => void): void;
|
|
67
|
-
/** 跳转到 */
|
|
68
|
-
seekTo(time: number): Promise<void>;
|
|
69
|
-
/**
|
|
70
|
-
* 暂停播放
|
|
71
|
-
* @param callback 回调函数
|
|
72
|
-
*/
|
|
73
|
-
pause(callback?: () => void): void;
|
|
74
|
-
/**
|
|
75
|
-
* 恢复播放
|
|
76
|
-
* @param callback 回调函数
|
|
77
|
-
*/
|
|
78
|
-
resume(callback?: () => void): void;
|
|
79
|
-
/**
|
|
80
|
-
* 开始对讲
|
|
81
|
-
* @param url 对讲地址
|
|
82
|
-
*/
|
|
83
|
-
startTalk(url: string): Promise<void>;
|
|
84
|
-
/**
|
|
85
|
-
* 开始对讲
|
|
86
|
-
* @param state 状态
|
|
87
|
-
*/
|
|
88
|
-
stopTalk(): Promise<void>;
|
|
8
|
+
/** 视频流格式 */
|
|
9
|
+
declare type VideoType = 'flv' | 'hls' | 'hk_ws';
|
|
10
|
+
interface ConstructorParams {
|
|
11
|
+
url: string;
|
|
12
|
+
/** 渲染容器 */
|
|
13
|
+
container: HTMLDivElement;
|
|
14
|
+
/** 是否直播,flv.js需要 */
|
|
15
|
+
live?: boolean;
|
|
16
|
+
/** 视频流格式 */
|
|
17
|
+
type?: VideoType;
|
|
18
|
+
/** 开始时间,历史回放需要 */
|
|
19
|
+
startTime?: moment.MomentInput;
|
|
20
|
+
/** 结束时间,历史回放需要 */
|
|
21
|
+
endTime?: moment.MomentInput;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* 视频播放核心类
|
|
25
|
+
*/
|
|
26
|
+
declare class Player {
|
|
27
|
+
/** 视频地址 */
|
|
28
|
+
url: string;
|
|
29
|
+
/** 视频流格式 */
|
|
30
|
+
type: VideoType;
|
|
31
|
+
private player;
|
|
32
|
+
private video;
|
|
33
|
+
/** 开始时间,历史回放需要 */
|
|
34
|
+
private startTime?;
|
|
35
|
+
/** 结束时间,历史回放需要 */
|
|
36
|
+
private endTime?;
|
|
37
|
+
/** 跳转时间,用于处理进度条位置 */
|
|
38
|
+
private seekTime?;
|
|
39
|
+
/** 之前的视频播放速度,用于处理海康音量控制 */
|
|
40
|
+
private preSpeed;
|
|
41
|
+
constructor(params: ConstructorParams);
|
|
42
|
+
/** 播放 */
|
|
43
|
+
play(): Promise<void>;
|
|
44
|
+
/** 回放 */
|
|
45
|
+
playBack(): Promise<void>;
|
|
46
|
+
/** 销毁 */
|
|
47
|
+
destroy(): void;
|
|
48
|
+
/** 截图 */
|
|
49
|
+
capture(captureName?: string, time?: boolean): void;
|
|
50
|
+
/** 尺寸重置 */
|
|
51
|
+
resize(): void;
|
|
52
|
+
/**
|
|
53
|
+
* 设置音量
|
|
54
|
+
* @param value
|
|
55
|
+
*/
|
|
56
|
+
setVolume(value: number): void;
|
|
57
|
+
/**
|
|
58
|
+
* 设置播放速度
|
|
59
|
+
* @param speed
|
|
60
|
+
*/
|
|
61
|
+
setSpeed(speed: 0.5 | 1 | 2 | 4 | 8): void;
|
|
62
|
+
/**
|
|
63
|
+
* 时间更新事件
|
|
64
|
+
* @param callback 回调函数
|
|
65
|
+
*/
|
|
66
|
+
onTimeUpdate(callback: (currentTime: number, speed: number) => void): void;
|
|
67
|
+
/** 跳转到 */
|
|
68
|
+
seekTo(time: number): Promise<void>;
|
|
69
|
+
/**
|
|
70
|
+
* 暂停播放
|
|
71
|
+
* @param callback 回调函数
|
|
72
|
+
*/
|
|
73
|
+
pause(callback?: () => void): void;
|
|
74
|
+
/**
|
|
75
|
+
* 恢复播放
|
|
76
|
+
* @param callback 回调函数
|
|
77
|
+
*/
|
|
78
|
+
resume(callback?: () => void): void;
|
|
79
|
+
/**
|
|
80
|
+
* 开始对讲
|
|
81
|
+
* @param url 对讲地址
|
|
82
|
+
*/
|
|
83
|
+
startTalk(url: string): Promise<void>;
|
|
84
|
+
/**
|
|
85
|
+
* 开始对讲
|
|
86
|
+
* @param state 状态
|
|
87
|
+
*/
|
|
88
|
+
stopTalk(): Promise<void>;
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
interface VtxPlayerProps$1 {
|
|
92
|
-
/** 视频流地址 */
|
|
93
|
-
url: string;
|
|
94
|
-
/** 宽度 */
|
|
95
|
-
width?: number;
|
|
96
|
-
/** 高度 */
|
|
97
|
-
height?: number;
|
|
98
|
-
/** 视频流格式,如果为空则根据url自行判断 */
|
|
99
|
-
type?: VideoType$1;
|
|
100
|
-
/** 截图文件名 */
|
|
101
|
-
captureName?: string;
|
|
102
|
-
/** 对讲地址 */
|
|
103
|
-
talkUrl?: string;
|
|
104
|
-
/** 云台控制 */
|
|
105
|
-
cloudParams?: CloudControlPanelProps;
|
|
106
|
-
}
|
|
91
|
+
interface VtxPlayerProps$1 {
|
|
92
|
+
/** 视频流地址 */
|
|
93
|
+
url: string;
|
|
94
|
+
/** 宽度 */
|
|
95
|
+
width?: number;
|
|
96
|
+
/** 高度 */
|
|
97
|
+
height?: number;
|
|
98
|
+
/** 视频流格式,如果为空则根据url自行判断 */
|
|
99
|
+
type?: VideoType$1;
|
|
100
|
+
/** 截图文件名 */
|
|
101
|
+
captureName?: string;
|
|
102
|
+
/** 对讲地址 */
|
|
103
|
+
talkUrl?: string;
|
|
104
|
+
/** 云台控制 */
|
|
105
|
+
cloudParams?: CloudControlPanelProps;
|
|
106
|
+
}
|
|
107
107
|
declare const LivePlayer: (props: VtxPlayerProps$1) => JSX.Element;
|
|
108
108
|
|
|
109
|
-
declare type HistoryPlayerHandle = {
|
|
110
|
-
/**
|
|
111
|
-
* 跳转,目前仅支持海康视频跳转
|
|
112
|
-
*/
|
|
113
|
-
seekTo: (time: string) => Promise<void>;
|
|
114
|
-
};
|
|
115
|
-
interface VtxPlayerProps {
|
|
116
|
-
/** 视频流地址 */
|
|
117
|
-
url: string;
|
|
118
|
-
/** 视频流格式,如果为空则根据url自行判断 */
|
|
119
|
-
type?: VideoType$1;
|
|
120
|
-
/** 开始时间,格式为:YYYY-MM-DD HH:mm:ss */
|
|
121
|
-
startTime: string;
|
|
122
|
-
/** 结束时间,格式为:YYYY-MM-DD HH:mm:ss */
|
|
123
|
-
endTime: string;
|
|
124
|
-
/** 宽度 */
|
|
125
|
-
width?: number;
|
|
126
|
-
/** 高度 */
|
|
127
|
-
height?: number;
|
|
128
|
-
/** 截图文件名 */
|
|
129
|
-
captureName?: string;
|
|
130
|
-
/** 控制条bottom */
|
|
131
|
-
controlBottom?: number;
|
|
132
|
-
/** 播放器进度回调,time:YYYY-MM-DD HH:mm:ss */
|
|
133
|
-
onTimeChange?: (time: string) => void;
|
|
134
|
-
}
|
|
109
|
+
declare type HistoryPlayerHandle = {
|
|
110
|
+
/**
|
|
111
|
+
* 跳转,目前仅支持海康视频跳转
|
|
112
|
+
*/
|
|
113
|
+
seekTo: (time: string) => Promise<void>;
|
|
114
|
+
};
|
|
115
|
+
interface VtxPlayerProps {
|
|
116
|
+
/** 视频流地址 */
|
|
117
|
+
url: string;
|
|
118
|
+
/** 视频流格式,如果为空则根据url自行判断 */
|
|
119
|
+
type?: VideoType$1;
|
|
120
|
+
/** 开始时间,格式为:YYYY-MM-DD HH:mm:ss */
|
|
121
|
+
startTime: string;
|
|
122
|
+
/** 结束时间,格式为:YYYY-MM-DD HH:mm:ss */
|
|
123
|
+
endTime: string;
|
|
124
|
+
/** 宽度 */
|
|
125
|
+
width?: number;
|
|
126
|
+
/** 高度 */
|
|
127
|
+
height?: number;
|
|
128
|
+
/** 截图文件名 */
|
|
129
|
+
captureName?: string;
|
|
130
|
+
/** 控制条bottom */
|
|
131
|
+
controlBottom?: number;
|
|
132
|
+
/** 播放器进度回调,time:YYYY-MM-DD HH:mm:ss speed:播放速率 */
|
|
133
|
+
onTimeChange?: (time: string, speed: number) => void;
|
|
134
|
+
}
|
|
135
135
|
declare const HistoryPlayer: react.ForwardRefExoticComponent<VtxPlayerProps & react.RefAttributes<HistoryPlayerHandle>>;
|
|
136
136
|
|
|
137
|
-
declare type LiveControlHandle = {
|
|
138
|
-
/** 加载视频 */
|
|
139
|
-
load: (channel: ChannelType) => void;
|
|
140
|
-
/** 卸载视频,参数为通道编号 */
|
|
141
|
-
unLoad: (channelNum: string) => void;
|
|
142
|
-
/** 一次加载多个视频,适用于初始化 */
|
|
143
|
-
multiLoad: (channels: ChannelType[]) => void;
|
|
144
|
-
};
|
|
145
|
-
interface LiveControlProps {
|
|
146
|
-
/** 展开/收缩按钮回调 */
|
|
147
|
-
onExpandChange?: (expand: boolean) => void;
|
|
148
|
-
/** 视频关闭回调,参数为通道编号数组 */
|
|
149
|
-
onChannelChange?: (channelSNum: string[]) => void;
|
|
150
|
-
/** 宽度 */
|
|
151
|
-
width?: number | string;
|
|
152
|
-
/** 高度 */
|
|
153
|
-
height?: number | string;
|
|
154
|
-
/** 轮询频率 */
|
|
155
|
-
polling?: number;
|
|
156
|
-
}
|
|
157
|
-
declare type ChannelType = {
|
|
158
|
-
/** 通道号 */
|
|
159
|
-
channelNum: string;
|
|
160
|
-
/** 设备ID */
|
|
161
|
-
deviceId?: string;
|
|
162
|
-
/**
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
* 实时分屏组件
|
|
169
|
-
*/
|
|
137
|
+
declare type LiveControlHandle = {
|
|
138
|
+
/** 加载视频 */
|
|
139
|
+
load: (channel: ChannelType) => void;
|
|
140
|
+
/** 卸载视频,参数为通道编号 */
|
|
141
|
+
unLoad: (channelNum: string) => void;
|
|
142
|
+
/** 一次加载多个视频,适用于初始化 */
|
|
143
|
+
multiLoad: (channels: ChannelType[]) => void;
|
|
144
|
+
};
|
|
145
|
+
interface LiveControlProps {
|
|
146
|
+
/** 展开/收缩按钮回调 */
|
|
147
|
+
onExpandChange?: (expand: boolean) => void;
|
|
148
|
+
/** 视频关闭回调,参数为通道编号数组 */
|
|
149
|
+
onChannelChange?: (channelSNum: string[]) => void;
|
|
150
|
+
/** 宽度 */
|
|
151
|
+
width?: number | string;
|
|
152
|
+
/** 高度 */
|
|
153
|
+
height?: number | string;
|
|
154
|
+
/** 轮询频率 */
|
|
155
|
+
polling?: number | undefined;
|
|
156
|
+
}
|
|
157
|
+
declare type ChannelType = {
|
|
158
|
+
/** 通道号 */
|
|
159
|
+
channelNum: string;
|
|
160
|
+
/** 设备ID */
|
|
161
|
+
deviceId?: string;
|
|
162
|
+
/** 协议 */
|
|
163
|
+
protocol?: string;
|
|
164
|
+
};
|
|
165
|
+
/**
|
|
166
|
+
* 实时分屏组件
|
|
167
|
+
*/
|
|
170
168
|
declare const LiveControl: react.ForwardRefExoticComponent<LiveControlProps & react.RefAttributes<LiveControlHandle>>;
|
|
171
169
|
|
|
172
|
-
declare type HistoryControlHandle = {
|
|
173
|
-
load: (channel: GetHistoryUrlParams) => void;
|
|
174
|
-
};
|
|
175
|
-
interface HistoryControlProps {
|
|
176
|
-
/** 宽度 */
|
|
177
|
-
width?: number;
|
|
178
|
-
/** 高度 */
|
|
179
|
-
height?: number;
|
|
180
|
-
/** 展开/收缩按钮回调 */
|
|
181
|
-
onExpandChange?: (expand: boolean) => void;
|
|
182
|
-
/** 播放器进度回调,time:YYYY-MM-DD HH:mm:ss */
|
|
183
|
-
onTimeChange?: (time: string) => void;
|
|
184
|
-
}
|
|
185
|
-
/**
|
|
186
|
-
* 历史视频控制器
|
|
187
|
-
*/
|
|
170
|
+
declare type HistoryControlHandle = {
|
|
171
|
+
load: (channel: GetHistoryUrlParams) => void;
|
|
172
|
+
};
|
|
173
|
+
interface HistoryControlProps {
|
|
174
|
+
/** 宽度 */
|
|
175
|
+
width?: number;
|
|
176
|
+
/** 高度 */
|
|
177
|
+
height?: number;
|
|
178
|
+
/** 展开/收缩按钮回调 */
|
|
179
|
+
onExpandChange?: (expand: boolean) => void;
|
|
180
|
+
/** 播放器进度回调,time:YYYY-MM-DD HH:mm:ss */
|
|
181
|
+
onTimeChange?: (time: string) => void;
|
|
182
|
+
}
|
|
183
|
+
/**
|
|
184
|
+
* 历史视频控制器
|
|
185
|
+
*/
|
|
188
186
|
declare const HistoryControl: react.ForwardRefExoticComponent<HistoryControlProps & react.RefAttributes<HistoryControlHandle>>;
|
|
189
187
|
|
|
190
|
-
interface BillPlayerProps {
|
|
191
|
-
/** 参数 */
|
|
192
|
-
params: LoadVideoInfoParams;
|
|
193
|
-
/** 宽度 */
|
|
194
|
-
width?: string | number;
|
|
195
|
-
/** 高度 */
|
|
196
|
-
height?: string | number;
|
|
197
|
-
/** 是否显示实时视频,默认为true */
|
|
198
|
-
live?: boolean;
|
|
199
|
-
/** 是否显示历史视频,默认为true */
|
|
200
|
-
history?: boolean;
|
|
201
|
-
/** 实时默认播放 */
|
|
202
|
-
defaultLivePlay?: boolean;
|
|
203
|
-
/** 历史默认播放 */
|
|
204
|
-
defaultHistoryPlay?: boolean;
|
|
205
|
-
}
|
|
188
|
+
interface BillPlayerProps {
|
|
189
|
+
/** 参数 */
|
|
190
|
+
params: LoadVideoInfoParams;
|
|
191
|
+
/** 宽度 */
|
|
192
|
+
width?: string | number;
|
|
193
|
+
/** 高度 */
|
|
194
|
+
height?: string | number;
|
|
195
|
+
/** 是否显示实时视频,默认为true */
|
|
196
|
+
live?: boolean;
|
|
197
|
+
/** 是否显示历史视频,默认为true */
|
|
198
|
+
history?: boolean;
|
|
199
|
+
/** 实时默认播放 */
|
|
200
|
+
defaultLivePlay?: boolean;
|
|
201
|
+
/** 历史默认播放 */
|
|
202
|
+
defaultHistoryPlay?: boolean;
|
|
203
|
+
}
|
|
206
204
|
declare const BillPlayer: (props: BillPlayerProps) => JSX.Element;
|
|
207
205
|
|
|
208
|
-
interface LiveChannelPlayerProps {
|
|
209
|
-
/** 通道ID */
|
|
210
|
-
channelId: string;
|
|
211
|
-
/**
|
|
212
|
-
|
|
213
|
-
/**
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
*
|
|
220
|
-
|
|
221
|
-
* @returns
|
|
222
|
-
*/
|
|
206
|
+
interface LiveChannelPlayerProps {
|
|
207
|
+
/** 通道ID */
|
|
208
|
+
channelId: string;
|
|
209
|
+
/** 宽度 */
|
|
210
|
+
width?: number;
|
|
211
|
+
/** 高度 */
|
|
212
|
+
height?: number;
|
|
213
|
+
}
|
|
214
|
+
/**
|
|
215
|
+
* 基于通道ID的实时播放器
|
|
216
|
+
* @param props
|
|
217
|
+
* @returns
|
|
218
|
+
*/
|
|
223
219
|
declare const LiveChannelPlayer: (props: LiveChannelPlayerProps) => JSX.Element | undefined;
|
|
224
220
|
|
|
225
221
|
export { BillPlayer, HistoryControl, HistoryPlayer, LiveChannelPlayer, LiveControl, LivePlayer, Player };
|