ImouPlayer - 轻应用使用说明
一 简介
轻应用套件是乐橙开放平台为了方便开发者在网页和移动浏览器上集成所推出的对接组件,有着快速对接,秒出流,零延迟的特点;同时轻应用套件还支持H265编码格式的视频流,网页端录像回放;能够帮助开发者以最短的时间和最低的成本对接集成,快速实现业务目标
1.1 PC浏览器支持
浏览器 | 版本 |
---|---|
Chrome | >=55 |
firefox | >=55 |
IE | >=11 |
注:firefox和IE浏览器中仅支持标清,播放高清视频请选择chrome浏览器
1.2 特性对比
产品 | 对接成本 | 对接耗时 | 实时预览 | 音频播放 | 本地录像回放 | 云存储录像回放 | 语音对讲 | 出流速度 | 实时延迟 | 稳定性 | H265 | 安全性 |
---|---|---|---|---|---|---|---|---|---|---|---|---|
直播地址(HLS) | 极低 | 1-8小时 | 支持 | 不支持 | 不支持 | 不支持 | 不支持 | 3-8秒 | 8-10秒 | 中 | 不支持 | 低 |
ImouPlayer 轻应用 | 低 | 1-7日 | 支持 | 支持 | 支持 | 支持 | 不支持 | 1-3秒 | 2-3秒 | 中 | 支持 | 中 |
Open SDK | 高 | 1-3月 | 支持 | 支持 | 支持 | 支持 | 支持 | 1-2秒 | 1-2秒 | 高 | 支持 | 高 |
二 接入指南
2.1 开发者对接架构图
轻应用体验请访问:访问轻应用官方体验地址
2.2 ImouPlayer基本用法
2.2.1 直接引入
<script src="./imouplayer.js"></script>
html
<!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>
2.2.2 javascript
// 添加DOM容器
const player = new ImouPlayer('#app');
// 播放器初始化
player.setup({
src: [
{
url: 'imou://open.lechange.com/5A05BD4PAJE237E/0/1?streamId=1', // url拼接说明请见:2.2.3 轻应用播放地址说明
kitToken: 'Kt_54f8452ce4e14795b98b965ac11d728d', // 播放Token,通过接口getKitToken获取,具体请见:2.2.4 getKitToken接口协议说明
}
], // 播放地址
width: 760, // 播放器宽度
height: 400, // 播放器高度
poster: '', // 封面图url
autoplay: false, // 是否自动播放
controls: true, // 是否展示控制栏
});
// 播放
player.play();
// 暂停
player.pause();
// 停止播放
player.stop();
// 销毁播放器
player.destroy();
// 进入全屏
player.setFullScreen();
// 退出全屏
player.exitFullScreen();
// 设置音量
player.setVolume(0.5);
// 设置多屏
player.setMultiScreen(4);
2.2.3 轻应用播放地址说明
开发者需拼接的直播地址示例为: imou://open.lechange.com/deviceId/channelId/type?streamId=1
属性 | 默认值 | 必填 | 说明 |
---|---|---|---|
deviceId | / | Yes | 设备序列号 |
channelId | / | Yes | 设备通道号 |
type | / | Yes | 播放类型: 1 直播(实时预览); 2 录像回放; |
recordType | / | No | type=2的情况下默认云录像回放;若recordType=localRecord则本地录像回放 |
streamId | 1 | No | 清晰度: 0 高清 ;1 标清; |
beginTime | 当天零点 | No | 仅type=2回放时有效,云录像开始播放时间,格式:YYYY-MM-DD hh:mm:ss |
endTime | 当前时间点 | No | 仅type=2回放时有效,云录像结束播放时间 格式:YYYY-MM-DD hh:mm:ss |
2.2.4 getKitToken接口协议说明
详细说明
获取轻应用播放token;
注:开发者私有云调用乐橙开放平台接口的协议的域名地址和签名计算说明请见:开发规范
传入参数说明
参数列表 | 说明 | 参数类型 | 是否必填 | 默认值 | 合法值 |
---|---|---|---|---|---|
token | 开放平台管理员accessToken | String | 是 | accessToken获取协议请参考:accessToken | |
deviceId | 设备序列号 | String | 是 | ||
channelId | 设备通道号 | String | 是 | ||
type | 默认传0 | String | 是 | 0:所有权限;1:实时预览;2:录像回放(云录像+本地录像) |
样例输入
{
"params":{
"token":"授权token",
"deviceId":"设备ID",
"channelId":"通道号",
"type":"0"
}
}
样例输出
{
"id":"123456",
"result":{
"code":"0",
"msg":"操作成功",
"data":{
"expireTime": 84323,//过期剩余秒数
"kitToken":"Kt_e6cf503603b848098376bc2dc1c6f38d" //轻应用授权token,新获取的kitToken有效期为2个小时;
}
}
}
注:kitToken在乐橙开放平台2小时有效,为提升用户体验,建议开发者在自身服务中针对kitToken缓存一小时处理,而不用每次调用开放平台接口获取。
2.3 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) |
setMultiScreen | HandleEvent | / | / | 设置多屏(1/2/4/9) |
2.4 微信小程序插件
2.4.1 引入插件
在app.json中声明
{
"plugins": {
"myPlugin": {
"version": "0.0.4",
"provider": "wx26dd070c090dfbdf"
}
}
}
2.4.2 使用插件
在pages下引入自定义组件:
{
"usingComponents": {
"imou-player": "plugin://myPlugin/imou-player"
}
}
使用自定义组件:
<imou-player
src="imou://open.lechange.com/5A05BD4PAJE237E/0/1?streamId=1"
kitToken="Kt_54f8452ce4e14795b98b965ac11d728d"
autoplay="true"
controls="true"
poster="https://demo.jpg"
>
</imou-player>