EZUIKitNative 示例

### Full Event Listener Setup Example Source: https://github.com/ezviz-openbiz/ezuikit-javascript-npm/blob/master/EZUIKitNative/EZUIKitNative集成文档.md Sets up listeners for 'connect', 'capturePicture', and 'stopSave' events, then initializes the player. ```javascript const native = new EZUIKit.EZUIKitNative({ container: "players-container" }); // 监听插件连接状态 native.eventEmitter.on('connect', (res) => { if (res.code === 0) { console.log('插件连接成功'); } else { console.error('插件连接失败', res); } }); // 监听截图事件 native.eventEmitter.on('capturePicture', (res) => { if (res.code === 0) { console.log('截图完成：', res.data.fileName); // 自动下载截图 const link = document.createElement('a'); link.download = res.data.fileName; link.href = res.data.base64; document.body.appendChild(link); link.click(); document.body.removeChild(link); } }); // 监听录制停止事件 native.eventEmitter.on('stopSave', (res) => { if (res.code === 0 && res.data) { console.log('录制完成：', res.data.url); } }); // 初始化播放器 native.init({ layout: { col: 4, row: 4 }, deviceList: [/* 设备配置 */] }); ``` -------------------------------- ### Complete EZUIKitNative Example Source: https://github.com/ezviz-openbiz/ezuikit-javascript-npm/blob/master/EZUIKitNative/EZUIKitNative集成文档.md A full HTML example demonstrating the setup and initialization of EZUIKitNative, including container preparation and player initialization upon successful plugin connection. ```html EZUIKitNative 示例

