Video

Declared in video-base.js

This is the default widget for any video and image topics transmitted as H.264. This includes depth (or any other single-channel frames) that can be colorized before encoding into video on the Bridge Client. See See Video and image topics for configuration options related to video encoding.

Detection2DArray Overlay

Declared in detections2d.js

The panel can also overlay video frames with custom data. Out of this box, these are vision_msgs/msg/Detection2DArray topics, that are often used in computer vision. Below are configuration options for a Detection2DArray topic:

phntm_bridge.yaml or phnrm_agent.yaml

 /**:
   ros__parameters:

     /detections/front/boxes_2d:
       input_width: 416 # detection input frame width
       input_height: 416 # detection input frame height
       label_map: [ 'person', 'woman', 'man', 'camera', 'TV' ] # class label map
       color_map: [ '#0000ff', 'red', NULL, 'yellow', '', '#ff00ff' ] # colors to use for each class

Implementing Custom Overlays

To display any data you need over your video streams, you can create a custom video overlays by extending the VideoPluginBase class.

There is one other very simple example available in our demos displaying TwistStamped messages as a visualisation of input keys. You will find the source code in the Bridge UI Extras repository. It shows how to use custom graphics, CSS, and how to work with the UI API. In case you’d like to extend the Detection2DArray overlay shown above, the source code is here.

See more details about creating, hosting and loading your own extensions in Customizing the User Interface.