Web Video Viewer

The OptiView Realtime Video Viewer provides a web-based interface for streaming, observing, and debugging video pipelines in real time. It enables developers to sink both video and metadata to the browser, where they can be rendered with overlays and performance metrics.

Real-time Video Viewer

Icon

Function

1

Max frames per page

2

Page selector

3

Global Viewing Settings

4

Video Frame

5

Frame Statistics

6

Frame Viewing Settings
Video Viewer

The video viewer is designed to support flexible streaming setups:

  • Developers can overlay metadata directly in the MLA and sink the combined output to the viewer.

  • Alternatively, video and metadata can be transmitted separately, allowing the viewer to perform rendering and overlay logic independently.

This flexibility supports a wide range of ML pipelines and enables precise visualization of inference results.

To access the viewer, click on the TV icon at the bottom left corner of the page. The video viewer can also be launched independently by navigating to https://<optiview-ip>:8081. This is useful in demo-only or display setups, where the viewer should operate standalone without the full development environment.

Media Sinks

OptiView supports up to 16 video sinks, each identified by a dedicated UDP port starting at 9000. These sinks accept H.264-encoded streams and forward them directly to the browser without any transcoding.

  • Each UDP sink corresponds to a video tile in the UI.

  • To send video to the first sink, configure your pipeline with snippet as below. This is an example when OptiView is installed on the DevKit, when OptiView is installed on the host, replace 127.0.0.1 with the host IP address.

udpsink host=127.0.0.1 port=9000

Media sinks are implemented as pass-through bridges, which ensures low latency, minimal CPU overhead, and high performance—ideal for real-time ML inference visualization.

In the OptiView UI, simply select the expected number of video outputs from your ML pipeline. The UI will automatically adjust the layout to accommodate the video tiles.

Metadata Sinks

Each video UDP sink (9000–9015) is paired with a corresponding metadata UDP sink (9100–9115). This allows metadata to be sent separately from the video stream.

  • Metadata sent to UDP ports 9100–9115 is internally routed to the corresponding video tile’s data channel.

  • This enables the web UI to receive and overlay structured inference results in real time.

Supported Metadata Types:

  • Object Detection

  • Pose Estimation

  • Semantic Segmentation

  • Classification

Message formats for these metadata types are defined in the Metadata Formats section.

Viewer Features

  • Stats Banner: Each video tile displays per-frame statistics including: - Resolution - Frame Rate - Bitrate - Metadata messages per second

  • Rendering Controls:

    • Global settings: Configure default rendering styles for metadata (e.g., bounding boxes, skeletons).

    • Per-frame settings: Dynamically adapt rendering based on frame-specific metadata content.

These controls are particularly useful when video and metadata are streamed separately, enabling dynamic and responsive overlay logic.

The OptiView Realtime Video Viewer bridges ML inference and real-time visualization in the browser. With support for multiple sinks, high-efficiency streaming, and metadata overlays, it provides a powerful interface for understanding and debugging video-based AI pipelines.