``` -------------------------------- ### Install ezuikit-js via npm Source: https://github.com/ezviz-openbiz/ezuikit-javascript-npm/blob/master/EZUIKitNative/EZUIKitNative集成文档.md Install the ezuikit-js dependency in your project using npm. ```javascript npm install ezuikit-js ``` -------------------------------- ### native.play(id, params) Source: https://github.com/ezviz-openbiz/ezuikit-javascript-npm/blob/master/EZUIKitNative/EZUIKitNative集成文档.md Starts playing the specified video or all videos. Can target a specific player by ID or index, or play all. ```APIDOC ## native.play(id, params) ### Description Starts playing the specified video or all videos. ### Method `native.play` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **id** (string | number) - Optional - The ID or index of the player to play. If omitted, all players will play. - **params** (any) - Optional - Playback parameters. ### Request Example ```javascript // Play a specific player by index native.play(0); // Play a specific player by ID native.play('player0'); // Play all players native.play(); ``` ### Response #### Success Response (200) No specific response body is documented. #### Response Example None ``` -------------------------------- ### Install ezuikit-js via yarn Source: https://github.com/ezviz-openbiz/ezuikit-javascript-npm/blob/master/EZUIKitNative/EZUIKitNative集成文档.md Install the ezuikit-js dependency in your project using yarn. ```javascript yarn add ezuikit-js ``` -------------------------------- ### Deploy to Docker Nginx Source: https://github.com/ezviz-openbiz/ezuikit-javascript-npm/blob/master/demos/with-docker-nginx/README.md Starts the Docker Compose services in detached mode to deploy to a Docker Nginx container. Access the application at http://localhost:8000. ```bash ## 部署到docker的nginx容器中 ## http://localhost:8000 docker-compose up -d ``` -------------------------------- ### Decoder Load Events Source: https://github.com/ezviz-openbiz/ezuikit-javascript-npm/blob/master/README.md Listen for events related to the decoder resource loading process, including start and completion. ```APIDOC ## Decoder Load Events ### Description Subscribes to `decoderLoad` to be notified when the decoder resources begin loading, and to `decoderLoaded` when the loading process is complete. ### Method `player.eventEmitter.on(EZUIKitPlayer.EVENTS.decoderLoad, () => { ... });` `player.eventEmitter.on(EZUIKitPlayer.EVENTS.decoderLoaded, () => { ... });` ### Parameters None ### Request Example ```javascript // Listen for decoder resource loading start player.eventEmitter.on(EZUIKitPlayer.EVENTS.decoderLoad, () => { console.log("Decoder loading started..."); }); // Listen for decoder resource loading completion player.eventEmitter.on(EZUIKitPlayer.EVENTS.decoderLoaded, () => { console.log("Decoder loading completed."); }); ``` ### Response None ``` -------------------------------- ### Listen for Decoder Load Events Source: https://github.com/ezviz-openbiz/ezuikit-javascript-npm/blob/master/README.md Handle events related to the decoder resource loading process. This includes events for when the decoder starts loading and when it finishes loading. ```javascript // 监听解码资源开始加载事件 player.eventEmitter.on(EZUIKitPlayer.EVENTS.decoderLoad, () => { // ... }); // 监听解码资源加载完成事件 player.eventEmitter.on(EZUIKitPlayer.EVENTS.decoderLoaded, () => { // ... }); ``` -------------------------------- ### Video Info Event Source: https://github.com/ezviz-openbiz/ezuikit-javascript-npm/blob/master/README.md Listen for video information events to get details about the video stream's format, resolution, and frame rate. ```APIDOC ## Video Info Event ### Description Subscribes to the `videoInfo` event to receive real-time information about the video stream, including format, resolution, and frame rate. This event can be continuously triggered if `streamInfoCBType` is set to 0 during initialization. ### Method `player.eventEmitter.on(EZUIKitPlayer.EVENTS.videoInfo, (info) => { ... });` ### Parameters None ### Event Data - **info** (VideoInfo) - An object containing video stream details: - **videoFormatName** (string) - The name of the video format. - **width** (number) - The width of the video. - **height** (number) - The height of the video. - **frameRate** (number) - The frame rate of the video. - **intervalOfIFrame** (number) - The interval of I-frames (average size of the last 5 GOPs). ### Request Example ```javascript player.eventEmitter.on(EZUIKitPlayer.EVENTS.videoInfo, (info) => { console.log("videoInfo", info); }); ``` ### Response None ``` -------------------------------- ### Audio Info Event Source: https://github.com/ezviz-openbiz/ezuikit-javascript-npm/blob/master/README.md Listen for audio information events to get details about the audio stream's format, channels, and sample rate. ```APIDOC ## Audio Info Event ### Description Subscribes to the `audioInfo` event to receive real-time information about the audio stream, such as format, channels, and sample rate. This event can be continuously triggered if `streamInfoCBType` is set to 0 during initialization. ### Method `player.eventEmitter.on(EZUIKitPlayer.EVENTS.audioInfo, (info) => { ... });` ### Parameters None ### Event Data - **info** (AudioInfo) - An object containing audio stream details: - **audioFormatName** (string) - The name of the audio format. - **audioChannels** (number) - The number of audio channels. - **audioBitsPerSample** (number) - The audio sample bit depth. - **audioSamplesRate** (number) - The audio sample rate. - **audioBitRate** (number) - The audio bitrate. ### Request Example ```javascript player.eventEmitter.on(EZUIKitPlayer.EVENTS.audioInfo, (info) => { console.log("audioInfo", info); }); ``` ### Response None ``` -------------------------------- ### EZUIKitNative Initialization (No-Plugin Mode) Source: https://github.com/ezviz-openbiz/ezuikit-javascript-npm/blob/master/EZUIKitNative/EZUIKitNative集成文档.md Demonstrates how to initialize EZUIKitNative in 'no-plugin' mode or when it's automatically selected due to device list constraints. It also shows how to access and control individual player instances. ```APIDOC ## Initialize EZUIKitNative in No-Plugin Mode ### Description Initializes EZUIKitNative, specifying the `mode` to `0` for no-plugin mode. This mode is also automatically used if `mode` is `1` (auto) and the `deviceList` count is 9 or less. The example shows how to access player instances via the `players` property and call methods on them, such as `changePlayUrl`. ### Constructor `new EZUIKit.EZUIKitNative(options)` ### Parameters #### Options - **container** (string) - The ID of the HTML element to contain the players. - **mode** (number) - Playback mode: `0` for no-plugin, `1` for auto, `2` for force-plugin. Defaults to `2`. - **deviceList** (Array