# Player Layout

Configure operator-side scenes, 2D video placement, native layout entities, and webview-controlled video layout.

Last validated: 2026-05-05

Use this page when the Player must display one or more vehicle streams in a predictable operator layout. The same concepts apply to OdenVR and Oden Dome Player, but dome projection adds calibration steps covered in [Stitching and Calibration](stitching-and-calibration.md).

## Choose a layout path

| Path | Use when |
| --- | --- |
| Webview layout | The operator UI is HTML/JavaScript, controls vehicle selection, or needs dynamic multi-vehicle video placement. |
| Native Oden scene | The layout is fixed, simple, or built from Oden entities without a web UI. |
| Hybrid | The project uses a native scene for base visualization and a webview for controls, state, or dynamic panels. |

For webview API details, see [Webview and JavaScript SDK](../integrate/webview-sdk.md). For multiple-vehicle operator layouts, see [Multiple Vehicles](../operate/multiple-vehicles.md).

## Add a received stream to a native scene

1.  Connect the Player to the Streamer.
    
2.  Confirm the Player project contains a `Remote Streamer` entity for the connected vehicle.
    
3.  Add a `2D Video` entity where the video should appear.
    
4.  In the `2D Video` entity, open `Input`.
    
5.  Select the received stream or camera name exposed by the Remote Streamer.
    
6.  Set placement, scale, and optional curvature.
    
7.  Save the Player project.
    

Important `2D Video` settings:

Visible In Eye

Restricts a video to left eye, right eye, or both eyes for stereo/HMD/dome-style output.

Curvature

Bends the video plane for immersive or dome-like layouts. `0` is flat, negative and positive values curve in opposite directions, and extra subdivisions are exposed when curvature is non-zero. More subdivisions look smoother but cost more GPU work.

Stereo Mode

Controls how stereo content is interpreted.

Use Eye

Selects which eye is used when the source contains stereo content and only one eye should be displayed.

Border

Adds a visible edge around the video panel.

View Fixed

Keeps the video attached to the view instead of the world. Use pixel or percentage-based sizing for HUD-style elements that should stay fixed in the viewport.

Color, Chroma Key, Matte Key

Adjust compositing and keyed video appearance.

Focus Region

Defines the part of the video that layout or packing logic should treat as important. Keep the aspect ratio locked unless the operator task intentionally stretches the source. Enable anti-aliasing only where edge quality matters.

## Use webview video layout

The Oden webview SDK maps DOM elements to Oden video surfaces. Use stable camera names, and include the vehicle prefix when several connected vehicles expose the same camera name.

```html
<div id="front" data-camera-id="vehicle_a:Front"></div>
<div id="rear" data-camera-id="vehicle_a:Rear"></div>
```

```javascript
const odenClient = getOrCreateOdenLayoutClient();

odenClient.registerVideo("front", document.getElementById("front"));
odenClient.registerVideo("rear", document.getElementById("rear"));
```

For a single connected vehicle, `Front` may be enough. For multi-vehicle layouts, use `vehicle_name:stream_name` so the layout server can select the correct Remote Streamer.

Use manual placement only when DOM-driven placement is not enough. Keep manual updates synchronized with resize events so video surfaces do not drift from their HTML elements.

## Use native layout entities

Native Oden layout entities are useful for fixed operator views that do not need a web application.

Flexbox / Flexbox Group

Creates a row or column layout for child entities. Use it for multi-camera dashboards, fixed panels, and nested layouts. Use one root Flexbox per scene, then add Flexbox Groups when nested rows or columns are needed. Root viewport padding controls the outer margin. Group settings control direction, fill behavior, spacing, and alignment. Highlight settings help inspect layout bounds while commissioning.

Scene Mirror

Mirrors part of another scene into the current scene. Use it to reuse a camera or visualization area without duplicating source entities.

Follow HMD

Keeps an entity positioned relative to the HMD. Use it for head-mounted overlays. Child entities inherit the headset transform. Use `Sync to HMD Camera` when an overlay should follow the HMD camera exactly. Front-facing see-through layouts depend on runtime timing and should be validated on the exact headset. Follow HMD is primarily used with OpenVR/SteamVR-style deployments.

Text and 2D Image

Add fixed labels, indicators, static overlays, or fallback graphics.

Model

Load a 3D model into the scene. Use inspect and collision settings when the model needs to be checked or interacted with.

Remote Stitched Video

Displays a stitched source received from a connected Streamer. Select it like any other received stream after the Remote Streamer has connected.

## Configure HMD layout

Use the Player `HMD` settings when the operator view is rendered to a headset. Tested headset families include Valve Index, HP Reverb G1/G2, and HTC Vive Pro 1/2. Other OpenVR/OpenXR-compatible headsets may work, but validate them with the production runtime and GPU.

Key HMD settings:

HMD Selection

Select `Any`, `Oculus`, `OpenVR`, `OpenXR`, or `None`. Use `None` to disable HMD output.

Fixed Position

Locks headset position at the origin.

Fps Cam Track HMD

Makes the monitor view track what the headset user sees.

Draw Background

Shows the Oden background in the headset.

Draw While Inactive

Keeps rendering even when the headset is not worn.

Draw To Screen

Disable screen rendering when only headset output is needed and GPU load must be reduced.

Avoid changing OpenXR/Oculus field-of-view factors unless Voysys support has asked for it; non-default FoV can cause operator discomfort.

Use `Follow HMD` for overlays that should stay positioned relative to the headset. When controller plugins depend on HMD inputs, test controller remapping on the exact runtime and controller generation because button and axis IDs can differ.

## Stream naming

Name streams and video inputs for the physical camera or operator task, not for temporary hardware labels.

Recommended examples:

-   `Front`
    
-   `Rear`
    
-   `Left`
    
-   `Right`
    
-   `Boom`
    
-   `Thermal`
    

Avoid names that change between vehicles in the same fleet. The webview and OCP pages use those names to route layout and active-vehicle behavior.

## Validate the layout

1.  Connect to a test Streamer or use `Test Source` inputs.
    
2.  Resize the Player window or switch to the production display mode.
    
3.  Confirm each video stays in the expected position.
    
4.  In webview layouts, disconnect and reconnect vehicles to verify that the UI re-registers surfaces.
    
5.  In multi-vehicle layouts, check that `vehicle_name:stream_name` entries do not collide.
    
6.  Save the Player project and reopen it.
    

For display mode and hidden-GUI deployment settings, see [Deployment](../operate/deployment.md).