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({
  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);

1.3 轻应用播放地址说明

开发者直播地址模板:imou://open.lechange.com/deviceId/channelId/type?streamId=1

云录像播放地址示例为:imou://open.lechange.com/deviceId/channelId/2?streamId=1&beginTime=2021-08-08 09:00:00&endTime=2021-08-08 10:00:00

属性 默认值 必填 说明
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;录像不支持跨天

1.4 getKitToken接口协议说明

详细说明

获取轻应用播放token;

注:

1、开发者私有云调用乐橙开放平台接口的协议的域名地址和签名计算说明请见:开发规范

2、kitToken有效期为2小时,建议开发者在自身服务中针对kitToken缓存一小时处理,而不用每次调用开放平台接口获取。

传入参数说明

参数列表 说明 参数类型 是否必填 默认值 合法值
token 管理员accessToken String accessToken获取协议请参考:accessToken
deviceId 设备序列号 String
channelId 设备通道号 String
type 默认传0 String 0:所有权限;1:实时预览;2:录像回放(云录像+本地录像)

样例输入

{
  "system": {
    "ver": "1.0",
    "appId": "lc0****426c",
    "sign": "812e419af25bf773d8959d7dd82dc259",
    "time": 1626313677,
    "nonce": "1686f6f4-dec7-486e-93e3-6b2740577259"
  },
  "id": "0f935cb0-5ddc-44d4-9058-6b5fc928839e",
  "params": {
    "type": "0",
    "deviceId": "7B06****Z396E9",
    "channelId": "0",
    "token": "At_000085fa18f0319046199b2138c04e54"
  }
}

样例输出

{
    "id":"123456",
    "result":{
        "code":"0",
        "msg":"操作成功",
        "data":{
            "expireTime": 84323,//过期剩余秒数
            "kitToken":"Kt_e6cf503603b848098376bc2dc1c6f38d" //轻应用授权token,新获取的kitToken有效期为2个小时;
      }
    }
}

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)
setMultiScreen HandleEvent / / 设置多屏(1/2/4/9)

3 微信小程序插件

3.1 引入插件

在app.json中声明

{
  "plugins": {
    "myPlugin": {
      "version": "0.0.4",
      "provider": "wx26dd070c090dfbdf"
    }
  }
}

3.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>

附:微信小程序插件使用说明文档

results matching ""

    No results matching ""