本页目录

轻应用组件

# ImouPlayer - 组件说明

# 体验产品

在线体验产品功能，之后可基于轻应用 Demo 进行二次开发。体验地址: 点击体验轻应用 (opens new window)

凡2024年12月31日以后的版本接入请关注 1.2 依赖库引入

# 1. 基础用法

# 1.1 imou-player.js 引入

// 需同步引入css样式文件
<link href="./imou-player.css" rel="stylesheet" />
<script src="./imou-player.js"></script>
1
2
3
例：
<!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>
    <link href="./imou-player.css" rel="stylesheet" />
    <script src="./imou-player.js"></script>
  </head>
  <body>
    <!-- 在页面中提供一个空的div标签用于生成轻应用播放器元素 -->
    <div id="root"></div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 1.2 依赖库引入（重要且必须） 详见多线程模式配置

将 WasmLib 引入到自己项目的 public 下

# 1.3 初始化 imouPlayer

// 添加DOM容器
const player = new imouPlayer({
  id: "root",
  width: 800,
  height: 400,
  // 设备序列号
  deviceId: "7H0B18XXXXXXXX",
  channelId: 0,
  token: "Kt_hz00e4c3XXXXXXXXXXX",
  // 1 直播  2 录播
  type: 1,
  // 直播 0 高清  1 标清  默认
  streamId: 0,
  // 录播 云录像 cloud 本地录像 localRecord 默认 云录像
  recordType: "cloud",
  // 如果设备设置了自定义音视频加密秘钥，则输入此秘钥；
  // 如果设备只设置了设备密码，则输入设备密码；其他情况默认设备序列号。
  code: "xxxxxx",
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 1.4 imouPlayer 初始化参数说明

参数名 类型 默认值 必填 说明
id String / Yes 容器挂载 Dom 的 Id
width Number / Yes 容器宽度
height Number / Yes 容器高度
deviceId String / Yes 设备序列号
channelId String / Yes 设备通道号
token String / Yes 轻应用播放 token
type String / Yes 播放类型： 1 直播（实时预览）； 2 录像回放；
recordType String / No type=2 的情况下默认云录像回放；若 recordType=localRecord 则本地录像回放
beginTime String / No 回放开始时间   YYYY-MM-DD HH:mm:ss
endTime String / No 回放结束时间   YYYY-MM-DD HH:mm:ss
streamId String 0 No 清晰度： 0 高清 ；1 标清；
controls Boolean true No 播放器控制栏显示/隐藏
muted Boolean false No 静音
code String / No 设备视频解密秘钥，如果设备开启了视频加密，则必填。
如果设备设置了自定义音视频加密秘钥，则填此秘钥；
如果设备只设置了设备密码，则填设备密码；
其他情况默认设备序列号。
handleError Function / No 播放错误回调
# 1.4.1 handleError 播放错误回调
errCode errMsg
1001 解密失败，请重新输入秘钥

# 1.5 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"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 2. imouPlayer 方法集合

方法名 功能描述 使用示例
play 开始播放 player.play()
pause 暂停播放 player.pause()
start 暂停后开始播放 player.start()
destory 结束播放同时销毁 DOM player.destory()
capture 截图 player.capture()
startTalk 开始对讲 player.startTalk()
stopTalk 结束对讲 player.stopTalk()
volume 设置音量（0/1） player.volume(0)  // 关闭音量
player.volume(1)  // 打开音量
fullScreen 全屏 player.fullScreen()
exitFullScreen 退出全屏 player.exitFullScreen()
startRecord 开始屏幕录制 player.startRecord()
stopRecord 结束屏幕录制 player.stopRecord()
setSpeed 录像倍速播放（0.5/1/2/4/8/16/32），本地录像不支持 32 倍速 player.setSpeed(2)

# 2.1 相关示例代码

const text = e.target.innerText;
switch (text) {
  case "播放":
    player.play();
    break;
  case "暂停":
    player.pause();
    break;
  case "暂停后开始播放":
    player.start();
    break;
  case "截图":
    player.capture();
    break;
  case "全屏":
    player.fullScreen();
    break;
  case "退出全屏":
    player.exitFullScreen();
    break;
  case "声音-打开":
    player.volume(1);
    break;
  case "声音-关闭":
    player.volume(0);
    break;
  case "语音对讲-开始对讲":
    player.startTalk();
    break;
  case "语音对讲-结束对讲":
    player.stopTalk();
    break;
  case "2倍速":
    player.setSpeed(2);
    break;
  default:
    break;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# 3. 多线程模式配置

imouPlayer JSSDK 支持 web 端无插件播放 H264/H265 编码的直播/录像。使用浏览器共享线程方案（SharedArrayBuffer），支持同时创建多个线程协同处理解码播放。默认使用多线程解码（谷歌浏览器 >= 91 版本；火狐浏览器 >= 97 版本；Edge 浏览器 >= 91 版本使用），不满足则使用单线程；

多线程模式在相同环境下有更好的性能表现，同时需要对服务进行跨域嵌入策略配置

你可以通过浏览 demo 快速上手 资源下载 中 轻应用直播套件内 demos/

  • 将 WasmLib 引入到自己项目的 public 下（重要且必须）

  • 配置前端服务，在响应头中添加 Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy 配置：

    • node 服务
    response.setHeader("Cross-Origin-Opener-Policy", "same-origin");
response.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
    1
    2
    • nginx 服务
    add_header Cross-Origin-Opener-Policy "same-origin";
add_header Cross-Origin-Embedder-Policy "require-corp";
    1
    2

# 常见问题

  1. 直播/录像播放、对讲等情况建立 websocket 连接时，返回的信息是 404？
    返回 404 可能存在流源超时无效的情况，实时录像、对讲、直播、录像下载的流地址，要避免提前请求，需要使用时，再触发接口获取流地址，避免流源超时无效，避免同时请求不同流源导致流源混乱。

  2. 发起对讲，设备端无声音？
    有可能是通道音频格式是 ACC，但是 RTSP 信令返回的是 L16，目前通过 NVR 和 通道 IPC 对讲，不支持 L16。

  3. 页面放置多个播放器页面，页面卡顿问题
    因需对码流进行解密，且渲染层使用 canvas，致使性能上会比纯 video 要求更高，但多个播放器同时存在时，若电脑性能不好或浏览器版本过低，多屏播放器就会出现卡顿问题。

应用开发
小程序对接开发