实时预览
实时预览
本页目标
在 Web、App、小程序或桌面端看到设备实时画面。选型与协议对比见 选择集成方式与 音视频概述；概念见 视频与流。
- 云直播 / HTTP：创建 HLS 等地址嵌入页面 → 创建设备直播地址 或 首次接口调用。
- 控制台零代码：→ 控制台完成首次实时预览。
- SDK / 轻应用 / 小程序：见下方各端分段。
步骤
按所选终端阅读对应分段；同一端内请按步骤顺序操作。
| 端 | 最短路径 |
|---|---|
| Web（H） | 创建设备直播地址 → 页面嵌入 HLS |
| 轻应用（L） | 引入 ImouPlayer → getKitToken（type=1）→ play()，见 L 分段 |
| Android（A） | accessToken → 实时预览 → Demo |
| iOS（I） | accessToken → 实时预览 → Demo |
| 小程序（M） | 轻应用组件 + web-view，见 M 分段 |
| 鸿蒙（HM） | 下载 SDK → 预览集成，见 HM 分段 |
| PC | PC 功能集成 → 示例工程 |
各端实现
服务端 HTTP
云直播对接基于已绑定的设备创建 HLS 直播地址，放入 Web、微信公众号或 H5 页面，完成实时预览。入口见 零代码直播。
云直播开发指南 写：云直播仅支持 H264（视频编码）和 AAC（音频编码）的出流，请在设备 IP 本地局域网管理页面切换设备编码格式，以提高播放器兼容性。创建前需要设备已在开发者账号下。流量不足或即将不足时，先购买流量或者带宽。控制台入口是 直播服务。
地址种类、直播计划和保管要求在 创建设备直播地址。
轻应用
轻应用使用说明 写：新版轻应用套件用于在网页和移动浏览器上集成，支持 H265 编码格式的视频流。PC 浏览器支持表写的是 Chrome、firefox、Edge，版本均 >= 55。
轻应用组件 写的实时预览用法：
- 引入
imou-player.css与imou-player.js。页面提供空的div作为播放器容器。 - 将 WasmLib 引入项目的 public。初始化参数
WasmLibPath可配置相对路径（默认）或绝对路径。凡 2024 年 12 月 31 日以后的版本接入，需要关注这一步。 new imouPlayer({...})。播放类型type为 1 时，表示直播（实时预览）。清晰度streamId：0 高清，1 标清，默认 0。- 播放 token 用 getKitToken 获取。说明 kitToken 有效期为 2 小时，建议在自身服务中缓存一小时，而不用每次调用开放平台接口获取。
type的说明：0 所有权限；1 实时预览；2 录像回放（云录像+本地录像）；6 云台转动。请求字段与示例在组件页，字段以各 OpenAPI 方法页为准。 - 调用
player.play()开始播放。暂停为pause()，暂停后开始为start()，结束并销毁 DOM 为destroy()。
设备开启视频加密时的密钥填法见 码流与告警图片解密。
组件说明写：imouPlayer JSSDK 支持 web 端无插件播放 H264/H265 编码的直播/录像。默认多线程解码的浏览器版本：谷歌 >= 91，火狐 >= 97，Edge >= 91；不满足则使用单线程。多线程需要在响应头配置 Cross-Origin-Opener-Policy: same-origin 与 Cross-Origin-Embedder-Policy: require-corp。给出 node 与 nginx 的写法，见组件页「多线程模式配置」。
小程序
平台概览 写：轻应用组件用于自己的 web、h5、微信小程序，完成设备实时预览、录像回放。对比表中轻应用对接的实时预览为支持。
轻应用组件 没有单独的小程序初始化步骤。详见该组件页，以及选择集成方式。
同页常见问题写：IOS&Android 微信小程序 web-view、Android 微信内置浏览器不支持截图、屏幕录制，功能按钮不展示。
Android
- 服务端取得 accessToken 与设备列表（见 移动应用开发）。
- 集成 OpenSDK 并按 Android 功能集成 完成预览取流。
- 对照 标准化 Demo 验证画面与对讲。
iOS
- 服务端取得 accessToken 与设备列表（见 移动应用开发）。
- 按 iOS 功能集成 完成预览取流。
- 对照 iOS 标准化 Demo 验证。