Window: vrdisplayconnect — Ereignis · JavaScript-Referenz

Signatur

window.addEventListener("vrdisplayconnect", handler)

Beschreibung

Das Ereignis vrdisplayconnect gehört zur veralteten WebVR-API. Es wird am Window-Objekt ausgelöst, sobald der Browser ein kompatibles VR-Headset (z. B. Oculus Rift, HTC Vive) erkennt, das neu mit dem Rechner verbunden wurde. Das Ereignisobjekt ist ein VRDisplayEvent. Dessen Eigenschaft display verweist auf das betreffende VRDisplay.

Gedacht war das Ereignis dafür, eine Anwendung dynamisch auf neue Hardware reagieren zu lassen, ohne die Seite neu zu laden. Typische Anwendungsfälle: einen „In VR ansehen“-Button einblenden, das neue Display in eine Geräteliste aufnehmen oder direkt requestPresent() vorbereiten.

Man registriert den Handler entweder mit window.addEventListener("vrdisplayconnect", handler) oder über die Eigenschaft window.onvrdisplayconnect. Das Gegenstück ist vrdisplaydisconnect, das beim Trennen des Geräts feuert.

Wichtig: WebVR wurde nie standardisiert. Die API ist durch die WebXR Device API ersetzt worden. Neuer Code sollte stattdessen navigator.xr und das Ereignis devicechange an XRSystem verwenden.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"vrdisplayconnect"`.
$handler Pflicht	(event: VRDisplayEvent) => void		Callback, der ein `VRDisplayEvent` erhält. `event.display` ist das angeschlossene `VRDisplay`, `event.reason` ist optional der Auslösegrund.
$options	boolean\|AddEventListenerOptions	false	Übliche Listener-Optionen wie `once`, `signal` oder `capture`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück.

Beispiele

Auf neu angeschlossenes Headset reagieren (addEventListener)

const vrButton = document.querySelector('#enter-vr');

const onConnect = (event) => {
  const { display } = event;
  console.log(`VR-Display verbunden: ${display.displayName}`);
  vrButton.hidden = false;
};

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

VR-Display verbunden: Oculus Rift CV1

on-Property und Aufräumen mit removeEventListener

// Variante über die on-Property
window.onvrdisplayconnect = (event) => {
  console.log('Display-ID:', event.display.displayId);
};

// Variante mit benanntem Handler, der später entfernt wird
const handleConnect = (event) => {
  console.log('Verbunden:', event.display.displayName);
  // nur das erste Gerät berücksichtigen
  window.removeEventListener('vrdisplayconnect', handleConnect);
};
window.addEventListener('vrdisplayconnect', handleConnect);

Display-ID: 1 Verbunden: HTC Vive

Moderner Ersatz: WebXR devicechange

const checkXR = async () => {
  if (!navigator.xr) {
    console.log('WebXR nicht verfügbar');
    return;
  }
  const supported = await navigator.xr.isSessionSupported('immersive-vr');
  console.log('Immersive VR möglich:', supported);
};

navigator.xr?.addEventListener('devicechange', checkXR);
checkXR();

Immersive VR möglich: true

// Wichtig · Fallstricke

Veraltet und nicht standardisiert: WebVR wurde nur in älteren Versionen von Firefox (Desktop), Edge (Legacy), Samsung Internet und einigen Chrome-Builds mit Flag unterstützt. In aktuellen Browsern fehlt die API. Verwende die WebXR Device API.
Ein Gerät, das schon beim Laden der Seite angeschlossen ist, löst das Ereignis in der Regel nicht aus. Solche Geräte ermittelst du zusätzlich per navigator.getVRDisplays().
Prüfe die Unterstützung vorher, z. B. mit 'getVRDisplays' in navigator. Andernfalls wird der Handler einfach nie aufgerufen, ohne dass ein Fehler erscheint.
Manche Implementierungen setzten einen sicheren Kontext (HTTPS) voraus. Außerdem kann die Richtlinie Permissions-Policy den Zugriff blockieren.

Siehe auch

Window: vrdisplaydisconnect Window: vrdisplayactivate VRDisplayEvent VRDisplay Navigator.getVRDisplays() XRSystem: devicechange MediaQueryList: change