Integrate on the web

Scope and prerequisites

Play live video and recordings in Chrome, Firefox, or Edge without a browser plugin. Talk, PTZ, and snapshot depend on the device. Controls are documented in JavaScript development.

Steps

1. Create an app and bind the camera.
2. Download the Web Video SDK from Downloads. Host imou-player.js, the stylesheet, and WasmLib, and set WasmLibPath.
3. On the server, call getKitToken with the accessToken. A kitToken lasts about two hours. Cache it on the server for about one hour. Return only the kitToken to the page.
4. Create imouPlayer in the browser. Set token to the kitToken. type 1 is live and 2 is playback. Use streamId 1 for a wall of cameras.

const player = new imouPlayer({
 id: "root",
 width: 800,
 height: 400,
 deviceId: "YOUR_DEVICE_SN",
 channelId: 0,
 token: "Kt_xxxxxxxx",
 type: 1,
 streamId: 1,
 WasmLibPath: "/WasmLib/",
 code: "DEVICE_PASSWORD_OR_SN",
 templateMode: "pc",
});

Set Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy as described in JavaScript development when you need multithreaded decoding.

Client implementations

When you need a URL for a standard player, use Cloud live from an AppId. Do not pass accessToken into ImouPlayer.

Related reference

• Integrate a camera
• JavaScript development