辅助工具接入#
H5Player 提供的通用工具类，主要用于辅助行业层实现自己的插件。
1. 工具能力支持#
| 工具类 | 直通 | 回放 |
|---|---|---|
| OSD 信息展示 | √ | √ |
2. 工具接入指南#
const loadSDKPromise = videoSDKVM.use(url);
const { Tools } = await loadSDKPromise;目前该工具类只集成了 osd 信息渲染功能。行业层可借助该工具类自定义 osd 信息展示的位置，展示的内容，为不干扰主体代码，可将其相关 osd 信息展示逻辑实现为行业层自定义插件。
3. 工具功能详情#
3.1. OSD 信息渲染#
描述
支持自定义 osd、警用行业、AEB 信息叠加渲染
方法
Tools.osdRenderer
// 其接口定义：
interface IOSdRenderer {
render<T extends Object>(player: T, contents: TOsdFrame[]): void; // 渲染内容
clear<T extends Object>(player: T): void; // 清除
setZIndex(zIndex: number): void; // 设置渲染层层级
}
type TOsdPosition = {
x: number;
y: number;
align?: 'left' | 'center';
};
type TOsdFrame = {
text: string;
fontSize: number;
position: TOsdPosition;
zIndex: number;
color?: string;
};示例
- 直通
// 创建直通播放实例
const livePlayer = new stPlayer.createLivePlayer(参数);
// 行业层自定义插件
const osdRenderPlugin = (hooks) => {
// 根据实际需要，可以调整渲染层的层级，但调用了render后设置层级无效
Tools.osdRenderer.setZIndex(3);
// 注册onChannelRender hook监听获取当前渲染帧的数据信息
hooks.onChannelRender.tap(
'onChannelRender',
// 解构当前需要的数据
({ param: { industry = [] } }, player) => {
// 过滤出当前行业层osd信息
const osdData = industry.filter((el) => RM2_INDUSTRY_TYPE_POLICE === el.type);
// 解构当前osd信息
const [{ osd = [] } = {}] = osdData;
// 生成osd渲染信息
const contents = osd.map(({ x, y, d }, index) => {
return {
text: d,
fontSize: 16,
position: { x, y },
zIndex: index
};
});
// 清除指定画面渲染的播放器 使用onChannelRender 带出的player即可
Tools.osdRenderer.clear(player);
// 调用render为player渲染指定contents的osd信息，该信息渲染后，需要调用clear才会清除
Tools.osdRenderer.render(player, contents);
}
);
};
// 为直通播放器注入自定义插件
livePlayer.plugin.use(osdRenderPlugin);- 回放
const historyPlayer = new stPlayer.createHistoryPlayer(参数);
const osdRenderPlugin = () => {
// 遍历回放各通道播放器并为其注册onChannelRender hook
historyPlayer.channelPlayers.forEach((_player) => {
_player.hooks.onChannelRender.tap(
'onChannelRender',
({ param: { industry = [] } }, player) => {
// 过滤出当前行业层osd信息
const osdData = industry.filter((el) => RM2_INDUSTRY_TYPE_POLICE === el.type);
// 解构当前osd信息
const [{ osd = [] } = {}] = osdData;
// 生成osd渲染信息
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 参数说明
//industry 参数如下：
[
{
type: 0, // EIndustryType
osd: [
{
t: 0, // 时间 EOsdPoliceType|EOsdTaxiAebType
x: 100,
y: 100,
d: '2023-09-05 16:21:00'
}
]
}
];
//行业类型
enum EIndustryType
{
RM2_INDUSTRY_TYPE_NONE = -1, //行业类型
RM2_INDUSTRY_TYPE_POLICE = 0, //警用行业
RM2_INDUSTRY_TYPE_TAXI_AEB = 1,//出租行业
RM2_INDUSTRY_TYPE_BUS_AEB = 2, //公交行业
};
//警用叠加类型
enum EOsdPoliceType {
OSD_POLICE_TYPE_NONE = -1,
OSD_POLICE_TYPE_TIME = 0, //时间
OSD_POLICE_TYPE_GPS = 1, //GPS
OSD_POLICE_TYPE_BWC = 2, //BWC序列号
OSD_POLICE_TYPE_POLICE_ID = 3, //警员ID
OSD_POLICE_TYPE_POLICE_NAME = 4, //警员姓名
OSD_POLICE_TYPE_POLICE_STATION = 5,//警局名称
OSD_POLICE_TYPE_ALARM = 6, //报警
OSD_POLICE_TYPE_RADAR = 7, //雷达
OSD_POLICE_TYPE_CAR_NUM = 8, //车辆自编号
OSD_POLICE_TYPE_SPEED_GPS = 9, //速度&GPS
OSD_POLICE_TYPE_PLATE = 10, //车牌号
OSD_POLICE_TYPE_CHANNEL = 11, //通道名称
};
//出租叠加类型
enum EOsdTaxiAebType {
OSD_TAXI_AEB_NONE = 0,
OSD_TAXI_AEB_LONGITUDINAL_VELOCITY = 1, //纵向速度
OSD_TAXI_AEB_LONGITUDINAL_DISTANCE = 2, //纵向距离
OSD_TAXI_AEB_LATERAL_DISTANCE = 3, //横向距离
OSD_TAXI_AEB_GEAR_STATE = 4, //挡位状态
OSD_TAXI_AEB_BRAKING_CONDITION = 5, //刹车状态
OSD_TAXI_AEB_BRAKE_PEDAL_PERCENTAGE = 6, //刹车踏板百分比
OSD_TAXI_AEB_GAS_PEDAL_PERCENTAGE = 7, //油门踏板百分比
OSD_TAXI_AEB_FORWARD_COLLISION_TIME = 8, //前向碰撞时间
OSD_TAXI_AEB_ULTRASONIC_DISTANCE = 9, //超声波距离
OSD_TAXI_AEB_STEERING_WHEEL_ANGLE = 10, //方向盘角度
OSD_TAXI_AEB_TURN_SIGNAL = 11, //转向灯信号
};
//公交叠加类型
enum EOsdBusAebType
{
OSD_BUS_AEB_NONE = 0,
OSD_BUS_AEB_LONGITUDINAL_VELOCITY = 1, //前向纵向速度
OSD_BUS_AEB_LONGITUDINAL_DISTANCE = 2, //前向纵向距离
OSD_BUS_AEB_LATERAL_DISTANCE = 3, //前向横向距离
OSD_BUS_AEB_GEAR_STATE = 4, //挡位状态
OSD_BUS_AEB_BRAKING_CONDITION = 5, //刹车状态
OSD_BUS_AEB_BRAKE_PEDAL_PERCENTAGE = 6, //刹车踏板百分比
OSD_BUS_AEB_GAS_PEDAL_PERCENTAGE = 7, //油门踏板百分比
OSD_BUS_AEB_FORWARD_COLLISION_TIME = 8, //前向碰撞时间
OSD_BUS_AEB_ULTRASONIC_DISTANCE = 9, //前向超声波距离
OSD_BUS_AEB_STEERING_WHEEL_ANGLE = 10, //方向盘角度
OSD_BUS_AEB_TURN_SIGNAL = 11, //转向灯信号
OSD_BUS_AEB_BRAKE_DECELERATION = 12, // 刹车减速度
OSD_BUS_AEB_SPEED = 13, // 车速
OSD_BUS_AEB_BACK_LONGITUDINAL_VELOCITY = 14, //后向纵向速度
OSD_BUS_AEB_BACK_LONGITUDINAL_DISTANCE = 15, //后向纵向距离
OSD_BUS_AEB_BACK_LATERAL_DISTANCE = 16, //后向横向距离
OSD_BUS_AEB_BACK_FORWARD_COLLISION_TIME = 17, //后向碰撞时间
OSD_BUS_AEB_BACK_ULTRASONIC_DISTANCE = 18, //后向超声波距离
OSD_BUS_AEB_LEFT_LONGITUDINAL_DISTANCE = 19, //左向纵向距离
OSD_BUS_AEB_LEFT_LATERAL_DISTANCE = 20, //左向横向距离
OSD_BUS_AEB_RIGHT_LONGITUDINAL_DISTANCE = 21, //右向纵向距离
OSD_BUS_AEB_RIGHT_LATERAL_DISTANCE = 22, //右向横向距离
};目录