How to read gamepad values in the playstation browser using usb, bluetooth or gamepad api?

Question

I tried connecting the gamepad with the ps browser, but the browser gives me an error, that navigator.bluetooth and navigator.usb are undefined.

It's easier to connect the gamepad with the chrome browser and read the values afterwards. I thought of running Chrome browswer as a program in the playstation browser on my website.

Isnt there any simple way of connecting the gamepad to the ps browser?

const gamepadName = document.getElementById('gamepad');
const xAxes = document.getElementById('xAxes');
const yAxes = document.getElementById('yAxes');
const xButton = document.getElementById('xButton');
const yButton = document.getElementById('yButton');
const aButton = document.getElementById('aButton');
const bButton = document.getElementById('bButton');
const bluetoothBtn = document.getElementById('bluetoothDevices');
const usbBtn = document.getElementById('usbDevices');

//connect with bluetooth
bluetoothBtn.addEventListener('click', async function onClick() {
  try {
    const options = {
      filters: [{
        services: [0x1800, 0x180F, 0x181C]
      }]
    };
    const device = await navigator.bluetooth.requestDevice(options);
    console.log(device);

  } catch (error) {
    console.log("Something went wrong. " + error);
  }

});

//Connect with usb
usbBtn.addEventListener('click', async function onClick() {

  const device = await navigator.usb.requestDevice({
    filters: [{
      vendorId: 0x054c,
      productId: 0x05c4
    }]
  });

  console.log(device);
});


//Get Gamepad Values
const threashold = 0.2;

const updateGamePad = (gamepad) => {
  gamepadName.innerHTML = gamepad.id;

  xAxes.innerHTML = gamepad.axes[0] >= threashold || gamepad.axes[0] <= -threashold ? gamepad.axes[0] : 0;
  yAxes.innerHTML = gamepad.axes[1] >= threashold || gamepad.axes[1] <= -threashold ? gamepad.axes[1] : 0;

  aButton.innerHTML = gamepad.buttons[0].pressed ? true : false;
  bButton.innerHTML = gamepad.buttons[1].pressed ? true : false;
  xButton.innerHTML = gamepad.buttons[2].pressed ? true : false;
  yButton.innerHTML = gamepad.buttons[3].pressed ? true : false;

  if (gamepad.axes[0].value < 0.5) {
    var mouse = Mouse.current;
    mouse.x += 150;
    alert(mouse)
  }
}

const draw = () => {
  const gamepads = navigator.getGamepads();
  for (let i = 0; i < gamepads.length; i++) {
    if (gamepads[i] && gamepads[i].connected) {
      updateGamePad(gamepads[i]);
    }
  }
  window.requestAnimationFrame(draw);
}

window.addEventListener('gamepadconnected', event => {
  window.requestAnimationFrame(draw);

});

<div class="list">

  <div class="sublist">
    <div>Gamepad:</div>
    <div id="gamepad"></div>
  </div>

  <div class="sublist">
    <div>X-axis:</div>
    <div id="xAxes"></div>
  </div>

  <div class="sublist">
    <div>Y-axis:</div>
    <div id="yAxes"></div>
  </div>

  <div class="sublist">
    <div>Button X:</div>
    <div id="xButton"></div>
  </div>

  <div class="sublist">
    <div>Button Y:</div>
    <div id="yButton"></div>
  </div>

  <div class="sublist">
    <div>Button B:</div>
    <div id="bButton"></div>
  </div>

  <div class="sublist">
    <div>Button A:</div>
    <div id="aButton"></div>
  </div>

  <div class="sublist">
    <button id="bluetoothDevices">Get bluetooth devices</button>
  </div>

  <div class="sublist">
    <button id="usbDevices">Get usb devices</button>
  </div>

Answer 1

There are two things here: First, the Gamepad API that you can use to get access to standard game controllers (which includes PlayStation controllers, but excludes some of their special features). Second, lower-level device APIs like WebHID, Web Bluetooth, etc., which in theory could be used to get access to the unsupported features of the controller, but which in practice the PlayStation browser doesn't support.