VRDisplay.exitPresent() — Methode · JavaScript-Referenz

Signatur

VRDisplay.prototype.exitPresent()

Beschreibung

Die Methode exitPresent() der veralteten WebVR-Schnittstelle VRDisplay beendet eine Präsentation, die zuvor mit VRDisplay.requestPresent() gestartet wurde. Danach rendert die Anwendung nicht mehr auf das Headset, und das Canvas wird wieder ganz normal im Dokument angezeigt.

Der Rückgabewert ist ein Promise. Es wird erfüllt, sobald die Präsentation tatsächlich beendet ist. Lief gar keine Präsentation, wird es abgelehnt. Außerdem feuert am window das Ereignis vrdisplaypresentchange. Nach dem Beenden ist VRDisplay.isPresenting wieder false.

Typische Anwendungsfälle sind ein Knopf „VR verlassen“, das automatische Beenden am Ende einer Sitzung oder das Aufräumen beim Verlassen der Seite. Eine Render-Schleife, die mit VRDisplay.requestAnimationFrame() läuft, sollten Sie nach dem Beenden auf window.requestAnimationFrame() umstellen oder ganz anhalten.

Rückgabewert

Typ

Promise<void>

Beschreibung

Ein Promise, das erfüllt wird, sobald die Präsentation beendet ist. Wenn das VRDisplay gar nicht präsentiert hat, wird es abgelehnt.

Beispiele

Präsentation per Knopfdruck beenden

const exitButton = document.querySelector('#vr-exit');

const setupExit = (vrDisplay) => {
  exitButton.addEventListener('click', async () => {
    if (!vrDisplay.isPresenting) return;
    try {
      await vrDisplay.exitPresent();
      console.log('VR-Präsentation beendet');
    } catch (err) {
      console.error('Beenden fehlgeschlagen:', err);
    }
  });
};

if (navigator.getVRDisplays) {
  navigator.getVRDisplays().then((displays) => {
    if (displays.length > 0) setupExit(displays[0]);
  });
} else {
  console.warn('WebVR wird nicht unterstützt');
}

VR-Präsentation beendet

Auf vrdisplaypresentchange reagieren und Render-Schleife umstellen

let vrDisplay = null;
let frameId = null;

const render = () => {
  // Szene zeichnen …
  frameId = vrDisplay && vrDisplay.isPresenting
    ? vrDisplay.requestAnimationFrame(render)
    : window.requestAnimationFrame(render);
};

window.addEventListener('vrdisplaypresentchange', () => {
  if (!vrDisplay.isPresenting) {
    console.log('Zurück im normalen 2D-Modus');
    // Render-Schleife läuft ab dem nächsten Frame über window.requestAnimationFrame
  }
});

const leaveVR = async () => {
  if (vrDisplay?.isPresenting) {
    vrDisplay.cancelAnimationFrame(frameId);
    await vrDisplay.exitPresent();
    frameId = window.requestAnimationFrame(render);
  }
};

Zurück im normalen 2D-Modus

Moderne Alternative mit WebXR: XRSession.end()

let xrSession = null;

const enterXR = async () => {
  if (!navigator.xr) return console.warn('WebXR nicht verfügbar');
  xrSession = await navigator.xr.requestSession('immersive-vr');
  xrSession.addEventListener('end', () => {
    console.log('XR-Sitzung beendet');
    xrSession = null;
  });
};

// Entspricht exitPresent() in WebVR
const exitXR = async () => {
  if (xrSession) await xrSession.end();
};

XR-Sitzung beendet

// Wichtig · Fallstricke

Veraltet: Die WebVR-API ist abgekündigt und wurde durch die WebXR Device API ersetzt. Aktuelle Browser unterstützen VRDisplay nicht mehr. Früher war sie nur in Firefox (Windows), einigen Chromium-Versionen hinter einem Flag, bei Samsung Internet und Oculus Browser verfügbar. Für neue Projekte nehmen Sie XRSession.end().
Prüfen Sie vor dem Aufruf vrDisplay.isPresenting. Sonst wird das Promise abgelehnt, und ohne catch führt das zu einer unbehandelten Promise-Ablehnung.
Ein Frame, den Sie mit VRDisplay.requestAnimationFrame() angefordert haben, wird nach dem Beenden unter Umständen nicht mehr ausgeführt. Stellen Sie die Render-Schleife deshalb ausdrücklich auf window.requestAnimationFrame() um.
Auch der Browser oder der Nutzer kann die Präsentation beenden, etwa über einen Systemknopf am Headset. Verlassen Sie sich darum auf das Ereignis vrdisplaypresentchange statt nur auf Ihren eigenen Aufruf.
Verfügbar nur in sicheren Kontexten (HTTPS).

Siehe auch

VRDisplay VRDisplay.requestPresent() VRDisplay.isPresenting VRDisplay.requestAnimationFrame() XRSession.end() new PictureInPictureEvent()