Electroteque Media

Quest Native Media Layers

Efficient native media layer video rendering support for Quest headsets.

This example demonstrates rendering a left to right stereo video using the new Native media layers api for WebXR. Which is supported on Quest headsets and the Occulus browser. This will improve quality and framerate performance. With multiview also enabled multiview will be used for the top projection layer. questAutoVRSession will auto launch to WebXR when clicking the player.

Native media layer rendering is enabled by default with the useMediaLayers config.

    <div class="flex w-full h-auto my-auto">
      <video class="video-js vjs-default-skin vjs-fluid " crossorigin="anonymous" controls="" id="native-layers"></video>
  </div>

  <script type="text/javascript">

  	var player = videojs("native-layers", {
    "plugins": {
        "vrvideo": {
            "antialias": true,
            "multiview": true,
            "projection": "360_TB",
            "questAutoVRSession": true,
            "useMediaLayers": true
        }
    },
    "sources": [
        {
            "src": "https://oculus-mp4.s3.amazonaws.com/immersive+video+8K+for+Oculus+Browser/everestvr_4.3k_30s_360_h264_crf23_binaural_CREDIT_JON_GRIFFITH_injected.mp4",
            "type": "video/mp4"
        }
    ]
});

  </script>