Additional Video Functions Access#

1. Supported Functions#

2. Function Access Guide#

All functions are mounted on the player.pluginMap. For playback, plugins are uniformly mounted on the outer player historyPlayer.pluginMap. There's no need to call methods in the channel player. When calling a method, you can pass a channel object { devId, channel }. If you do not provide a channel object, the method will apply to all channels.

Usage example: Take enabling the electronic magnifier as an example.

// Enable the magnifier
Player.pluginMap.magnifier.enable({
    channel: 1,
    devId: '11111'
});

3. Function Details#

3.1. Electronic Magnifier#

Description

Click and hold the left mouse button to select an area on the video. Once you release the mouse button, the selected area will be magnified.

Interface

• Enable the magnifier

  player.pluginMap.magnifier.enable(channelIndex?, devId?);

• Disable the magnifier

  player.pluginMap.magnifier.disable(channelIndex?, devId?);

• Cancel the magnifier

  player.pluginMap.magnifier.cancelZoomIn(channelIndex?, devId?);

Note: channelIndex can be the channel object { devId, channel }. If it is not provided, the method will apply to all channels.

Example

// Enable the magnifier for channel 1
player.pluginMap.magnifier.enable(1, 'devId');
// Or
player.pluginMap.magnifier.enable({ devId: 'devId', channel: 1 });

3.2. Fullscreen#

Description

This plugin is used to display the video in fullscreen mode.

Note: This plugin will only display the video in fullscreen mode. If your business logic also requires the fullscreen display of control buttons or other UI components, please implement the fullscreen function yourself.

Interface

• Fullscreen

  player.pluginMap.fullscreen.fullscreen();

• Cancel fullscreen

  player.pluginMap.fullscreen.cancelFullscreen();

Note: channelIndex can be the channel object of the playback player { devId, channel }.

Example

// Full screen
player.pluginMap.fullscreen.fullscreen({ devId: 'devId', channel: 1 });

3.3. Screenshot#

Description

This plugin is used to capture a screenshot of the video, including video images, ADAS overlays, DMS overlays, and mosaic effects.

Interface

const base64Datas = player.pluginMap.snapshot.capture(channelIndex?,[, options]);

Parameters

Watermark options

Return value

Example

// Take a screenshot
player.pluginMap.snapshot.capture({ devId: 'devId', channel: 1 });

// Take screenshots for all channels
player.pluginMap.snapshot.capture();
player.pluginMap.snapshot.capture(null);
player.pluginMap.snapshot.capture('ALL');

// Take a screenshot and download it
player.pluginMap.snapshot.capture(
    {
        devId: 'devId',
        channel: 1
    },
    {
        fileName: `test${new Date().getTime()}`,
        autodownload: true,
        captureFormat: 'png',
        captureSize: 'original'
    }
);

3.4. Manual Mosaic#

Description

During video playing, fixed-position mosaics can be added manually.

Interface

• Edit mosaic

  player.pluginMap.codeMosaic.editMosaic(channelInfo?);

• Save mosaic

  player.pluginMap.codeMosaic.saveMosaic(channelInfo?);

• Clear mosaic (used during editing)

  player.pluginMap.codeMosaic.clearMosaic(channelInfo?);

• Get mosaic data

  player.pluginMap.codeMosaic.getData(channelInfo[]);

  Return value: mosaicData[]

• Set mosaic data

  player.pluginMap.codeMosaic.setData(mosaicData[]);

• Delete mosaic

  player.pluginMap.codeMosaic.clearData(channelInfo[]);

Note: channelInfo is the channel object { devId, channel }. If it is not provided, the method will apply to all channels. For getData and clearData methods, this parameter is required.

Parameter mosaicData structure:

{
    devId: string, // Device ID
    channel: number, // Channel number
    list: {
        x: number,
        y: number,
        w: number,
        h: number,
        mw: number,
        mh: number
    }[]
}

Example

// Edit mosaic for channel 1
player.pluginMap.codeMosaic.editMosaic({ devId: 'devId', channel: 1 });

// Edit mosaic for all channels
player.pluginMap.codeMosaic.editMosaic();

Dynamic Mosaic Setting Example

// Step 1: Get manual mosaic data (need to edit manual mosaic first)
player.pluginMap.codeMosaic.saveMosaic({devId: 'dev1', channel: 1});
player.pluginMap.codeMosaic.getData([{ devId: 'dev1', channel: 1 }]); // return [{devId: 'dev1', channel: 1, list: [{x: 10, y: 20, w: 100, h: 100, mw: 1920, mh: 1080}]}]

// Step 2: Store the obtained data in the backend, which can be retrieved through API

// Step 3: Register hook for dynamic mosaic setting
// Assume the stored data format is [{ devId, channel, startTime, endTime, data: mosaicData[] }]
const list = await ajax.get({...}); // Get stored data through backend API
player.hooks.onChannelRender.tap('render mosaic', (param, renderer) => {
    const { utc } = param.info; // Get the UTC of current rendering frame, in seconds
    const { realDevId: devId, realChannel: channel } = renderer;
    const data = list.find(p => {
        return p.devId === devId && p.channel === channel && p.startTime <= utc && p.endTime >= utc;
    });
    if (data) {
        player.pluginMap.codeMosaic.setData(p.data);
    } else {
        player.pluginMap.codeMosaic.clearData([{ devId, channel }]);
    }
});

3.5. Video Information#

Description

It displays the video's resolution, bitrate, and frame rate information in the bottom-right corner of the video.

Interface

• player.pluginMap.videoInfoLayer.setInfoList(data[], channelIndex?);

Parameters in data:

p: resolution fps: bitrate mbps: real-time frame rate

Example

// Display video information for channel 1
player.pluginMap.videoInfoLayer.setInfoList(['p', 'fps', 'mbps'], {
    devId: 'devId',
    channel: 1
});

// Enable for all channels
player.pluginMap.videoInfoLayer.setInfoList(['p', 'fps', 'mbps']);

// Disable display by passing empty array
player.pluginMap.videoInfoLayer.setInfoList([]);
// Disable display for specific channel
player.pluginMap.videoInfoLayer.setInfoList([], {
    devId: 'devId',
    channel: 1
});

3.6. Screen Ratio#

Description

It is used to set the screen ratio for the video. Value range: String, full for full screen, origin for original aspect ratio, and specific aspect ratios such as 16:9, 4:3, and 1:1.

Interface

• player.pluginMap.aspectRatio.set(value, channelInfo?);

Note: If channelInfo is empty or 0, it applies to all channels. If it is an object { channel: 1, devId: 'devId' }, it applies to the specified channel.

Example

// channel is 0 or empty to modify all channels, use positive integer for specific channel
player.pluginMap.aspectRatio.set(value);
player.pluginMap.aspectRatio.set(value, 0);
// Modify specific device channel (channel 1, devId 'devId')
player.pluginMap.aspectRatio.set(value, {
    devId: 'devId',
    channel: 1
});

3.7. Live View Delay Monitoring#

Description

Used to detect whether there is delay in live view and provide callbacks. The plugin is only effective in live view scenarios.

Interface

• player.pluginMap.liveDelay.setOptions(options: Object)

• Enable delay plugin

  player.pluginMap.liveDelay.enable()

• Turn off delay plugin

  player.pluginMap.liveDelay.disable();

Example

player.pluginMap.liveDelay.setOptions({
    interval: 10000,
    delayTime: 5000,
    onMessage: () => {
        console.log('The current live view has a delay, please check the network');
    }
});