小程序插件对接开发

一、简介

乐橙云开放平台小程序插件，是开放平台将视频播放、设备操作、本地抓图功能封装后集成的组件。通过乐橙云小程序插件即可使用核心功能，无需重复开发，且主体小程序不需要再申请微信 live-player 组件资质，降低开发周期和成本，快速接入乐橙云平台。

注意：开发者需要先在微信公众平台完成企业主体认证，才能搜索第三方小程序插件进行添加。

二、支持功能及优势

支持功能：

1、支持摄像头实时预览。注：需要设备为 H264 编码格式；

2、支持设备语音对讲；

3、支持设备本地录像、云录像播放；

4、支持摄像机云台操作；

5、支持本地截图保存到相册。

优势：
1、开发者主体小程序无需申请微信 live-player 组件资质，即可进行视频播放；

2、快速实现视频预览、回放、对讲等功能，无需重复开发，可按需集成所需功能；

3、集成插件后支持二次开发多样化的功能。

三、接入指南

1、申请插件：

打开小程序微信公众平台，登录开发者小程序账号，进入设置->第三方设置->插件管理->添加插件，输入乐橙云小程序 appId：wx26dd070c090dfbdf，添加乐橙云小程序插件（组件名 imou-player）。如下图。

2、获取临时权限校验密钥

include 路径非法：../../.vuepress/fragments/sdk/miniprogram-createWeChatMiniProgramToken.md

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、成品效果

集成乐橙云小程序插件并按第 3 节传参后，在微信开发者工具或真机中验证预览、回放与对讲效果。