安装与初始化

步骤

引入 imou-player.css / imou-player.js（见下文 1.1），或按 §2 通过 npm 集成。
将 WasmLib 放入项目 public 并配置路径（1.2，2024-12-31 后版本必做）。
使用 kitToken 等参数 初始化播放器（1.3）；多线程播放再配置 §3 的 COOP/COEP。

ImouPlayer - 组件说明

凡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>

例：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-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 依赖库引入【重要且必须】详见多线程模式配置

将 WasmLib 引入到自己项目的 public 下，imouPlayer初始化支持WasmLib访问路径配置，参数:WasmLibPath 根据自己项目可配置相对路径(默认)、绝对路径

1.3 初始化 imouPlayer

先由服务端调用 getKitToken 换取 kitToken，再填入下方 token（与 API 参考 · 初始化参数类型一致：type/channelId/streamId 为 String）。

// 添加DOM容器
const player = new imouPlayer({
  id: "root",
  width: 800,
  height: 400,
  // 设备序列号
  deviceId: "7H0B18XXXXXXXX",
  channelId: "0",
  token: "Kt_hz00e4c3XXXXXXXXXXX", // kitToken
  // "1" 直播  "2" 录播
  type: "1",
  // 直播 "0" 高清  "1" 标清
  streamId: "0",
  // 录播 云录像 cloud 本地录像 localRecord 默认 云录像
  recordType: "cloud",
  WasmLibPath: "", // 默认相对路径，绝对路径可配置"/"，具体路径根据项目public文件路径调整
  // 如果设备设置了自定义音视频加密密钥，则输入此密钥；
  // 如果设备只设置了设备密码，则输入设备密码；其他情况默认设备序列号。
  code: "xxxxxx",
});

2. npm 安装（可选）

若使用前端工程化构建，可从 npm 安装（包名以资源下载轻应用套件内 README 为准，常见为 imou-player）：

npm install imou-player

import "imou-player/dist/imou-player.css";
import imouPlayer from "imou-player";
// 初始化参数同下文 1.3；WasmLib 仍须按 1.2 部署

未发布到 npm 的版本请直接使用资源包内 imou-player.js / imou-player.css（1.1）。

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");

nginx 服务

add_header Cross-Origin-Opener-Policy "same-origin";
add_header Cross-Origin-Embedder-Policy "require-corp";

常见问题

直播/录像播放、对讲等情况建立 websocket 连接时，返回的信息是 404？

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

发起对讲，设备端无声音？

有可能是通道音频格式是 ACC，但是 RTSP 信令返回的是 L16，目前通过 NVR 和通道 IPC 对讲，不支持 L16。

页面放置多个播放器页面，页面卡顿问题

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

轻应用在移动端浏览器访问，ios音量打开后仍然没有声音

受ios权限控制，需关闭手机系统静音设置

移动端打开对讲无响应

请先开启浏览器麦克风权限

轻应用在移动端访问，设置了截图、屏幕录制功能配置，但是功能按钮未展示

IOS&Android微信小程序web-view、Android微信内置浏览器不支持截图、屏幕录制，功能按钮不展示

轻应用在移动端访问，受内存限制，屏幕录制文件最大限制100M
屏幕录制下载的录制文件无法播放，如何解决？

录制数据不足，建议录制时间大于5秒

屏幕录制结束后，未下载 MP4 文件到本地，如何解决？

可能是浏览器内存不足，文件保存失败；可重启浏览器，保留充足的内存环境

移动端在退出浏览器后仍然继续播放，如何解决？

可以通过监听页面可见性变化，进行暂停/恢复播放等操作，参考资源下载中轻应用直播套件内demos/vue3-mobile-demo/src/views/Player.vue

// 页面处于播放状态时，监听页面可见性变化
if (player.status.playing) {
  // 监听页面可见性变化（包括home键、切换应用等）
  document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
      // 页面进入后台（包括点击home键）
      if (player) {
        player.pause();
      }
    } else {
      // 页面重新可见
      if (player) {
        player.start();
      }
    }
  });
}

接入过程中出现Uncaught SyntaxError: Unexpected token '<'，WasmLib加载失败等报错信息

WasmLib路径引入错误，可通过参数配置WasmLibPath资源路径，如需使用绝对路径可配置："/"。(具体路径根据项目public文件路径调整)

清晰度较高时，画面出现锯齿状

由于画面分辨率超过客户端的渲染分辨率，canvas渲染时部分像素被丢失导致。解决方案：获取设备像素比 var pixelRatio = window.devicePixelRatio，并在初始化时配置【dpr: pixelRatio】