Player 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.

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. For multiple-vehicle operator layouts, see Multiple Vehicles.

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.

<div id="front" data-camera-id="vehicle_a:Front"></div>
<div id="rear" data-camera-id="vehicle_a:Rear"></div>
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.