轻应用组件
# ImouPlayer - 组件说明
# 体验产品
在线体验产品功能，之后可基于轻应用 Demo 进行二次开发。体验地址: 点击体验轻应用 (opens new window)
# 1. 基础用法
# 1.1 html 引入
// 需同步引入css样式文件
<link href="./imou-player.css" rel="stylesheet" />
<script src="./imou-player.js"></script>
1
2
3
2
3
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, intial-scale=1, maxium-scale=1, user-scalable=no" />
<title>imouPlayer</title>
<link href="./imou-player.css" rel="stylesheet" />
<script src="./imou-player.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 1.2 javascript
// 添加DOM容器
player = new imouPlayer({
id: 'root',
width: 800,
height: 400,
// 设备序列号
deviceId: '7H0B18XXXXXXXX',
token: 'Kt_hz00e4c3XXXXXXXXXXX',
channelId: 0,
// 1 直播 2 录播
type: 1,
// 直播 0 高清 1 标清 默认
streamId: 0,
// 录播 云录像 1 本地录像 localRecord 默认 云录像
recordType: 'cloud',
// 如果设备设置了自定义音视频加密秘钥，则输入此秘钥；
// 如果设备只设置了设备密码，则输入设备密码；其他情况默认设备序列号。
code: 'xxxxxx',
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 1.3 imouPlayer 初始化参数说明
| 属性 | 默认值 | 必填 | 说明 |
|---|---|---|---|
| id | / | Yes | 容器挂载 Id |
| width | / | Yes | 容器宽度 |
| height | / | Yes | 容器高度 |
| deviceId | / | Yes | 设备序列号 |
| channelId | / | Yes | 设备通道号 |
| type | / | Yes | 播放类型： 1 直播（实时预览）； 2 录像回放； |
| recordType | / | No | type=2 的情况下默认云录像回放；若 recordType=localRecord 则本地录像回放 |
| streamId | 0 | No | 清晰度： 0 高清 ；1 标清； |
| code | 设备序列号 | No | 设备视频解密秘钥，如果设备开启了视频加密，则必填。否则默认设备序列号。 如果设备设置了自定义音视频加密秘钥，则填此秘钥； 如果设备只设置了设备密码，则填设备密码； 其他情况默认设备序列号。 |
# 1.4 getKitToken 接口协议说明
# 详细说明
获取轻应用播放 token；
注：
1、开发者私有云调用乐橙开放平台接口的协议的域名地址和签名计算说明请见：开发规范
2、kitToken 有效期为 2 小时，建议开发者在自身服务中针对 kitToken 缓存一小时处理，而不用每次调用开放平台接口获取。
# 请求地址
https://openapi.lechange.cn/openapi/getKitToken
# 传入参数说明
| 参数列表 | 说明 | 参数类型 | 是否必填 | 默认值 | 合法值 |
|---|---|---|---|---|---|
| token | 管理员 accessToken | String | 是 | accessToken 获取协议请参考：accessToken | |
| deviceId | 设备序列号 | String | 是 | ||
| channelId | 设备通道号 | String | 是 | ||
| type | 默认传 0 | String | 是 | 0：所有权限；1：实时预览；2：录像回放（云录像+本地录像）；6：云台转动 |
# 样例输入
{
"system": {
"ver": "1.0",
"appId": "lc0****426c",
"sign": "812e419af25bf773d8959d7dd82dc259",
"time": 1626313677,
"nonce": "1686f6f4-dec7-486e-93e3-6b2740577259"
},
"id": "0f935cb0-5ddc-44d4-9058-6b5fc928839e",
"params": {
"token": "At_000085fa18f0319046199b2138c04e54",
"deviceId": "7B06****Z396E9",
"channelId": "0",
"type": "0"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 2 ImouPlayer API 说明
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| play | HandleEvent | / | / | 开始播放 |
| pause | HandleEvent | / | / | 暂停播放 |
| capture | HandleEvent | / | / | 截图 |
| talk | HandleEvent | / | / | 打开&关闭对讲 |
| volume | HandleEvent | / | / | 设置音量（0-1） |
| fullScreen | HandleEvent | / | / | 全屏 |
| exitFullScreen | HandleEvent | / | / | 退出全屏 |
# 2.1 相关示例代码
const text = e.target.innerText;
switch (text) {
case '播放':
player.play();
break;
case '暂停':
player.pause();
break;
case '截图':
player.capture();
break;
case '全屏':
player.fullScreen();
break;
case '退出全屏':
player.exitFullScreen();
break;
case '声音-打开':
player.volume(1);
break;
case '声音-关闭':
player.volume(0);
break;
case '语音对讲-打开&关闭':
player.talk();
break;
default:
break;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
