Signatur
Beschreibung
Die schreibgeschützte Eigenschaft Gamepad.id liefert einen String, der den angeschlossenen Controller beschreibt. Das Format ist nicht standardisiert. Browser nehmen aber in der Regel den Gerätenamen sowie die USB-Hersteller-ID (Vendor ID) und Produkt-ID (Product ID) auf, jeweils als vierstellige Hexadezimalzahl.
Typische Beispiele sind "Xbox 360 Controller (XInput STANDARD GAMEPAD)" in Chromium unter Windows, "045e-028e-Microsoft X-Box 360 pad" in Firefox oder "Wireless Controller (STANDARD GAMEPAD Vendor: 054c Product: 09cc)" in Chrome für einen DualShock 4.
Die Eigenschaft eignet sich gut, um Controller in der Oberfläche anzuzeigen (z. B. „Spieler 1: Xbox-Controller“), passende Tastenbelegungen auszuwählen oder die richtigen Button-Grafiken einzublenden (PlayStation-Symbole oder Xbox-Buchstaben). Wer Controller zuverlässig unterscheiden will, sollte Vendor- und Product-ID per regulärem Ausdruck herausziehen, statt den ganzen String zu vergleichen.
Für die Tastenbelegung selbst ist meist Gamepad.mapping die bessere Wahl. Hat es den Wert "standard", entspricht die Belegung dem Standardlayout der Gamepad API, und zwar unabhängig vom konkreten Gerät.
Rückgabewert
Beispiele
Controller beim Verbinden protokollieren
window.addEventListener('gamepadconnected', (event) => {
const { index, id, buttons, axes } = event.gamepad;
console.log(`Gamepad ${index} verbunden: ${id}`);
console.log(`${buttons.length} Tasten, ${axes.length} Achsen`);
});Vendor- und Product-ID browserübergreifend herausziehen
const parseGamepadId = (id) => {
// Chromium: "... (Vendor: 054c Product: 09cc)"
const chrome = id.match(/Vendor:\s*([0-9a-f]{4})\s*Product:\s*([0-9a-f]{4})/i);
if (chrome) return { vendor: chrome[1].toLowerCase(), product: chrome[2].toLowerCase() };
// Firefox: "054c-09cc-Wireless Controller"
const firefox = id.match(/^([0-9a-f]{1,4})-([0-9a-f]{1,4})-/i);
if (firefox) {
return {
vendor: firefox[1].padStart(4, '0').toLowerCase(),
product: firefox[2].padStart(4, '0').toLowerCase()
};
}
return null;
};
console.log(parseGamepadId('Wireless Controller (STANDARD GAMEPAD Vendor: 054c Product: 09cc)'));
console.log(parseGamepadId('45e-28e-Microsoft X-Box 360 pad'));Passende Button-Symbole anhand des Herstellers wählen
const VENDORS = { '054c': 'playstation', '045e': 'xbox', '057e': 'nintendo' };
const getButtonStyle = (gamepad) => {
const match = gamepad.id.match(/(?:Vendor:\s*|^)([0-9a-f]{3,4})/i);
const vendor = match ? match[1].padStart(4, '0').toLowerCase() : '';
return VENDORS[vendor] ?? 'generic';
};
const pollPads = () => {
for (const pad of navigator.getGamepads()) {
if (!pad) continue;
console.log(`Spieler ${pad.index + 1}: ${getButtonStyle(pad)}`);
}
};
window.addEventListener('gamepadconnected', pollPads);// Wichtig · Fallstricke
- Kein einheitliches Format: Chromium, Firefox und Safari bauen den String unterschiedlich auf. Firefox lässt führende Nullen weg (
45estatt045e). Vergleiche also nie den ganzen String exakt, sondern werte ihn tolerant mit regulären Ausdrücken aus. - Derselbe Controller kann je nach Betriebssystem, Treiber (XInput oder DirectInput) und Verbindungsart (USB oder Bluetooth) unterschiedliche IDs liefern.
idist nicht eindeutig: Zwei baugleiche Controller haben dieselbe ID. Zur Unterscheidung dientGamepad.index.- Datenschutz: Die ID kann zum Browser-Fingerprinting beitragen. Deshalb gibt es Gamepad-Daten nur in sicheren Kontexten (HTTPS). Außerdem liefern Browser sie oft erst, nachdem der Nutzer eine Taste gedrückt hat. Eine Berechtigungsrichtlinie (
Permissions-Policy: gamepad) kann den Zugriff ganz sperren. - Das Objekt aus
gamepadconnectedist in Chromium eine Momentaufnahme. Aktuelle Zustände liefertnavigator.getGamepads()in der Spielschleife.