1.0 Upgrade to 2.0 Guide#

1. Optimizations and Functions#

1.1. Optimization Items#

• In MSE mode, the memory usage is optimized by 40%-50%, with only 300-400 MB of memory consumed for 32 CIF channels.
• The WebCodecs decoder is added, which enhances the mosaic security level by applying mosaic at the data layer.
• In WASM/WebCodecs mode, live view now achieves low latency, with LAN latency reduced to under 500 ms.
• The AI display performance has been improved, particularly for ADAS, DMS, and mosaic displays.
• The package size has been reduced from 8.9 MB to 5.4 MB, and further compressed to 1.7 MB after gzip.

1.2. Live View Reuse#

• The method of creating instances has been modified. Instead of creating one instance per channel, instances are now created based on the device, which internally manages the concept of channels.

// 1.x Create a live view using the channel method.
const livePlayer = playerjs.createLivePlayer(divDom, {
 devId: 'Device ID',
 channel: '1'
});
// 2.x Create a live view play.
const livePlayer = playerjs.createLivePlayer(domList, {
 deviceInfos: [{
 devId: 'Device ID',
 channels: '1'
 }],
 ...
});

2. Interface Changes#

2.1 Global Configuration#

• The ip, port, and httpProtocol configuration items have been deleted, leaving only the baseURL.
• The mediaProtocol configuration has been deleted and should now be configured within individual instances.
• The aspectRatio configuration has been modified to be manually set using the extended functions.

// 1.x Configuration method
playerjs.config = {
	ip: "192.168.1.100",
	port: 21250,
	httpProtocol: "http",
 ...
};
// Or
playerjs.config = {
	baseURL: "http://192.168.1.100:21250",
 ...
};
// 2.x Configuration method
playerjs.config = {
	baseURL: "http://192.168.1.100:21250",
 ...
};

2.2. Live View#

• The replay interface has been added to restore closed channels.

const channel = 1;
playerIns.replay(channel);

• The addStream interface has been added to add the current device channel.

const channel = 1;
playerIns.addStream(channel);

• The getRenderInfoList interface has been added to obtain rendering-related information through instances.

const infoList = playerIns.getRenderInfoList();
// Data returned:
{
 channel: oneRender.channel,			// The rendering channel.
 realChannel: oneRender.realChannel, // The real channel.
 index,							 // The rendering order.
 devId: oneRender.devId, // The device ID.
 volume: oneRender.volume, // The current volume.
 domContainer: oneRender.container, // The parent DOM.
}

• The stop interface has been added.

const channel = 1;
playerIns.stop(channel); // If the channel is 0 or undefined, stop all.

• The createLivePlayer interface has been modified to use a domList instead of a single DOM, with devId and channel replaced by deviceInfos in the parameters.

// 2.x Create a live view play.
const livePlayer = playerjs.createLivePlayer(domList, {
 deviceInfos: [{
 devId: 'Device ID',
 channels: '1'
 }],
 ...
});

• The destroy interface has been modified to allow destroy by channel - destroy(channel, devId).

const channel = 1;
playerIns.destroy(channel); // If the channel is 0 or undefined, stop all.

• The volume property has been modified to allow setting volume by channel - volume = [{ devId: "divId", channel: channel, volume: 0.2 }];

playerIns.volume = [{ devId: 'divId', channel: channel, volume: 0.2 }];

• The status property has been modified.

const status = playerIns.status;
// Data format returned:
{
 state: "newIns",
 info: {
 oneDev: devInfo,
 channel: oneChan,
 },
}

• The aspectRatio interface has been modified to standardize setting the play aspect ratio through extended functions.

const value = 'origin';
const channel = 0; // If it is 0, update all.
playerIns.pluginMap.aspectRatio.set(value, channel);

2.3. Playback#

• The PlayerStatus property has been deleted.
• The stopAll interface has been deleted. To stop all playing videos, simply omit the channel parameter or set it to 0 in the stop interface.
• The destroyAll interface has been deleted. To destroy all channels, simply omit the channel parameter or set it to 0 in the stop interface.
• The getMediaElement method, mediaElements property, and channelPlayers property have been deleted.
• The getRenderInfoList interface has been added as a replacement for the removed interfaces (refer to the live view getRenderInfoList interface).
• The createHistoryPlayer interface has been modified by removing the previous timeList parameter, making fileList mandatory, and deleting timeZoneOffset.

const playerIns = playerjs.createHistoryPlayer(domList, {
 fileList: fileListData,
 ...
});

• The frame-by-frame interface has been modified from an extended function-based interface to an instance method, adding nextFrame and prevFrame methods.

const step = 10;
playerIns.nextFrame(step);

• The stop, destroy, destroyAll, resume, and pause interfaces have been modified to no longer return values.
• The seekTo method has been modified to seek.

const dateStr = '2024-04-17 19:00:00';
playerIns.seek(dateStr);

• The currentTime property has been modified, removing the setter and allowing only obtaining the current time. To seek to a specific time, use the seek method.

const timeNow = playerIns.currentTime;

• The aspectRatio interface has been modified to standardize setting the play aspect ratio through extended functions.

2.4. Extended Functions#

• The live view extended functions now include channel numbers for manual mosaic, full-screen, electronic zoom-in, screenshot, and video information functions.
• The original playback traversal of channelPlayer in the auxiliary tools has been removed, and processing is now processed uniformly from the outermost hooks.

2.5. HOOKS Event Changes#

• The afterRendererInit, afterControl, afterBufferChange, onAcceptFrameData, beginPlay, afterDestory, afterListenTalkAutoClose, startLoading, and stopLoading events have been deleted.
• The event for listening to the closure of the intercom device, previously processed by afterListenTalkAutoClose, has now been changed to use the onError callback.
• A new event, beforeSeek, has been added.

playerIns.hooks.beforeSeek.tap('beforeSeek', (playerIns, eventData) => {
    // do something
});

• For more details, see the table below.