ブラウザの WebHID を p5.js Web Editor上で利用する：デバイスは DualShock 4

Last updated at 2024-07-02Posted at 2024-07-02

はじめに

以前も試して記事を書いたり、試した内容を X・YouTube に投稿していた「DualShock 4 をブラウザの API で扱う」という話です。

それを、自分がよく使っている環境の「p5.js Web Editor」で行います。

デモ動画

先に、動作している時の様子を掲載します。
内容はとりあえずのお試しで、シンプルなボタン押下の取得と、ボタン押下時の画面描画の変更です。

上記では、ボタン押下時に p5.js のキャンバスの色が変わっているのが確認できるかと思います。

WebHID で DualShock 4 を扱う（p5.js Web Editor上で実装）

それでは、環境として p5.js Web Editor を用いて、DualShock 4 を扱う WebHID を使ったプログラムを実装してみます。

WebHID で行う内容は、シンプルに「デバイスとの接続」と「Button 0 の押下」に絞って試しています。以下が実装した内容です。

function setup() {
  createCanvas(600, 500);
  background(220);
}

function draw() {}

function mouseClicked() {
  interactWithDevice();
}

async function interactWithDevice() {
  const requestParams = {
    filters: [{ vendorId: 0x054c }],
  };

  try {
    const devices = await navigator.hid.requestDevice(requestParams);
    if (devices.length === 0) {
      console.log("デバイスが選択されませんでした");
      return;
    }

    const device = devices[0];
    await device.open();
    console.log("Opened device: " + device.productName);

    device.addEventListener("inputreport", (event) => {
      const { data } = event;

      const temp = new Uint8Array(data.buffer);

      const button0Pressed = (temp[4] >> 5) & 1;
      if (button0Pressed) {
        background(100, 120, 220);
        // console.log("Button 0 pressed");
      } else {
        background(220);
        // console.log("Button 0 not pressed");
      }
    });
  } catch (error) {
    console.error("An error occurred:", error);
  }
}

デバイスを利用するにあたり、ユーザーのアクションをトリガーにした処理が必要になるようだったので、以下を処理に含めています。

function mouseClicked() {
  interactWithDevice();
}

また、その際に filters に特定の vendorId を指定し（※ vendorId: 0x054c の部分）、ユーザーに選択肢として提示するデバイスのリストを絞りこむようにしています。

そして以下の部分で、ボタン0 の状態を示している部分を読み取っています。

      const temp = new Uint8Array(data.buffer);

      const button0Pressed = (temp[4] >> 5) & 1;
      if (button0Pressed) {
        background(100, 120, 220);
      } else {
        background(220);
      }

それに関し、データフォーマットは Webを検索すると、以下などのサイトで確認できます。

●DS4-USB - PS4 Developer wiki
　https://www.psdevwiki.com/ps4/DS4-USB

おわりに

今回、WebHID を使って DualShock 4 との接続・ボタン押下の状態の取得を行ってみました。

ボタン押下であれば、同様のことを Gamepad API で行えて、そちらのほうが分かりやすかったりします。WebHID を用いる場合は、可能であれば直接使うのではなくライブラリ等を用いるほうが良いかもしれません。
※ 上で書いていたデータフォーマットを考慮した処理を、ライブラリが請け負ってくれるため

余談：過去に試したゲームコントローラーを使う内容の一部

ゲームコントローラーをブラウザで使う場合、「Gamepad API」か「WebHID API」のいずれかを使った方法が主なものとして挙げられます。
それらに関する内容で、以前記事を書いたり、試作をしてみたりした内容（X・YouTube に動画を投稿していたもの）を、一部ですが以下で紹介してみます。

記事

以下は、過去に記事にしたものの一部です。

DualShock 4 を使った試作の動画

以下は動画です。

これらはコントローラーの傾きを取得していますが、それを行うには Gamepad API ではダメで WebHID を使う必要があります。DualShock 4 の場合、WebHID のラッパーのライブラリがあるので、それを用いると良いです。

DualShock 4 以外のデバイスと WebHID との組み合わせ

DualShock 4 以外のデバイスと WebHID の組み合わせも、試したものがあったりもします。

これも Gamepad API ではなく WebHID を使う必要がるものです。
Joy-Con の場合も、WebHID のラッパーのライブラリがあるので、それを用いると良いです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up