Window: vrdisplaypresentchange — Ereignis · JavaScript-Referenz

Signatur

window.addEventListener("vrdisplaypresentchange", handler)

Beschreibung

Das Ereignis vrdisplaypresentchange gehört zur veralteten WebVR API. Es wird ausgelöst, sobald sich der Präsentationszustand eines VRDisplay ändert, also wenn eine Anwendung mit VRDisplay.requestPresent() in die VR-Darstellung wechselt oder diese über VRDisplay.exitPresent(), den Browser oder das Headset wieder verlässt.

Der Handler bekommt ein VRDisplayEvent. Über dessen Eigenschaft display kommst du an das betroffene Gerät und kannst mit display.isPresenting nachsehen, ob die Präsentation gerade begonnen hat oder zu Ende ist. Typische Aufgaben im Handler: den Render-Loop umstellen (VRDisplay.requestAnimationFrame() statt window.requestAnimationFrame()), die Canvas-Größe an die Augen-Parameter anpassen oder die Benutzeroberfläche („VR betreten“ bzw. „VR verlassen“) aktualisieren.

Registrieren kannst du den Handler mit window.addEventListener("vrdisplaypresentchange", handler) oder über die Eigenschaft window.onvrdisplaypresentchange. Für neue Projekte nimm die WebXR Device API: Dort übernehmen XRSession und ihr end-Ereignis diese Rolle.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"vrdisplaypresentchange"`.
$handler Pflicht	(event: VRDisplayEvent) => void		Callback, der ein `VRDisplayEvent` bekommt. Das betroffene Gerät steht in `event.display`.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once`, `signal` oder `capture`.

Rückgabewert

Typ

void

Beschreibung

addEventListener() gibt nichts zurück. Der Handler bekommt ein VRDisplayEvent mit den Eigenschaften display (VRDisplay) und reason (string | null).

Beispiele

Präsentationswechsel mit addEventListener erkennen

const onPresentChange = (event) => {
  const display = event.display;
  if (display.isPresenting) {
    console.log(`${display.displayName}: Präsentation gestartet`);
  } else {
    console.log(`${display.displayName}: Präsentation beendet`);
  }
};

if ('getVRDisplays' in navigator) {
  window.addEventListener('vrdisplaypresentchange', onPresentChange);
} else {
  console.log('WebVR wird nicht unterstützt – WebXR verwenden.');
}

Oculus Rift CV1: Präsentation gestartet

Canvas-Größe und UI beim Wechsel anpassen (on-Property)

const canvas = document.querySelector('#vr-canvas');
const button = document.querySelector('#vr-button');

window.onvrdisplaypresentchange = (event) => {
  const display = event.display;
  if (display.isPresenting) {
    const left = display.getEyeParameters('left');
    const right = display.getEyeParameters('right');
    canvas.width = Math.max(left.renderWidth, right.renderWidth) * 2;
    canvas.height = Math.max(left.renderHeight, right.renderHeight);
    button.textContent = 'VR verlassen';
  } else {
    canvas.width = canvas.clientWidth * devicePixelRatio;
    canvas.height = canvas.clientHeight * devicePixelRatio;
    button.textContent = 'VR betreten';
  }
};

Listener mit AbortController wieder entfernen

const controller = new AbortController();

window.addEventListener('vrdisplaypresentchange', (event) => {
  console.log('isPresenting:', event.display.isPresenting);
}, { signal: controller.signal });

// Später, z. B. beim Aufräumen der Komponente:
controller.abort();
// Alternativ: window.onvrdisplaypresentchange = null;

isPresenting: true

Moderner Ersatz mit WebXR

const startXR = async () => {
  if (!navigator.xr || !(await navigator.xr.isSessionSupported('immersive-vr'))) {
    console.log('Immersive VR nicht verfügbar');
    return;
  }
  const session = await navigator.xr.requestSession('immersive-vr');
  console.log('Präsentation gestartet');
  session.addEventListener('end', () => console.log('Präsentation beendet'));
};

document.querySelector('#vr-button').addEventListener('click', startXR);

Präsentation gestartet

// Wichtig · Fallstricke

Veraltet: WebVR war nie ein Standard und wurde aus Chrome, Edge und Firefox entfernt (Firefox gab es nur hinter Flags bzw. in alten Versionen). Safari hat es nie unterstützt. Für neue Projekte nimm die WebXR Device API (navigator.xr).
Prüfe die Unterstützung vor der Nutzung, z. B. mit 'getVRDisplays' in navigator oder 'onvrdisplaypresentchange' in window.
Das Ereignis wird bei beiden Richtungen ausgelöst. Werte deshalb immer event.display.isPresenting aus, statt einen Zustand anzunehmen.
requestPresent() muss aus einer Nutzeraktion heraus aufgerufen werden (z. B. einem Klick). Sonst lehnt der Browser ab und das Ereignis kommt nicht.
Bei mehreren angeschlossenen Displays kann das Ereignis mehrfach eintreffen. Prüfe über event.display, welches Gerät betroffen ist.
Für Polyfills wie webvr-polyfill gilt: Ihr Verhalten kann von nativen Umsetzungen abweichen.

Siehe auch

VRDisplay VRDisplayEvent Window: vrdisplayactivate Window: vrdisplayconnect XRSession