0

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>
Meliodas
  • 3
  • 3
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Apr 17 '22 at 13:08
  • I highly doubt that if the PS browser doesn't natively support it, you would be able to find a way to hack that in. In all likelihood, it's intentional to prevent you building fully functional PS apps in a browser that you can distribute outside their stores... – somethinghere Apr 17 '22 at 14:18

1 Answers1

0

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.

DenverCoder9
  • 2,024
  • 11
  • 32