Listen for Oculus controller events in any website

Question

Is it possible for a webpage to listen for button presses of a Oculus controller simply using some generic javascript code like document.addEventListener?

In VR browsers by default the primary thumbstick scrolls the page up and down. The idea is to re-map it to trigger different actions.

From my research it looks like I need to use an A-frame but I'm looking for a generic solution that works across different websites with just Vanilla Javascript, not inside an immersive context.

Rechaba

Have you tried the GamePad API yet? There is also a test page which may show the controller input directly. – Kotta

@Kotta no luck unfortunately: files.peakd.com/file/peakd-hive/cryptoshots.nft/… – Rechaba

I looked a bit more around, the Oculus Browser is based on Chromium and based on the info from the Oculus Page and that WebXR is available, it would be possible to change the controls on the page. There is also a large set of tests and samples from immersive-web available. – Kotta

Thanks @Christopher. But my goal is to capture the thumbstick event in a regular web page, not in an immersive context. Will read more about it. – Rechaba

@Kotta Example 9 has handlers for all the Oculus controller buttons but works only in immersive mode (and that's not what i'm looking for): files.peakd.com/file/peakd-hive/cryptoshots.nft/… – Rechaba

Answer 1

In short, no.

It's not possible to interface with an Oculus controller outside of an immersive WebXR context.

The Inputs and Sources section of the WebXR API states:

While the Gamepad record is defined by the Gamepad API specification, it's not actually managed by the Gamepad API

So the Gamepad API will not work, and we're forced to use the WebXR API. Futhermore, we are forced to use one of the immersive modes for our webxr session. The WebXR Controller Sample states (confirmed this, see comments in rules below):

WebXR gamepads are not available during inline sessions.

That being said, you can still ...

Do it with minimal (vanilla) Javascript.

Depending on your definition of vanilla, this will work (Codesandbox):

const gl2 = document
  .querySelector('canvas.c3d')
  .getContext('webgl2');
const session = await navigator.xr.requestSession('immersive-vr')
session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl2) });

const hookGamepadControls = () => {
  const gamepad = session?.inputSources?.[0]?.gamepad; //replace with code to choose appropriate input source/controller
  if (gamepad) {
    setInterval(scroll(gamepad), 30);
  }
};
session.requestAnimationFrame(hookGamepadControls);  //We can request a single frame and run a timer to poll controller, no need to request additional frames

Minimum rules to follow to get Oculus or any VR/AR/XR controllers/gamepads to show up:

• Main rules:
  • We must not be in an inline context, only immersive-vr or immersive-ar (otherwise source.gamepad will be null)
  • We must be in a frame context (otherwise source.gamepad will be null)
• Collary rules:
  • We must connect the render state to the GL context (otherwise we won't receive animation frames)
  • We must have a canvas element (otherwise we won't be able to get a GL context)

Tzong