ezuikit-js 8.1.1-alpha.2 → 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 +169 -290
- package/ezuikit.js +20 -20
- package/ezuikit_static/PlayCtrlWasm/playCtrl1/HasSIMD/Decoder.js +10 -10
- package/ezuikit_static/PlayCtrlWasm/playCtrl1/NoSIMD/Decoder.js +10 -10
- package/ezuikit_static/PlayCtrlWasm/playCtrl3/hasWorker/HasSIMD/Decoder.js +1 -1
- package/ezuikit_static/PlayCtrlWasm/playCtrl3/hasWorker/HasSIMD/Decoder.wasm +0 -0
- package/ezuikit_static/PlayCtrlWasm/playCtrl3/hasWorker/NoSIMD/Decoder.js +1 -1
- package/ezuikit_static/PlayCtrlWasm/playCtrl3/hasWorker/NoSIMD/Decoder.wasm +0 -0
- package/ezuikit_static/PlayCtrlWasm/playCtrl3/noWorker/Decoder.js +1 -1
- package/ezuikit_static/PlayCtrlWasm/playCtrl3/noWorker/Decoder.wasm +0 -0
- package/ezuikit_static/rec/jquery.min.js +1 -1
- package/ezuikit_static/talk/tts-v4.js +343 -343
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,145 +1,112 @@
|
|
|
1
|
-
#
|
|
1
|
+
# [EZUIKit-JavaScript-npm][ezuikit-js]
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-

|
|
5
|
-

|
|
6
|
-

|
|
3
|
+
> 轻应用npm版本,降低接入难度,适配自定义UI,适配主流框架
|
|
7
4
|
|
|
8
|
-
>
|
|
5
|
+
> 低延时预览,云存储回放,SD卡回放
|
|
9
6
|
|
|
10
|
-
>
|
|
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
|
-
### 获取
|
|
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/
|
|
62
|
+
<b>测试播放地址:</b> ezopen://open.ys7.com/AA2615287/1.live
|
|
95
63
|
|
|
96
|
-
你可以通过以下地址获取到测试
|
|
97
|
-
当前设备有可能下线或被移除了, 如果自己有设备优先使用自己的设备进行测试。
|
|
64
|
+
你可以通过以下地址获取到测试accessToken <a href="https://open.ys7.com/jssdk/ezopen/demo/token" target="_blank">获取测试accessToken</a> 用来播放上述测试播放地址。
|
|
98
65
|
|
|
99
|
-
#### 最佳实践
|
|
66
|
+
#### 最佳实践tips
|
|
100
67
|
|
|
101
|
-
1. 我们在
|
|
68
|
+
1. 我们在v0.6.2及以上版本持用户通过开启谷歌实验室特性启动多线程解码,多线程模式将大大提升解码效率,降低解码内存消耗。
|
|
102
69
|
|
|
103
|
-
|
|
70
|
+
>>[开启多线程方式1](https://open.ys7.com/help/384) (https://open.ys7.com/help/384)
|
|
104
71
|
|
|
105
|
-
|
|
72
|
+
>>[开启多线程方式2](https://open.ys7.com/help/385)(https://open.ys7.com/help/385)
|
|
106
73
|
|
|
107
|
-
2. 视频解码库默认从开放平台远程拉取,你可以将解码库放到本地或者你的服务内,可以提升加载解码库速度。
|
|
74
|
+
2. 视频解码库默认从开放平台远程拉取,你可以将解码库放到本地或者你的服务内,可以提升加载解码库速度。
|
|
108
75
|
|
|
109
|
-
|
|
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
|
-
>
|
|
81
|
+
    <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
|
-
|
|
83
|
+
> 2. 前往[开放平台轻应用模板管理页](https://open.ys7.com/console/ezuikit/template.html)创建一个主题,可以动态配置你的播放主题,控件,示例展示了获取一个主题后使用示例。
|
|
116
84
|
|
|
117
|
-
>
|
|
85
|
+
    <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
|
-
|
|
87
|
+
> 3. 你可以本地创建一个主题配置,可以本地配置你的播放主题,控件,示例展示了本地配置项使用示例。
|
|
120
88
|
|
|
121
|
-
>
|
|
89
|
+
    <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
|
-
|
|
91
|
+
> 4. 我们提供了一些通用场景的主题,PC端预览,PC端回放,移动端预览,移动端回放,你也可以直接使用。
|
|
124
92
|
|
|
125
|
-
> 4. 我们提供了一些通用场景的主题,PC 端预览,PC 端回放,移动端预览,移动端回放,你也可以直接使用。
|
|
126
93
|
|
|
127
|
-
    <b>PC
|
|
128
|
-
<a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/pcLive.html" target="_blank">PC
|
|
94
|
+
    <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
|
-
    <b>PC
|
|
131
|
-
<a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/pcRec.html" target="_blank">PC
|
|
97
|
+
    <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
|
    <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
|
    <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
|
    <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
|
-
|
|
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
|
-
视频
|
|
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>
|
|
179
|
-
|
|
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
|
|
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
|
-
|
|
335
|
-
>
|
|
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
|
-
|
|
373
|
-
|
|
374
|
-
|
|
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
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
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
|
-
|
|
423
|
-
|
|
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
|
-
//
|
|
430
|
-
player.
|
|
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.
|
|
437
|
-
if (data.code === 0) {
|
|
438
|
-
// 成功....
|
|
439
|
-
}
|
|
440
|
-
})
|
|
362
|
+
player.startTalk();
|
|
441
363
|
```
|
|
442
364
|
|
|
443
|
-
####
|
|
365
|
+
#### 结束对讲
|
|
444
366
|
|
|
445
367
|
```
|
|
446
|
-
|
|
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
|
-
|
|
458
|
-
player.setProfile({ microphoneId })
|
|
374
|
+
player.fullScreen();
|
|
459
375
|
```
|
|
460
|
-
|
|
461
|
-
#### 监听麦克风音量变化
|
|
376
|
+
#### 取消全屏
|
|
462
377
|
|
|
463
378
|
```
|
|
464
|
-
player.
|
|
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
|
-
|
|
483
|
-
|
|
484
|
-
|
|
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
|
-
> 可用于在播放中切换设备,切换播放参数,以及直播切换回放等。请注意,频繁切换可能导致异常,切换间隔至少需要
|
|
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
|
-
|
|
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
|
-
```
|
|
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
|
-
|
|
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
|
-
```
|
|
553
|
-
// 方式1
|
|
554
|
-
player.closeZoom();
|
|
555
|
-
// 方式2
|
|
556
|
-
player.closeZoom()
|
|
557
|
-
|
|
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
|
-
> 如果使用原生
|
|
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
|
-
> 如果使用
|
|
473
|
+
> 如果使用react,可参考demos => react-demo
|
|
595
474
|
|
|
596
|
-
> 如果使用
|
|
475
|
+
> 如果使用vue,可参考demos => vue-demo
|