XRMediaBinding: createQuadLayer() method

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The createQuadLayer() method of the XRMediaBinding interface returns an XRQuadLayer object which is a layer that takes up a flat rectangular space in the virtual environment.

Syntax

js
createQuadLayer(video, options)

Parameters

video

An HTMLVideoElement to display.

options

An object to configure the XRQuadLayer. The object can have the following properties and space is required:

height Optional

A number specifying the height of the layer.

invertStereo Optional

A boolean specifying if the natural location of each view in the video should be inverted. By default false.

layout Optional

A string indicating the layout of the video. Possible values:

default

The layer accommodates all views of the session.

mono

A single XRSubImage is allocated and presented to both eyes.

stereo

The user agent decides how it allocates the XRSubImage (one or two) and the layout (top/bottom or left/right). It is recommended to use the texture-array texture type for stereo layouts.

stereo-left-right

A single XRSubImage is allocated. Left eye gets the left area of the texture, right eye the right. This layout is designed to minimize draw calls for content that is already in stereo (for example stereo videos or images).

stereo-top-bottom

A single XRSubImage is allocated. Left eye gets the top area of the texture, right eye the bottom. This layout is designed to minimize draw calls for content that is already in stereo (for example stereo videos or images). The default value is mono.

space Required

An XRSpace object defining the layer's spatial relationship with the user's physical environment.

transform Optional

An XRRigidTransform object defining the offset and orientation relative to space.

width Optional

A number specifying the width of the layer.

Return value

An XRQuadLayer object.

Examples

Creating an XRQuadLayer to display a video

Create an XRMediaBinding and use an HTMLVideoElement that is passed into createQuadLayer(). Configure the quad layer using the options listed above and present the layer to the XR device by adding it to the layers render state in XRSession.updateRenderState().

js
function onXRSessionStarted(xrSession) {
  const xrMediaBinding = new XRMediaBinding(xrSession);
  const video = document.createElement("video");
  video.src = "just-fascination.mp4";

  const videoLayer = xrMediaBinding.createQuadLayer(video, {
    space: xrReferenceSpace,
  });

  xrSession.updateRenderState({
    layers: [videoLayer],
  });
}

Specifications

Specification
WebXR Layers API Level 1
# dom-xrmediabinding-createquadlayer

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createQuadLayer
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

See also