Access of Auxiliary Tools

The general tool classes provided by H5Player are mainly used to assist industry-level developers in creating their own custom plugins.

1. Tool Capabilities

Tools Live View Playback
OSD information display

2. Tool Access Guide

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.

3. Tool Function Details

3.1. OSD Information Rendering

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);
  • onChannelRender Parameters Description
//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
};