闪烁的 Stadia 控制器就像标准游戏手柄一样，这意味着它的所有按钮都无法使用 Gamepad API 访问。借助 WebHID，您现在可以访问缺少的按钮。
自从 Stadia 关闭以来，许多人担心该控制器最终会成为垃圾填埋场上的无用硬件。幸运的是，Stadia 团队决定通过提供自定义固件来打开 Stadia 控制器，您可以前往 Stadia 蓝牙模式页面将固件刷写到控制器上。这会使您的 Stadia 控制器看起来像一个标准游戏手柄，您可以通过 USB 线或蓝牙进行无线连接。Stadia 蓝牙页面本身使用了 WebHID 和 WebUSB，这在 Project Fugu API Showcase 中值得骄傲，但这不是本文的主题。在这篇博文中，我想介绍如何通过 WebHID 与 Stadia 控制器通信。
将 Stadia 控制器用作标准游戏手柄
刷写后，控制器会对操作系统显示为标准游戏手柄。请参见以下屏幕截图，了解标准游戏手柄上的常见按钮和轴排列方式。正如 Gamepad API 规范中所定义的，标准游戏手柄的按钮数量为 0 到 16，因此共计 17 个（方向键计为 4 个按钮）。如果您在游戏手柄测试人员演示中试用 Stadia 控制器，会发现它运行起来很酷。
不过，如果统计 Stadia 控制器上的按钮数量，总共有 19 个。如果您在游戏手柄测试工具中系统地逐一尝试这些按钮，则会发现 Assistant 和 Capture 按钮不起作用。即使游戏手柄规范中定义的游戏手柄 buttons 属性是开放式的，由于 Stadia 控制器显示为标准游戏手柄，因此只有按钮 0-16 会映射。您仍然可以使用其他按钮，但大多数游戏并不希望看到它们。
WebHID 有用
得益于 WebHID API，您可以响应缺失的按钮 17 和 18。如果您真正需要，甚至可以获取可通过 Gamepad API 提供的所有其他按钮和轴的数据。第一步是了解 Stadia 控制器如何向操作系统报告自身。其中一种方法是在任意随机页面上打开 Chrome 开发者工具控制台，然后从 WebHID API 请求未经过滤的设备列表。然后，您可以手动选择 Stadia 控制器以进行进一步检查。只需传递空的 filters 选项数组，即可获取未经过滤的设备列表。
const [device] = await navigator.hid.requestDevice({filters: []});
在选择器中，倒数第二个条目类似 Stadia 控制器。
选择“Stadia Controller rev. A”设备后，将生成的 HIDDevice 对象记录到控制台。这会显示 Stadia 控制器的 productId（37888，以十六进制格式表示 0x9400）和 vendorId（6353，以十六进制格式表示 0x18d1）。如果您在官方 USB 供应商 ID 表中查找 vendorID，就会发现 6353 对应的是您希望的值：Google Inc.。
上述流程的替代方法是转到网址栏中的 chrome://device-log/，按 Clear 按钮，插入 Stadia 控制器，然后按 Refresh。这与您获得的信息相同。
您还可以利用 HID Explorer 工具探索与计算机相连的 HID 设备的更多详细信息。
现在，您可以使用 vendorId 和 productId 这两个 ID 针对正确的 WebHID 设备正确进行过滤，以优化选择器中显示的内容。
const [stadiaController] = await navigator.hid.requestDevice({filters: [{
vendorId: 6353,
productId: 37888,
}]});
现在，所有不相关设备的噪音都消失了，仅显示 Stadia 控制器。
接下来，通过调用 open() 方法打开 HIDDevice。
await stadiaController.open();
再次记录 HIDDevice，并且 opened 标志设置为 true。
设备处于打开状态时，通过附加事件监听器来监听传入的 inputreport 事件。
stadiaController.addEventListener('inputreport', (e) => {
console.log(e);
});
当您按住控制器上的 Assistant 按钮后，控制台会记录两个事件。您可以将这些事件视为“按下 Google 助理按钮”和“按下 Google 助理按钮”事件。除了 timeStamp 之外，两个事件乍一看并没有什么区别。
HIDInputReportEvent 接口的 reportId 属性会针对此报告返回单字节标识前缀，如果 HID 接口不使用报告 ID，则返回 0。在本例中是 3。Secret 位于 data 属性中，表示为大小为 10 的 DataView。DataView 提供了一个低级接口，用于在二进制文件 ArrayBuffer 中读取和写入多种数字类型。若要从此表示法中更清晰地理解内容，则可从 ArrayBuffer 中创建一个 Uint8Array，这样您就可以看到各个 8 位无符号整数。
const data = new Uint8Array(event.data.buffer);
当您再次记录输入报告事件数据时，事情就会变得更有意义，“Google 助理按钮按下”和“Google 助理按钮释放”事件开始变得可以解读。第一个整数（两个事件中的 8）似乎与按下按钮有关，第二个整数（2 和 0）似乎与是否按下 Google 助理按钮有关。
按 Capture 按钮而不是 Assistant 按钮后，您会看到，在释放按钮后，第二个整数会从 1 切换为 0。这样一来，您可以编写一个非常简单的“驱动程序”，以便充分利用缺少的两个按钮。
stadia.addEventListener('inputreport', (event) => {
if (!e.reportId === 3) {
return;
}
const data = new Uint8Array(event.data.buffer);
if (data[0] === 8) {
if (data[1] === 1) {
hidButtons[1].classList.add('highlight');
} else if (data[1] === 2) {
hidButtons[0].classList.add('highlight');
} else if (data[1] === 3) {
hidButtons[0].classList.add('highlight');
hidButtons[1].classList.add('highlight');
} else {
hidButtons[0].classList.remove('highlight');
hidButtons[1].classList.remove('highlight');
}
}
});
通过像这样的逆向工程方法，你可以依次按下按钮，逐个轴地确定如何使用 WebHID 与 Stadia 控制器通信。掌握了窍门之后，剩下的工作几乎都是机械的整数映射。
现在还缺少一点，那就是 Gamepad API 提供的流畅连接体验。出于安全考虑，为了使用 Stadia 控制器等 WebHID 设备，您始终需要查看一次初始选择器体验，但日后建立连接时，您可以重新连接到已知设备。为此，请调用 getDevices() 方法。
let stadiaController;
const [device] = await navigator.hid.getDevices();
if (device && device.vendorId === 6353 && device.productId === 37888) {
stadiaController = device;
}
演示
在我构建的演示中，您可以看到由 Gamepad API 和 WebHID API 共同控制的 Stadia 控制器。请务必查看源代码，它基于本文中的代码段构建而成。为简单起见，我只显示了 A、B、X 和 Y 按钮（由 Gamepad API 控制），以及 Assistant 和 Capture 按钮（由 WebHID API 控制）。控制器图片下方是原始 WebHID 数据，方便您大致了解控制器上的所有按钮和轴。
总结
得益于新固件，Stadia 控制器现在可用作包含 17 个按钮的标准游戏手柄，在大多数情况下，这足以控制常见的网页游戏。无论出于什么原因，您需要从控制器上所有 19 个按钮中获取的数据，WebHID 可让您访问低级别输入报告，您可以通过对报告逐一进行逆向工程来解读此类报告。如果您在读完这篇文章后碰巧编写了一个完整的 WebHID 驱动程序，请务必与我联系，我很乐意在此处链接到您的项目。祝您使用 WebHID 一切顺利！
致谢
这篇文章由 François Beaufort 发表。