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.

.. grid:: 2

    .. grid-item::

        .. list-table:: Real-time Video Viewer
            :widths: 20 80
            :header-rows: 1

            * - **Icon**
              - **Function**
            * - 1
              - Max frames per page
            * - 2
              - Page selector
            * - 3
              - Global Viewing Settings
            * - 4
              - Video Frame
            * - 5
              - Frame Statistics
            * - 6
              - Frame Viewing Settings

    .. grid-item::

        .. image:: ../media/viewer.jpg
            :alt: Video Viewer
            :width: 100%

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.

.. code-block:: console

    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 :ref:`Metadata Formats <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.