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({
  url:
    urlParams.url || "imou://open.lechange.com/6H0BXXXXXXX3D90/0/2?streamId=1",
  kitToken: urlParams.kitToken || "Kt_3baccxxxxxxxxxxxxxxxxxxxxxxa183e",
  // 是否自动播放
  autoplay: true,
  // 是否显示控制台
  controls: true,
  // 是否开启静音
  automute: false,
  themeData: [
    {
      area: "header",
      fontColor: "#F18D00",
      backgroundColor: "#FFFFFF",
      activeButtonColor: "#0E72FF",
      buttonList: [
        {
          show: true,
          id: "deviceName",
          name: "设备名称",
          position: "left",
        },
        {
          show: true,
          id: "channalId",
          name: "设备通道",
          position: "left",
        },
        {
          show: true,
          id: "cloudVideo",
          name: "云录像",
          position: "right",
        },
        {
          show: true,
          id: "localVideo",
          name: "本地录像",
          position: "right",
        },
      ],
    },
    {
      area: "footer",
      fontColor: "#F18D00",
      backgroundColor: "#FFFFFF",
      activeButtonColor: "#0E72FF",
      buttonList: [
        {
          show: true,
          id: "play",
          name: "播放",
          position: "left",
        },
        {
          show: true,
          id: "mute",
          name: "音量控制",
          position: "left",
        },
        {
          show: true,
          id: "talk",
          name: "语音对讲",
          position: "left",
        },
        {
          show: true,
          id: "capture",
          name: "截图",
          position: "left",
        },
        {
          show: true,
          id: "definition",
          name: "清晰度控制",
          position: "right",
        },
        {
          show: true,
          id: "PTZ",
          name: "云台控制",
          position: "right",
        },
        {
          show: true,
          id: "webExpend",
          name: "网页全屏",
          position: "right",
        },
        {
          show: true,
          id: "extend",
          name: "全屏控制",
          position: "right",
        },
      ],
    },
  ],
});

1.3 轻应用播放地址说明

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

云录像播放地址示例为:imou://open.lechange.com/deviceId/channelId/2?streamId=1

属性 默认值 必填 说明
deviceId / Yes 设备序列号
channelId / Yes 设备通道号
type / Yes 播放类型: 1 直播(实时预览); 2 录像回放;
recordType / No type=2 的情况下默认云录像回放;若 recordType=localRecord 则本地录像回放
streamId 1 No 清晰度: 0 高清 ;1 标清;

1.4 getKitToken 接口协议说明

详细说明

获取轻应用播放 token;

注:

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

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

请求地址

https://openapi.lechange.cn/openapi/getKitToken

传入参数说明

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

样例输入

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

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)

results matching ""

    No results matching ""