VRDisplayCapabilities.canPresent — Eigenschaft · JavaScript-Referenz

Signatur

VRDisplayCapabilities.canPresent

Beschreibung

Die schreibgeschützte Eigenschaft canPresent des Interfaces VRDisplayCapabilities gibt an, ob ein VRDisplay Inhalte darstellen kann. Ist sie true, handelt es sich meist um ein Head-Mounted Display (HMD), auf das mit VRDisplay.requestPresent() eine WebGL-Szene übertragen werden kann. Bei false liefert das Gerät nur Tracking-Daten, etwa ein reiner Positionssensor oder ein Magic-Window-Gerät.

Man fragt canPresent ab, bevor man einen „In VR ansehen“-Button anzeigt oder requestPresent() aufruft. So vermeidet man, dass die Anwendung Darstellung auf einem Gerät anfordert, das sie gar nicht kann. Das Objekt mit den Fähigkeiten bekommt man über VRDisplay.capabilities.

Die Eigenschaft gehört zur veralteten WebVR-API. Diese API wurde nie standardisiert und ist durch die WebXR Device API ersetzt worden. Für neue Projekte sollte man navigator.xr.isSessionSupported('immersive-vr') verwenden.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Display Inhalte darstellen kann (z. B. ein HMD), sonst false.

Beispiele

Fähigkeiten aller VR-Displays auslesen

const listDisplays = async () => {
  if (!navigator.getVRDisplays) {
    console.log('WebVR wird nicht unterstützt');
    return;
  }
  const displays = await navigator.getVRDisplays();
  displays.forEach((display) => {
    const { canPresent } = display.capabilities;
    console.log(`${display.displayName}: canPresent = ${canPresent}`);
  });
};

listDisplays();

Oculus Rift CV1: canPresent = true

VR-Button nur bei darstellungsfähigem Gerät anzeigen

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

const setupVR = async () => {
  const [display] = (await navigator.getVRDisplays?.()) ?? [];
  if (!display || !display.capabilities.canPresent) {
    vrButton.hidden = true;
    return;
  }
  vrButton.hidden = false;
  vrButton.addEventListener('click', async () => {
    // requestPresent muss in einer Benutzergeste aufgerufen werden
    await display.requestPresent([{ source: canvas }]);
    console.log('VR-Darstellung gestartet');
  });
};

setupVR();

VR-Darstellung gestartet

Moderne Alternative mit WebXR

const checkImmersiveVR = async () => {
  if (!('xr' in navigator)) return false;
  return navigator.xr.isSessionSupported('immersive-vr');
};

checkImmersiveVR().then((ok) => console.log('Immersive VR möglich:', ok));

Immersive VR möglich: true

// Wichtig · Fallstricke

Veraltet: WebVR ist aus allen aktuellen Browsern entfernt worden bzw. war nie standardmäßig aktiviert. Unterstützt wurde die API nur in älteren Firefox-Versionen, im Firefox Reality Browser, im Oculus Browser und in Chrome/Edge hinter Flags. Nutze stattdessen die WebXR Device API.
Prüfe immer zuerst, ob es navigator.getVRDisplays überhaupt gibt, sonst tritt ein TypeError auf.
Wenn canPresent true ist, heißt das nicht, dass requestPresent() auch klappt. Der Aufruf braucht eine Benutzergeste und kann trotzdem abgelehnt werden. Deshalb sollte das zurückgegebene Promise immer mit catch abgesichert werden.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ohne Fehlermeldung ignoriert, im Strict Mode löst sie einen TypeError aus.
WebVR und WebXR funktionieren nur in einem sicheren Kontext (HTTPS).

Siehe auch

VRDisplayCapabilities VRDisplay.capabilities VRDisplay.requestPresent() VRDisplayCapabilities.hasExternalDisplay VRDisplayCapabilities.maxLayers XRSystem.isSessionSupported() VRDisplayCapabilities.hasOrientation