The general tool classes provided by H5Player are mainly used to assist industry-level developers in creating their own custom plugins.
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. Industry-level developers can use this tool class to customize the position and content of the OSD information. To avoid interfering with the main code, the logic for displaying OSD information can be implemented as custom plugins at the industry level.
Description
It supports custom overlay rendering of OSD, police industry, and AEB information.
Methods
Tools.osdRenderer
// Interface definition:
interface IOSdRenderer {
render<T extends Object>(player: T, contents: TOsdFrame[]): void; // The rendering content.
clear<T extends Object>(player: T): void; // Clear
setZIndex(zIndex: number): void; // Set the rendering layer level.
}
type TOsdPosition = {
x: number;
y: number;
align?: 'left' | 'center';
};
type TOsdFrame = {
text: string;
fontSize: number;
position: TOsdPosition;
zIndex: number;
color?: string;
};
Example
// Create a live-view player instance.
const livePlayer = new stPlayer.createLivePlayer(parameter);
// The industry-layer custom plugin.
const osdRenderPlugin = (hooks) => {
// Adjust the rendering layer level as needed, but setting the level after calling render will be ineffective.
Tools.osdRenderer.setZIndex(3);
// Register onChannelRender hook to listen and get the data information of the current rendering frame.
hooks.onChannelRender.tap(
'onChannelRender',
// Deconstruct the required data.
({ param: { industry = [] } }, player) => {
// Filter 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 the OSD rendering information.
const contents = osd.map(({ x, y, d }, index) => {
return {
text: d,
fontSize: 16,
position: { x, y },
zIndex: index
};
});
// Clear specified screen rendering player using the player provided by onChannelRender.
Tools.osdRenderer.clear(player);
// Call render to display the OSD information for the player. After rendering the information, you need to call clear to remove it.
Tools.osdRenderer.render(player, contents);
}
);
};
// Inject custom plugin into live view player.
livePlayer.plugin.use(osdRenderPlugin);
//The industry parameters are as follows:
[
{
type: 0, // EIndustryType
osd: [
{
t: 0, // Time EOsdPoliceType|EOsdTaxiAebType
x: 100,
y: 100,
d: '2023-09-05 16:21:00'
}
]
}
];
//Industry types
enum EIndustryType {
RM2_INDUSTRY_TYPE_NONE = -1, //Industry types
RM2_INDUSTRY_TYPE_POLICE = 0, //Law enforcement industry
RM2_INDUSTRY_TYPE_TAXI_AEB = 1,//Taxi industry
RM2_INDUSTRY_TYPE_BUS_AEB = 2, //Bus industry
};
//Law enforcement overlay types
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, //Policeman ID
OSD_POLICE_TYPE_POLICE_NAME = 4, //Policeman 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-defined number
OSD_POLICE_TYPE_SPEED_GPS = 9, //Speed & GPS
OSD_POLICE_TYPE_PLATE = 10, //License plate number
OSD_POLICE_TYPE_CHANNEL = 11, //Channel name
};
//Taxi overlay types
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, //Brake status
OSD_TAXI_AEB_BRAKE_PEDAL_PERCENTAGE = 6, //Brake pedal percentage
OSD_TAXI_AEB_GAS_PEDAL_PERCENTAGE = 7, //Gas 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
};