Accessory Tool Access

H5Player provides general-purpose tool classes, which are mainly used to assist the industry layer to implement its own plug-ins.

1. Tool capability support

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. 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.

3. Tools Feature Details

3.1. OSD Information Rendering

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

  • Live view
// 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);
  • playback
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);
  • onChannelRender Parameter Description
//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
};