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

云录像播放地址示例为：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；录像不支持跨天

2.2.4 getKitToken接口协议说明

详细说明

获取轻应用播放token；

注：

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

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

传入参数说明

参数列表 说明 参数类型 是否必填 默认值 合法值
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个小时;
      }
    }
}

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>

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

results matching ""

    No results matching ""