ImouPlayer - 组件说明
1 基础用法
1.1 html 引入
<script src="./imouplayer.js"></script>
例：
<!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>
<script src="./imouplayer.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
1.2 javascript
// 添加DOM容器
const player = new ImouPlayer("#app");
// 播放器初始化
player.setup({
url:
urlParams.url || "imou://open.lechange.com/6H0BXXXXXXX3D90/0/2?streamId=1",
kitToken: urlParams.kitToken || "Kt_3baccxxxxxxxxxxxxxxxxxxxxxxa183e",
// 是否自动播放
autoplay: true,
// 是否显示控制台
controls: true,
// 是否开启静音
automute: false,
themeData: [
{
area: "header",
fontColor: "#F18D00",
backgroundColor: "#FFFFFF",
activeButtonColor: "#0E72FF",
buttonList: [
{
show: true,
id: "deviceName",
name: "设备名称",
position: "left",
},
{
show: true,
id: "channalId",
name: "设备通道",
position: "left",
},
{
show: true,
id: "cloudVideo",
name: "云录像",
position: "right",
},
{
show: true,
id: "localVideo",
name: "本地录像",
position: "right",
},
],
},
{
area: "footer",
fontColor: "#F18D00",
backgroundColor: "#FFFFFF",
activeButtonColor: "#0E72FF",
buttonList: [
{
show: true,
id: "play",
name: "播放",
position: "left",
},
{
show: true,
id: "mute",
name: "音量控制",
position: "left",
},
{
show: true,
id: "talk",
name: "语音对讲",
position: "left",
},
{
show: true,
id: "capture",
name: "截图",
position: "left",
},
{
show: true,
id: "definition",
name: "清晰度控制",
position: "right",
},
{
show: true,
id: "PTZ",
name: "云台控制",
position: "right",
},
{
show: true,
id: "webExpend",
name: "网页全屏",
position: "right",
},
{
show: true,
id: "extend",
name: "全屏控制",
position: "right",
},
],
},
],
});
1.3 轻应用播放地址说明
开发者直播地址模板：imou://open.lechange.com/deviceId/channelId/type?streamId=1
云录像播放地址示例为：imou://open.lechange.com/deviceId/channelId/2?streamId=1
| 属性 | 默认值 | 必填 | 说明 |
|---|---|---|---|
| deviceId | / | Yes | 设备序列号 |
| channelId | / | Yes | 设备通道号 |
| type | / | Yes | 播放类型： 1 直播（实时预览）； 2 录像回放； |
| recordType | / | No | type=2 的情况下默认云录像回放；若 recordType=localRecord 则本地录像回放 |
| streamId | 1 | No | 清晰度： 0 高清 ；1 标清； |
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"
}
}
2 ImouPlayer API 说明
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| id | string | / | Yes | 播放器容器 ID |
| src | array | / | Yes | 视频资源地址 [{url:'', kitToken: ''}] |
| controls | boolean | false | No | 是否展示控制栏 |
| autoplay | boolean | false | No | 是否自动播放 |
| width | string | 100% | No | 播放器宽度 px/%/number |
| height | string | 400 | No | 播放器高度 px/%/number |
| poster | string | / | No | 视频封面图 |
| setup | HandleEvent | / | / | 配置播放器参数 |
| destroy | HandleEvent | / | / | 销毁播放器 |
| setFullScreen | HandleEvent | / | / | 进入全屏 |
| exitFullScreen | HandleEvent | / | / | 退出全屏 |
| play | HandleEvent | / | / | 开始播放 |
| pause | HandleEvent | / | / | 暂停播放 |
| stop | HandleEvent | / | / | 停止播放 |
| setVolume | HandleEvent | / | / | 设置音量（0-1） |