小程序插件对接开发

参数名	参数类型	是否必填	参数说明
token	String	是	管理员 accessToken，获取协议请参考：accessToken
deviceId	String	是	设备序列号
channelId	String	是	通道号
productId	String	否	物模型设备必填。可以通过 listDeviceDetailsByIds、listDeviceDetailsByPage 接口获取 productId，若列表返回的 productId 字段有值即代表该设备为 IoT 设备；若列表接口未获取到则可不填

样例输入

{
  "system": {
    "ver": "1.0",
    "appId": "lcdxxxxxxxxx",
    "sign": "xxxxxxxxxxxxxx",
    "time": 1603370757,
    "nonce": "1a411d5a-e88b-45ee-b590-53da98375edd"
  },
  "id": "sdf23423lkj32l4324",
  "params": {
    "token": "At_xxxxxxxxxxxxxxxxxx",
    "deviceId": "TESTQWER1234",
    "channelId": "0",
    "productId": "qwejhdgsh"
  }
}

返回 data 字段说明

字段名				字段类型	字段说明
miniToken				String	临时校验秘钥，长度32位，字母+数字组成，有效期最大24小时。使用大于12小时但未满24小时，再请求接口即会生成新秘钥，此时新、老秘钥均可正常使用
expireTime				Integer	秘钥剩余有效时长，单位秒

样例输出

{
  "result": {
    "msg": "操作成功。",
    "code": "0",
    "data": {
      "miniToken": "xxxxxxxxxxxxxxxxxxxx",
      "expireTime": "7200"
    }
  },
  "id": "sdf23423lkj32l4324"
}

3、对接小程序插件

3.1 配置 app.json 文件

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

3.2 集成插件页面.json 文件

{
  "usingComponents": {
    "imou-player": "plugin://myPlugin/imou-player"
  }
}

3.3 插件 xml 参数配置

3.3.1 样例输出

<imou-player
  miniToken="例qweyj3j324j234k3cjxhckk324k34sdf"
  deviceId="TESTQWER1234"
  channelId="0"
  liveType="localRecord"
  recordBeginTime="2024-06-27 17:29:03"
  recordEndTime="2024-06-27 18:29:03"
  functionConfig="PTZ, snapShot"
  playConfig='{"resolution": "SD", "voice": "on", "fullScreen": "off"}'
  width="260"
  height="210"
  bind:handleEvent="handleEvent"
  objectFit="contain"
></imou-player>

3.3.2 插件接口参数说明

参数	字段类型	是否必填	参数说明
miniToken	String	是	临时校验秘钥，通过 createWeChatMiniProgramToken 接口获取，用于校验开发者和设备的关系
deviceId	String	是	设备序列号
channelId	String	是	通道号
liveType	String	是	播放类型，real-实时预览，localRecord-本地录像，cloudRecord-云录像
recordBeginTime	String	否	录像播放开始时间，liveType 属性值为 localRecord 或 cloudRecord 时必填
recordEndTime	String	否	录像播放结束时间，liveType 属性值为 localRecord 或 cloudRecord 时必填
functionConfig	String	否	功能选项配置，talk-对讲，snapShot-抓图，PTZ-云台, timeLine-展示时间轴。可选择多项功能，中间以英文逗号隔开
playConfig	Object	否	播放配置，resolution-分辨率，可选 HD 高清、SD 标清，默认 SD；voice-声音开关，可选 on 开启、off 关闭，默认 on；fullScreen-全屏播放开关，可选 on 全屏、off 非全屏，默认 off。示例{"resolution": "HD", "voice": "on", "fullScreen": "off"}
width	String	否	功能页宽度，单位 px，默认屏幕宽度，最小 260px
height	String	否	播放窗口高度，单位 px，默认 210px，最小 210px
objectFit	String	否	填充模式，可选值有 contain，fillCrop。contain：图像长边填满屏幕，短边区域会被填充⿊⾊；fillCrop：图像铺满屏幕，超出显示区域的部分将被截掉 [V1.0.3 开始支持]
handleEvent	Function	否	事件回调

3.3.3 事件回调 handleEvent 状态码

状态码	描述
1001	参数缺失
1002	参数错误
2001	播放器状态
2996	播放器暂停
2997	对讲结束
2998	此时间段无录像片段
2999	录像已播放完毕
3001	操作异常（云台、对讲、云录像、本地录像时间轴获取异常）
3002	页面切到后台
3003	播放地址获取失败

3.3.4 组件如何销毁

ImouPlayer 插件实例被销毁-播放组件同步销毁。可以通过控制组件显示/隐藏实现。示例如下:

<!-- index.wxml -->
<button type="primary" bindtap="init">初始化播放组件</button>

<button type="primary" bindtap="destroy">组件销毁</button>

<imou-player
  id="imou-player"
  wx:if="{{show}}"
  miniToken="xxxxxx"
  deviceId="xxxxxx"
  channelId="xxxxxx"
  liveType="real"
  recordBeginTime="xxxxxx"
  recordEndTime="xxxxxx"
  functionConfig="xxxxxx"
  playConfig="xxxxxx"
  width="xxx"
  height="xxx"
  bind:handleEvent="handleEvent"
  objectFit="contain"
></imou-player>

// index.js
const plugin = requirePlugin("myPlugin");

Page({
  data: {
    show: false,
  },
  init() {
    if (this.data.show) {
      this.setData({
        show: false,
      });
    }
    this.setData({
      show: true,
    });
  },
  handleEvent: function (e) {
    console.log("事件回调：", e.detail);
  },
  destroy() {
    this.setData({
      show: false,
    });
  },
});

4、成品效果

集成乐橙 ImouPlayer 小程序插件，按第 3 节传参后，最终成品效果如下：