H5Player provides general-purpose tool classes, which are mainly used to assist the industry layer to implement its own plug-ins.
Tools | Live view | playback |
---|---|---|
OSD information display | √ | √ |
const loadSDKPromise = videoSDKVM.use(url);
const { Tools } = await loadSDKPromise;
At present, this tool class only integrates the osd information rendering function. The industry layer can use this tool class to customize the position of the osd information display, and the displayed content, in order not to interfere with the main code, the relevant osd information display logic can be implemented as a custom plug-in for the industry layer.
Description
Support custom osd, police industry, AEB information superposition rendering
Methodology
Tools.osdRenderer
// Its interface definition;:
interface IOSdRenderer {
render<T extends Object>(player: T, contents: TOsdFrame[]): void; // Rendered content
clear<T extends Object>(player: T): void; // Clear
setZIndex(zIndex: number): void; // Set Render Layer Layer Level
}
type TOsdPosition = {
x: number;
y: number;
align?: 'left' | 'center';
};
type TOsdFrame = {
text: string;
fontSize: number;
position: TOsdPosition;
zIndex: number;
color?: string;
};
Demo
// Create a Live view playback instance
const livePlayer = new stPlayer.createLivePlayer(Parameter);
// Industry Layer Custom Plugin
const osdRenderPlugin = (hooks) => {
// According to actual needs, you can adjust the level of the rendering layer, but setting the level after calling render is invalid
Tools.osdRenderer.setZIndex(3);
// 注册onChannelRender hook Listen to get the data information of the current rendered frame
hooks.onChannelRender.tap(
'onChannelRender',
// Deconstruct currently needed data
({ param: { industry = [] } }, player) => {
// Filter out current industry layer osd information
const osdData = industry.filter((el) => RM2_INDUSTRY_TYPE_POLICE === el.type);
// Deconstruct current osd information
const [{ osd = [] } = {}] = osdData;
// Generate osd render information
const contents = osd.map(({ x, y, d }, index) => {
return {
text: d,
fontSize: 16,
position: { x, y },
zIndex: index
};
});
// Clear the player for specified screen rendering and use the player brought out by onChannelRender.
Tools.osdRenderer.clear(player);
// Call render to render the osd information of the specified contents for the player. After the information is rendered, you need to call clear to clear it.
Tools.osdRenderer.render(player, contents);
}
);
};
// Inject custom plug-ins into the Live view player
livePlayer.plugin.use(osdRenderPlugin);
const historyPlayer = new stPlayer.createHistoryPlayer(parameter);
const osdRenderPlugin = () => {
// Traverse the playback channel players and register onChannelRender hook for them
historyPlayer.channelPlayers.forEach((_player) => {
_player.hooks.onChannelRender.tap(
'onChannelRender',
({ param: { industry = [] } }, player) => {
// Filter out the current industry layer osd information
const osdData = industry.filter((el) => RM2_INDUSTRY_TYPE_POLICE === el.type);
// Deconstruct the current osd information
const [{ osd = [] } = {}] = osdData;
// Generate osd rendering information
const contents = osd.map(({ x, y, d }, index) => {
return {
text: d,
fontSize: 16,
position: { x, y },
zIndex: index
};
});
Tools.osdRenderer.clear(player);
Tools.osdRenderer.render(player, contents);
}
);
});
};
historyPlayer.plugin.use(osdRenderPlugin);
//industry parameters follows:
[
{
type: 0, // EIndustryType
osd: [
{
t: 0, // time EOsdPoliceType|EOsdTaxiAebType
x: 100,
y: 100,
d: '2023-09-05 16:21:00'
}
]
}
];
//Industry type
enum EIndustryType {
RM2_INDUSTRY_TYPE_NONE = -1, //Industry type
RM2_INDUSTRY_TYPE_POLICE = 0, //Police industry
RM2_INDUSTRY_TYPE_TAXI_AEB = 1,//Leasing industry
RM2_INDUSTRY_TYPE_BUS_AEB = 2, //bus industry
};
//Police overlay type
enum EOsdPoliceType {
OSD_POLICE_TYPE_NONE = -1,
OSD_POLICE_TYPE_TIME = 0, //Time
OSD_POLICE_TYPE_GPS = 1, //GPS
OSD_POLICE_TYPE_BWC = 2, //BWC serial number
OSD_POLICE_TYPE_POLICE_ID = 3, //Police ID
OSD_POLICE_TYPE_POLICE_NAME = 4, //Police name
OSD_POLICE_TYPE_POLICE_STATION = 5,//Police station name
OSD_POLICE_TYPE_ALARM = 6, //alarm
OSD_POLICE_TYPE_RADAR = 7, //Radar
OSD_POLICE_TYPE_CAR_NUM = 8, //Vehicle self-number
OSD_POLICE_TYPE_SPEED_GPS = 9, //Speed&GPS
OSD_POLICE_TYPE_PLATE = 10, //License plate number
OSD_POLICE_TYPE_CHANNEL = 11, //Channel name
};
//rental overlay type
enum EOsdTaxiAebType {
OSD_TAXI_AEB_NONE = 0,
OSD_TAXI_AEB_LONGITUDINAL_VELOCITY = 1, //Longitudinal velocity
OSD_TAXI_AEB_LONGITUDINAL_DISTANCE = 2, //Longitudinal distance
OSD_TAXI_AEB_LATERAL_DISTANCE = 3, //Lateral distance
OSD_TAXI_AEB_GEAR_STATE = 4, //Gear status
OSD_TAXI_AEB_BRAKING_CONDITION = 5, //braking status
OSD_TAXI_AEB_BRAKE_PEDAL_PERCENTAGE = 6, //Brake pedal percentage
OSD_TAXI_AEB_GAS_PEDAL_PERCENTAGE = 7, //Accelerator pedal percentage
OSD_TAXI_AEB_FORWARD_COLLISION_TIME = 8, //Forward collision time
OSD_TAXI_AEB_ULTRASONIC_DISTANCE = 9, //Ultrasonic distance
OSD_TAXI_AEB_STEERING_WHEEL_ANGLE = 10, // Steering wheel angle
OSD_TAXI_AEB_TURN_SIGNAL = 11, //Turn signal
};
//bus overlay type
enum EOsdBusAebType
{
OSD_BUS_AEB_NONE = 0,
OSD_BUS_AEB_LONGITUDINAL_VELOCITY = 1, //Longitudinal velocity
OSD_BUS_AEB_LONGITUDINAL_DISTANCE = 2, //Longitudinal velocity
OSD_BUS_AEB_LATERAL_DISTANCE = 3, //Lateral distance
OSD_BUS_AEB_GEAR_STATE = 4, //Gear status
OSD_BUS_AEB_BRAKING_CONDITION = 5, //braking status
OSD_BUS_AEB_BRAKE_PEDAL_PERCENTAGE = 6, //Brake pedal percentage
OSD_BUS_AEB_GAS_PEDAL_PERCENTAGE = 7, //Accelerator pedal percentage
OSD_BUS_AEB_FORWARD_COLLISION_TIME = 8, //Forward collision time
OSD_BUS_AEB_ULTRASONIC_DISTANCE = 9, //Ultrasonic distance
OSD_BUS_AEB_STEERING_WHEEL_ANGLE = 10, //Steering wheel angle
OSD_BUS_AEB_TURN_SIGNAL = 11, //Turn signal
OSD_BUS_AEB_BRAKE_DECELERATION = 12, // Braking deceleration
OSD_BUS_AEB_SPEED = 13, // Speed
OSD_BUS_AEB_BACK_LONGITUDINAL_VELOCITY = 14, //Backward longitudinal velocity
OSD_BUS_AEB_BACK_LONGITUDINAL_DISTANCE = 15, //Backward longitudinal distance
OSD_BUS_AEB_BACK_LATERAL_DISTANCE = 16, //Backward lateral distance
OSD_BUS_AEB_BACK_FORWARD_COLLISION_TIME = 17, //Backward collision time
OSD_BUS_AEB_BACK_ULTRASONIC_DISTANCE = 18, //Backward ultrasonic distance
OSD_BUS_AEB_LEFT_LONGITUDINAL_DISTANCE = 19, //Left longitudinal distance
OSD_BUS_AEB_LEFT_LATERAL_DISTANCE = 20, //Left lateral distance
OSD_BUS_AEB_RIGHT_LONGITUDINAL_DISTANCE = 21, //Right longitudinal distance
OSD_BUS_AEB_RIGHT_LATERAL_DISTANCE = 22, //Lateral distance to the right
};