ezuikit-js 8.1.1-alpha.1 → 8.1.1-alpha.3

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 CHANGED
@@ -1,145 +1,112 @@
1
- # [EZUIKit-JavaScript-npm][ezuikit-js]
1
+ # [EZUIKit-JavaScript-npm][ezuikit-js]
2
2
 
3
- ![Download](https://img.shields.io/npm/dm/ezuikit-js.svg)
4
- ![Version](https://img.shields.io/npm/v/ezuikit-js.svg)
5
- ![License](https://img.shields.io/npm/l/ezuikit-js.svg)
6
- ![Build Demos](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/workflows/build-demos/badge.svg)
3
+ > 轻应用npm版本,降低接入难度,适配自定义UI,适配主流框架
7
4
 
8
- > 轻应用 npm 版本,降低接入难度,适配自定义 UI,适配主流框架
5
+ > 低延时预览,云存储回放,SD卡回放
9
6
 
10
- > 低延时预览,云存储回放,SD 卡回放
7
+ > 功能API丰富,如:播放控制,音频控制,视频截图,实时获取视频OSDTime,视频录制,设备对讲,电子放大,全屏等
11
8
 
12
- > 功能 API 丰富,如:播放控制,音频控制,视频截图,实时获取视频 OSDTime,视频录制,设备对讲,电子放大,全屏等
13
9
 
14
- <p style="color: yellow;">hls和flv 不在维护更新,后续版本中会被移除, flv 可以使用 <a href="https://www.npmjs.com/package/ezuikit-flv" block="_target">ezuikit-flv</a>, hls 可以使用 <a href="https://www.npmjs.com/package/@ezuikit/player-hls" block="_target">@ezuikit/player-hls</a></p>
15
- <p style="color: yellow;">hls和flv 不在维护更新,后续版本中会被移除, flv 可以使用 <a href="https://www.npmjs.com/package/ezuikit-flv" block="_target">ezuikit-flv</a>, hls 可以使用 <a href="https://www.npmjs.com/package/@ezuikit/player-hls" block="_target">@ezuikit/player-hls</a></p>
16
- <p style="color: yellow;">hls和flv 不在维护更新,后续版本中会被移除, flv 可以使用 <a href="https://www.npmjs.com/package/ezuikit-flv" block="_target">ezuikit-flv</a>, hls 可以使用 <a href="https://www.npmjs.com/package/@ezuikit/player-hls" block="_target">@ezuikit/player-hls</a></p>
17
10
 
18
- ### 获取 ezuikit-js
11
+ ### 获取ezuikit-js
19
12
 
20
13
  ```
21
- npm install ezuikit-js
22
-
23
- # yarn
24
-
25
- yarn add ezuikit-js
26
-
27
- # pnpm
28
-
29
- pnpm add ezuikit-js
14
+ $ npm install ezuikit-js
30
15
  ```
31
-
32
- ### 引入 ezuikit-js
16
+ ### 引入ezuikit-js
33
17
 
34
18
  ```
35
19
  import EZUIKit from 'ezuikit-js';
36
20
  ```
37
21
 
38
22
  #### 如果你使用原生方法,可以通过标签引用
39
-
40
23
  ```
41
- <!-- umd -->
42
24
  <script src="./ezuikit.js"></script>
43
25
  ```
44
26
 
45
27
  ### 开始使用 - 初始化
28
+ >基本使用
46
29
 
47
- > 基本使用
48
-
49
- 创建 DOM
30
+ 创建DOM
50
31
 
51
32
  ```
52
33
  <div id="video-container"></div>
53
34
  ```
54
35
 
55
36
  ## 播放器初始化
56
-
57
37
  ### 直播
58
-
59
- ```js
60
- var player = new EZUIKit.EZUIKitPlayer({
61
- id: "video-container", // 视频容器ID
62
- accessToken:
63
- "at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz",
64
- url: "ezopen://open.ys7.com/G39444019/1.live",
65
- width: 600,
66
- height: 400,
67
- handleError: (err) => {
68
- if (err.type === "handleRunTimeInfoError" && err.data.nErrorCode === 5) {
69
- // 加密设备密码错误
70
- }
71
- },
72
- });
73
38
  ```
74
-
39
+ var player = new EZUIKit.EZUIKitPlayer({
40
+ id: 'video-container', // 视频容器ID
41
+ accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
42
+ url: 'ezopen://open.ys7.com/AA2615287/1.live',
43
+ width: 600,
44
+ height: 400,
45
+ })
46
+ ```
75
47
  ### 回放
76
-
77
- ```js
78
- var player = new EZUIKit.EZUIKitPlayer({
79
- id: "video-container", // 视频容器ID
80
- width: 600,
81
- height: 400,
82
- accessToken:
83
- "at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz",
84
- url: "ezopen://open.ys7.com/G39444019/1.rec",
85
- });
86
48
  ```
87
-
49
+ var player = new EZUIKit.EZUIKitPlayer({
50
+ id: 'video-container', // 视频容器ID
51
+ width: 600,
52
+ height: 400,
53
+ accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
54
+ url: 'ezopen://open.ys7.com/AA2615287/1.rec'
55
+ })
56
+ ```
88
57
  #### tips
58
+ 为方便开发者快速接入
89
59
 
90
- 为方便开发者快速接入
91
-
92
- 我们提供了测试 accessToken,测试播放地址,并提供了几种常用场景使用示例。你可以通过使用示例,使用测试播放地址,测试 accessToken,在你的应用快速接入。
60
+ 我们提供了测试accessToken,测试播放地址,并提供了几种常用场景使用示例。你可以通过使用示例,使用测试播放地址,测试accessToken,在你的应用快速接入。
93
61
 
94
- <b>测试播放地址:</b> ezopen://open.ys7.com/G39444019/1.live
62
+ <b>测试播放地址:</b> ezopen://open.ys7.com/AA2615287/1.live
95
63
 
96
- 你可以通过以下地址获取到测试 accessToken <a href="https://open.ys7.com/jssdk/ezopen/demo/token" target="_blank">获取测试 accessToken</a> 用来播放上述测试播放地址。
97
- 当前设备有可能下线或被移除了, 如果自己有设备优先使用自己的设备进行测试。
64
+ 你可以通过以下地址获取到测试accessToken <a href="https://open.ys7.com/jssdk/ezopen/demo/token" target="_blank">获取测试accessToken</a> 用来播放上述测试播放地址。
98
65
 
99
- #### 最佳实践 tips
66
+ #### 最佳实践tips
100
67
 
101
- 1. 我们在 v0.6.2 及以上版本持用户通过开启谷歌实验室特性启动多线程解码,多线程模式将大大提升解码效率,降低解码内存消耗。
68
+ 1. 我们在v0.6.2及以上版本持用户通过开启谷歌实验室特性启动多线程解码,多线程模式将大大提升解码效率,降低解码内存消耗。
102
69
 
103
- > [开启多线程方式 1](https://open.ys7.com/help/384)(https://open.ys7.com/help/384)
70
+ >>[开启多线程方式1](https://open.ys7.com/help/384) (https://open.ys7.com/help/384)
104
71
 
105
- > [开启多线程方式 2](https://open.ys7.com/help/385)(https://open.ys7.com/help/385)
72
+ >>[开启多线程方式2](https://open.ys7.com/help/385)(https://open.ys7.com/help/385)
106
73
 
107
- 2. 视频解码库默认从开放平台远程拉取,你可以将解码库放到本地或者你的服务内,可以提升加载解码库速度。
74
+ 2. 视频解码库默认从开放平台远程拉取,你可以将解码库放到本地或者你的服务内,可以提升加载解码库速度。
108
75
 
109
- > <b>使用本地解码库提升加载速度</b> 开发者需要自己设置静态资源文件地址, 参考 `staticPath`的配置
76
+ >> <b>使用本地解码库提升加载速度</b> <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/localDecoder.html" target="_blank">本地解码库示例</a>
110
77
 
111
78
  ### 使用示例
79
+ > 1. 快速创建视频播放页面
112
80
 
113
- > 1. 快速创建视频播放页面
81
+ &emsp;&emsp;&emsp;&emsp;<b>基本使用:</b> <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/base.html" target="_blank">基本使用示例</a>
114
82
 
115
- &emsp;&emsp;&emsp;&emsp;<b>基本使用:</b> <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/index.html" target="_blank">基本使用示例</a>
83
+ > 2. 前往[开放平台轻应用模板管理页](https://open.ys7.com/console/ezuikit/template.html)创建一个主题,可以动态配置你的播放主题,控件,示例展示了获取一个主题后使用示例。
116
84
 
117
- > 2. 前往[开放平台轻应用模板管理页](https://open.ys7.com/console/ezuikit/template.html)创建一个主题,可以动态配置你的播放主题,控件,示例展示了获取一个主题后使用示例。
85
+ &emsp;&emsp;&emsp;&emsp;<b>自定义主题:</b> <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/template.html" target="_blank">自定义主题示例</a>
118
86
 
119
- &emsp;&emsp;&emsp;&emsp;<b>自定义主题:</b> <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/template.html" target="_blank">自定义主题示例</a>
87
+ > 3. 你可以本地创建一个主题配置,可以本地配置你的播放主题,控件,示例展示了本地配置项使用示例。
120
88
 
121
- > 3. 你可以本地创建一个主题配置,可以本地配置你的播放主题,控件,示例展示了本地配置项使用示例。
89
+ &emsp;&emsp;&emsp;&emsp;<b>本地主题配置:</b> <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/themeData.html" target="_blank">本地主题配置示例</a>
122
90
 
123
- &emsp;&emsp;&emsp;&emsp;<b>本地主题配置:</b> <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/themeData.html" target="_blank">本地主题配置示例</a>
91
+ > 4. 我们提供了一些通用场景的主题,PC端预览,PC端回放,移动端预览,移动端回放,你也可以直接使用。
124
92
 
125
- > 4. 我们提供了一些通用场景的主题,PC 端预览,PC 端回放,移动端预览,移动端回放,你也可以直接使用。
126
93
 
127
- &emsp;&emsp;&emsp;&emsp;<b>PC 端预览-固定主题:</b>
128
- <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/pcLive.html" target="_blank">PC 端预览-固定主题示例</a>
94
+ &emsp;&emsp;&emsp;&emsp;<b>PC端预览-固定主题:</b>
95
+ <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/pcLive.html" target="_blank">PC端预览-固定主题示例</a>
129
96
 
130
- &emsp;&emsp;&emsp;&emsp;<b>PC 端回放-固定主题:</b>
131
- <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/pcRec.html" target="_blank">PC 端回放-固定主题示例</a>
97
+ &emsp;&emsp;&emsp;&emsp;<b>PC端回放-固定主题:</b>
98
+ <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/pcRec.html" target="_blank">PC端回放-固定主题示例</a>
132
99
 
133
100
  &emsp;&emsp;&emsp;&emsp;<b>移动端预览-固定主题:</b>
134
- <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/mobileLive.html" target="_blank">移动端预览-固定主题示例</a>
101
+ <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/mobileLive.html" target="_blank">移动端预览-固定主题示例</a>
135
102
 
136
103
  &emsp;&emsp;&emsp;&emsp;<b>移动端回放-固定主题:</b>
137
- <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/mobileRec.html" target="_blank">移动端回放-固定主题示例</a>
104
+ <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/mobileRec.html" target="_blank">移动端回放-固定主题示例</a>
138
105
 
139
- > 同一个页面播放多个视频,可以参考:
106
+ >同一个页面播放多个视频,可以参考:
140
107
 
141
108
  &emsp;&emsp;&emsp;&emsp;<b>单页面多实例(视频多窗口):</b>
142
- <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/multi.html" target="_blank">单页面多实例(视频多窗口)示例</a>
109
+ <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/multi.html" target="_blank">单页面多实例(视频多窗口)示例</a>
143
110
 
144
111
  #### 附录: 初始化参数说明
145
112
 
@@ -150,33 +117,24 @@ var player = new EZUIKit.EZUIKitPlayer({
150
117
  <tr><td>url</td><td>String</td><td>
151
118
 
152
119
  #### 直播
153
-
154
120
  ##### 标清
155
-
156
121
  ezopen://open.ys7.com/${设备序列号}/{通道号}.live<br/>
157
-
158
122
  ##### 高清
159
-
160
123
  ezopen://open.ys7.com/${设备序列号}/{通道号}.hd.live<br/>
161
124
 
162
125
  #### 回放
163
-
164
- ##### sd 卡回放
165
-
166
- 初始化参数 url 值为:<br/>
126
+ ##### sd卡回放
127
+ 初始化参数 url值为:<br/>
167
128
  ezopen://open.ys7.com/${设备序列号}/{通道号}.rec?begin=yyyyMMddhhmmss
168
-
169
129
  ##### 云存储回放
170
-
171
- 初始化参数 url 值为:<br/>
130
+ 初始化参数 url值为:<br/>
172
131
  ezopen://open.ys7.com/${设备序列号}/{通道号}.cloud.rec?begin=yyyyMMddhhmmss
173
- 视频 ezopen 协议播放地址 详见:<a href="https://open.ys7.com/help/23" target="_blank">ezopen 协议</a> </td><td>Y</td></tr>
174
-
132
+ 视频ezopen协议播放地址 详见:<a href="http://open.ys7.com/doc/zh/readme/ezopen.html" target="_blank">ezopen协议</a> </td><td>Y</td></tr>
175
133
  <tr><td>audio</td><td>boolean</td><td>是否默认开启声音 true:打开(默认) false:关闭 </td><td>N</td></tr>
176
134
  <tr><td>width</td><td>int</td><td>视频宽度,默认值为容器容器DOM宽度 </td><td>Y</td></tr>
177
135
  <tr><td>height</td><td>int</td><td>视频高度,默认值为容器容器DOM高度</td><td>Y</td></tr>
178
- <tr><td>staticPath</td><td>string</td><td>设置静态资源地址, 自定义可以自行下载 `ezuikit_static`放置在自己的服务器下, 设置 {staticPath: "/ezuikit_static"} </td><td>N</td></tr>
179
- <tr><td>template</td><td>String</td><td>
136
+ <tr><td>template</td><td>String</td><td>
137
+
180
138
 
181
139
  <table style="display:inline-block;width:700px">
182
140
  <tr><th>模板值</th><th>描述</th></tr>
@@ -194,12 +152,12 @@ ezopen://open.ys7.com/${设备序列号}/{通道号}.cloud.rec?begin=yyyyMMddhhm
194
152
  <tr><td>自定义themeId</td><td>自定义主题,<a href="https://open.ys7.com/console/ezuikit/template.html" target="_blank">前往开放平台控制台配置页面获取</a><br />(v0.6.2版本及以上支持,建议使用 自定义themeId,或者使用themeData本地<br />配置);</td></tr>
195
153
  </table>
196
154
 
197
- </td><td>N</td></tr>
155
+ </td></tr>
198
156
  <tr><td>themeData</td><td>Object</td><td>
199
157
  themeData将主题数据本地化,设置本地数据,需要删除template参数 <br />
200
- 你可以通过themeData修改按钮位置,颜色,头部底部颜色等配置。
158
+ 你可以通过themeData修改按钮位置,颜色,头部底部颜色等配置。
201
159
 
202
- 配置示例:
160
+ 配置示例:
203
161
 
204
162
  <pre><code>
205
163
 
@@ -324,198 +282,142 @@ themeData将主题数据本地化,设置本地数据,需要删除template参
324
282
  </td><td>N</td></tr>
325
283
  <tr><td>plugin</td><td>String</td><td>按需加载插件,可选值: talk:对讲,示例:plugin:["talk"] </td><td>N</td></tr>
326
284
  <tr><td>handleSuccess</td><td>function</td><td>自动播放成功回调</td><td>N</td></tr>
327
- <tr><td>handleError</td><td>function</td><td>错误回调</td><td>N</td></tr>
328
285
  <tr><td>seekFrequency </td><td>function</td><td>为避免频繁拖动播放异常,可设置模板回放时间轴拖动防抖间隔,默认值为2000(2秒),可取2000(2秒),3000(3秒),4000(4秒),5000(5秒)</td><td>N</td></tr>
329
- <tr><td>language</td><td>String</td><td>多语言 (zh | en), 默认zh (v8.0.8版本及以上支持)</td><td>N</td></tr>
330
286
  </table>
331
287
 
332
- ### 方法调用
333
288
 
334
- > 同步方法(方式 1)
335
- > 方法支持通过 promise 回调,可通过回调方式执行下一步动作(方式 2)。
289
+ ### 方法调用
290
+ > 同步方法(方式1)
291
+ > 方法支持通过promise回调,可通过回调方式执行下一步动作(方式2)。
336
292
 
337
293
  #### 开始播放
338
-
339
- ```js
340
- // 方式1
341
- player.play();
342
- // 方式2
343
- player.play().then(() => {
344
- console.log("执行播放成功后其他动作");
345
- });
346
294
  ```
347
-
295
+ // 方式1
296
+ player.play();
297
+ // 方式2
298
+ player.play()
299
+ .then(()=>{
300
+ console.log("执行播放成功后其他动作");
301
+ });
302
+ ```
348
303
  #### 停止播放
349
304
 
350
- ```js
351
- // 方式1
352
- player.stop();
353
- // 方式2
354
- player.stop().then(() => {
355
- console.log("执行停止成功后其他动作");
356
- });
357
305
  ```
358
-
306
+ // 方式1
307
+ player.stop();
308
+ // 方式2
309
+ player.stop()
310
+ .then(()=>{
311
+ console.log("执行停止成功后其他动作");
312
+ });
313
+ ```
359
314
  #### 开启声音
360
315
 
361
- ```js
362
- // 方式1
363
- player.openSound();
364
- // 方式2
365
- player.openSound().then(() => {
366
- console.log("执行开启声音成功后其他动作");
367
- });
368
316
  ```
369
-
370
- #### 关闭声音
371
-
372
- ```js
373
- // 方式1
374
- player.closeSound();
317
+ // 方式1
318
+ player.openSound();
319
+ // 方式2
320
+ player.openSound()
321
+ .then(()=>{
322
+ console.log("执行开启声音成功后其他动作");
323
+ });
375
324
  ```
376
-
377
325
  #### 开始录制
378
-
379
- > 因录制解码库加载限制,录制库加载需要 3S 秒左右,请保证录制时长需要大于 5 秒。
326
+ > 因录制解码库加载限制,录制库加载需要3S秒左右,请保证录制时长需要大于5秒。
380
327
  > 录制文件需要使用播放器,播放器下载地址 <a href="https://service.ys7.com/downloadInfoSite/admin">播放器下载</a>
381
-
382
- ```js
383
- // 方式1
384
- player.startSave("唯一文件名");
385
- // 方式2
386
- player.startSave("唯一文件名").then(() => {
387
- console.log("执行开始录制成功后其他动作");
388
- });
389
- ```
390
-
391
- #### 停止录制并下载文件
392
-
393
- ```js
394
- // 方式1
395
- player.stopSave();
396
- // 方式2
397
- player.stopSave().then(() => {
398
- console.log("执行停止录制成功后其他动作");
399
- });
400
328
  ```
401
-
402
- #### 抓图
403
-
404
- ```js
405
- // 方式1 - 下载到本地
406
- player.capturePicture("文件名");
407
- // 方式2 - 返回base64格式
408
- const capCallback = (data) => {
409
- console.log("data", data);
410
- };
411
- player.capturePicture("default", capCallback);
329
+ // 方式1
330
+ player.startSave("唯一文件名");
331
+ // 方式2
332
+ player.startSave("唯一文件名")
333
+ .then(()=>{
334
+ console.log("执行开始录制成功后其他动作");
335
+ });
412
336
  ```
337
+ #### 停止录制并下载文件
413
338
 
414
- #### 开始对讲
415
-
416
- ```js
417
- player.startTalk();
418
339
  ```
419
-
420
- #### 结束对讲
421
-
422
- ```js
423
- player.stopTalk();
340
+ // 方式1
341
+ player.stopSave();
342
+ // 方式2
343
+ player.stopSave()
344
+ .then(()=>{
345
+ console.log("执行停止录制成功后其他动作");
346
+ });
424
347
  ```
425
-
426
- #### 对讲设置麦克风增益
348
+ #### 抓图
427
349
 
428
350
  ```
429
- // 设置音频增益系数 0 ~ 10
430
- player.setVolumeGain(volume);
351
+ // 方式1 - 下载到本地
352
+ player.capturePicture("文件名");
353
+ // 方式2 - 返回base64格式
354
+ const capCallback = (data) => {
355
+ console.log("data",data)
356
+ }
357
+ player.capturePicture('default',capCallback)
431
358
  ```
432
-
433
- #### 获取麦克风权限
359
+ #### 开始对讲
434
360
 
435
361
  ```
436
- player.getMicrophonePermission().then(data => {
437
- if (data.code === 0) {
438
- // 成功....
439
- }
440
- })
362
+ player.startTalk();
441
363
  ```
442
364
 
443
- #### 获取麦克风列表
365
+ #### 结束对讲
444
366
 
445
367
  ```
446
- // 需要在麦克风已授权的情况下调用,才能获取到麦克风列表,可以和getMicrophonePermission配合使用,或在初始化后先调用getMicrophonePermission获取授权
447
- player.getMicrophonesList().then(data => {
448
- if (data.code === 0) {
449
- // 成功....
450
- }
451
- })
368
+ player.stopTalk();
452
369
  ```
453
370
 
454
- #### 切换麦克风
371
+ #### 全屏
455
372
 
456
373
  ```
457
- // microphoneId 为获取到的麦克风列表中的deviceId,如果当前处于对讲中,调用setProfile会先关闭,重新发起对讲
458
- player.setProfile({ microphoneId })
374
+ player.fullScreen();
459
375
  ```
460
-
461
- #### 监听麦克风音量变化
376
+ #### 取消全屏
462
377
 
463
378
  ```
464
- player.eventEmitter.on('volumeChange', ({ data }) => {
465
- // 动态显示音柱,100ms触发一次
466
- console.log(`${data * 100}%`)
467
- })
468
- ```
469
-
470
- #### 全屏
471
-
472
- ```js
473
- player.fullScreen();
379
+ player.cancelFullScreen();
474
380
  ```
381
+ #### 获取OSD时间
475
382
 
476
- #### 取消全屏
477
-
478
- ```js
479
- player.cancelFullScreen();
480
383
  ```
481
-
482
- #### 获取 OSD 时间
483
-
484
- ```js
485
- player.getOSDTime().then((time) => {
486
- console.log("获取到的当前播放时间", time);
487
- });
384
+ player.getOSDTime()
385
+ .then((time)=>{
386
+ console.log("获取到的当前播放时间", time);
387
+ });
488
388
  ```
489
389
 
490
390
  #### 切换地址播放
491
391
 
492
- > 可用于在播放中切换设备,切换播放参数,以及直播切换回放等。请注意,频繁切换可能导致异常,切换间隔至少需要 1
392
+ > 可用于在播放中切换设备,切换播放参数,以及直播切换回放等。请注意,频繁切换可能导致异常,切换间隔至少需要1秒
493
393
 
494
- ```js
495
- player.changePlayUrl(options).then(() => {
496
- console.log("切换成功");
497
- });
498
394
  ```
395
+ player.changePlayUrl(options)
396
+ .then(()=>{
397
+ console.log("切换成功")
398
+ });
399
+ ```
400
+ options参数说明
499
401
 
500
- options 参数说明
402
+ |参数名|类型|是否必选|默认值|描述|
403
+ |:--|:--|:--|:--|:--|
404
+ |type| String| Y|无|播放地址类型,"live":预览,"rec":回放;“cloud.rec”:云存储回放|
405
+ |deviceSerial | String | Y |无|设备序列号,存在英文字母的设备序列号,字母需为大写|
406
+ |channelNo | int | Y | 无 | 通道号|
407
+ |accessToken| String| N | 初始化时获取 | 授权过程获取的access_token|
408
+ |hd | boolean | N |初始化时获取|是否为高清 true-主码流(高清) false-子码流(标清) |
409
+ |validCode |String |N| 初始化时获取 | 设备验证码(加密设备播放需要输入验证码)|
410
+ |validCode |String |N| 初始化时获取 | 设备验证码(加密设备播放需要输入验证码)|
411
+ |begin| String |N|初始化时获取|type类型为回放有效,开始时间 格式为“YYYYMMDDHHmmss” |
412
+ |end| String | N| 初始化时获取|type类型为回放有效,结束时间 格式为 “YYYYMMDDHHmmss” |
501
413
 
502
- | 参数名 | 类型 | 是否必选 | 默认值 | 描述 |
503
- | :----------- | :------ | :------- | :----------- | :-------------------------------------------------------------- |
504
- | type | String | Y | 无 | 播放地址类型,"live":预览,"rec":回放;“cloud.rec”:云存储回放 |
505
- | deviceSerial | String | Y | 无 | 设备序列号,存在英文字母的设备序列号,字母需为大写 |
506
- | channelNo | int | Y | 无 | 通道号 |
507
- | accessToken | String | N | 初始化时获取 | 授权过程获取的 access_token |
508
- | hd | boolean | N | 初始化时获取 | 是否为高清 true-主码流(高清) false-子码流(标清) |
509
- | validCode | String | N | 初始化时获取 | 设备验证码(加密设备播放需要输入验证码) |
510
- | validCode | String | N | 初始化时获取 | 设备验证码(加密设备播放需要输入验证码) |
511
- | begin | String | N | 初始化时获取 | type 类型为回放有效,开始时间 格式为“YYYYMMDDHHmmss” |
512
- | end | String | N | 初始化时获取 | type 类型为回放有效,结束时间 格式为 “YYYYMMDDHHmmss” |
513
414
 
514
- #### 切换模板主题
415
+
515
416
 
417
+ #### 切换模板主题
516
418
  > 可用于在播放中切换模板主题,请切换播放地址成功后调用
517
419
 
518
- ```js
420
+ ```
519
421
  player.Theme.changeTheme(template)
520
422
 
521
423
  // 预览切回放场景示例
@@ -524,73 +426,50 @@ options 参数说明
524
426
  console.log("地址切换成功,开始切换模板主题");
525
427
  player.Theme.changeTheme("pcRec");
526
428
  });
527
-
429
+
528
430
 
529
431
  ```
432
+ template参数说明
530
433
 
531
- template 参数说明
434
+ |参数名|类型|描述|是否必选|
435
+ |:--|:--|:--|:--|
436
+ |type| String| 模板名称,详见初始化参数template| Y|
532
437
 
533
- | 参数名 | 类型 | 描述 | 是否必选 |
534
- | :----- | :----- | :-------------------------------- | :------- |
535
- | type | String | 模板名称,详见初始化参数 template | Y |
536
438
 
537
439
  #### 开启电子放大
440
+ >建议使用模板,模板中的电子放大功能更全
538
441
 
539
- > 建议使用模板,模板中的电子放大功能更全
540
-
541
- ```js
542
- // 方式1
543
- player.enableZoom();
544
- // 方式2
545
- player.enableZoom().then(() => {
546
- console.log("开启电子放大成功");
547
- });
548
442
  ```
549
-
443
+ // 方式1
444
+ player.enableZoom();
445
+ // 方式2
446
+ player.enableZoom()
447
+ .then(()=>{
448
+ console.log("开启电子放大成功");
449
+ });
450
+ ```
550
451
  #### 关闭电子放大
551
452
 
552
- ```js
553
- // 方式1
554
- player.closeZoom();
555
- // 方式2
556
- player.closeZoom().then(() => {
557
- console.log("关闭电子放大成功");
558
- });
453
+ ```
454
+ // 方式1
455
+ player.closeZoom();
456
+ // 方式2
457
+ player.closeZoom()
458
+ .then(()=>{
459
+ console.log("关闭电子放大成功");
460
+ });
559
461
  ```
560
462
 
561
463
  #### 重置画面宽高
562
464
 
563
- ```js
564
- player.reSize(width, height);
565
465
  ```
566
-
567
- #### 鱼眼矫正(软解 开启 [SharedArrayBuffer](https://open.ys7.com/help/1772?h=SharedArrayBuffer))
568
-
569
- ```js
570
- // {1, 0} 壁装鱼眼 不矫正
571
- // {1, 1} 壁装360°全景
572
- // {1, 2} 壁装4分屏
573
- // {1, 4} 壁装广角
574
- // {3, 0} 顶装鱼眼 不矫正
575
- // {3, 1} 顶装360°全景
576
- // {3, 4} 顶装4分屏
577
- // {3, 5} 顶装柱状
578
- // 顶装4分屏
579
- player.setFECCorrectType({place: 3 , type:4}, "cavnas1,canvas2,canvas3") // cavnas1,canvas2,canvas3 是分屏是需要的
466
+ player.reSize(width, height);
580
467
  ```
581
468
 
582
- ### 非正式版说明
583
-
584
- 非正式版需要配置 `staticPath`
585
-
586
469
  ### 使用示例
587
470
 
588
- > 如果使用原生 js,可参考 demos => [base-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/base-demo)
589
-
590
- > 如果使用 react,可参考 demos => [react-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/react-demo)
591
-
592
- > 如果使用 react + vite,可参考 demos => [with-react-vite](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/with-react-vite)
471
+ > 如果使用原生js,可参考demos => base-demo
593
472
 
594
- > 如果使用 vue2,可参考 demos => [vue-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/vue-demo)
473
+ > 如果使用react,可参考demos => react-demo
595
474
 
596
- > 如果使用 vue3,可参考 demos => [vue3-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/vue3-demo)
475
+ > 如果使用vue,可参考demos => vue-demo