Gamepad Viewer - Controller-Overlay für Streams
Ein Gamepad-Viewer ist ein Streamer-Overlay, das deine Controller-Inputs als Live-Diagramm auf dem Bildschirm darstellt, damit Zuschauer sehen können, welche Tasten du drückst und wie du die Sticks bewegst. Unser kostenloses browserbasiertes Gamepad-Viewer lässt sich direkt als Browser-Quelle in OBS einfügen: Wähle ein PlayStation-, Xbox-, Switch- oder Generik-Layout, wähle eine Akzentfarbe und Skalierung, dann kopiere die konfigurierte URL in OBS - deine Einstellungen sind in der URL gespeichert, sodass die Quelle auch nach Stream-Neustarts konsistent bleibt. Funktioniert mit jedem Controller, den der Browser als Standard-Gamepad erkennt. Kein Download erforderlich.
Erstelle deine Controller-Ansicht für den Stream
Verbinde deinen Controller
Stecke deinen Controller ein oder koppeln ihn per Bluetooth, dann drücke eine beliebige Taste. Der Browser erkennt Standard-Gamepads automatisch, und der Verbindungsstatus wird oben auf der Seite zusammen mit dem erkannten Controller-Identifier angezeigt.
Wähle ein Layout
Wähle PlayStation, Xbox, Switch oder Generisch. Drücke jede Haupttaste und bewege beide Sticks, um das Diagramm zu prüfen. Der Switch Pro Controller hat versetzte Sticks; ein Layoutbild ändert die Eingabezuordnung nicht.
Akzentfarbe und Skalierung anpassen
Sieben Akzentthemen (Violett, Cyan, Fuchsia, Smaragdgrün, Bernstein, Rose, Weiß) bestimmen die Highlight-Farbe für gedrückte Tasten und aktive Sticks. Der Skalierungsregler läuft von 0,5x bis 2,0x, damit das Overlay zu deinem Stream-Layout passt. Änderungen wirken sich sofort auf die Live-Vorschau aus.
Die OBS-Browser-Quellen-URL kopieren
Das OBS-Panel erzeugt eine konfigurierte URL mit deinen Einstellungen im Query-String und ui=off, damit die Seite nur den Controller und keine Steuerelemente auf transparentem Hintergrund darstellt. Klicke Kopieren, füge sie in OBS als Browser-Quelle ein, stelle Breite und Höhe passend zum Controller-Diagramm ein, und das Overlay ist live.
Stream-Neustarts laden dieselben Einstellungen
Da die Konfiguration in der URL liegt, öffnet OBS jedes Mal bei Aktivierung der Szene dasselbe Overlay auf dieselbe Weise. Kein erneutes Setup nötig. Um später Themen oder Layouts zu ändern, bearbeite die URL oder besuche diese Seite erneut, passe an und kopiere die neue URL in OBS.
Ein Controller-Overlay einrichten, das zu deinem Stream passt
Die Beschriftungen prüfen, bevor du den Link kopierst
Wähle PlayStation, Xbox, Switch oder Generic. Drücke jeden Gesichtsbutton, bewege beide Sticks und ziehe die Trigger. Ein Layout ändert das Bild; es remapt nicht dein Spiel.
Wähle eine Farbe, die sich vom Spiel abhebt, und eine Größe, die wichtige Bildschirminformationen frei lässt.
Die konfigurierte URL zu OBS hinzufügen
Kopiere die Browser-Source-URL in eine OBS Browser-Quelle. Starte bei 800 mal 500 Pixel und passe den Viewport an, falls das Diagramm abgeschnitten wird. Teste Tastenanschläge in einer kurzen lokalen Aufnahme.
Wenn du später die Viewer-Einstellungen änderst, kopiere die neue URL zu OBS. Die bestehende Quelle übernimmt keine Änderungen, die in einem anderen Browser-Tab vorgenommen wurden.
Ein zweiter PC benötigt seinen eigenen Eingabepfad
Der Viewer liest einen Controller, der für den Rechner verfügbar ist, auf dem er läuft. Eine Konsole-Capture-Karte oder ein Link auf einem zweiten PC relayed keine Controller-Eingaben.
Ein GPADLAB-Download ist nicht erforderlich. OBS lädt die konfigurierte Seite, aber der Controller-Zugriff hängt weiterhin von der Browser-Quelle und deinem Setup ab.
Was die einzelnen URL-Parameter steuern
Alle Einstellungen sind URL-Abfrageparameter, sodass das Overlay vollständig über die Adressleiste konfigurierbar ist - nützlich für Streamer mit OBS-Szenenvorlagen oder Skript-Setups.
| Parameter | Werte | Was es steuert |
|---|---|---|
| layout | ps5 · xbox · switch · generisch | Wählt das Controller-Diagramm und seine Beschriftungen. PlayStation, Xbox, Switch und Generisch sind verfügbar. Prüfe jede Taste und jeden Stick gegen das Bild; das ausgewählte Layout remapt die Eingabe nicht. |
| theme | violet · cyan · fuchsia · emerald · amber · rose · white | Akzentfarbe für gedrückte Tasten, aktive Stickpositionen und Trigger-Füllungen. Wähle das Theme, das zu deiner Stream-Markierung passt. |
| scale | 0,5 bis 2,0 (Dezimal) | Visueller Skalierungsfaktor für das Controller-Diagramm. 1,0 ist die Basisgröße. Nützlich, um das Overlay passend neben Kamera und Game-Play in deinem Stream-Layout zu dimensionieren. |
| bg | transparent · dark · light | Hintergrundmodus. Transparent ist der Standard für OBS-Browser-Quellen (lässt dein Game-Play oder deine Szene durchscheinen). Dunkel und Hell sind nützlich, wenn die Seite standalone im Browser als Controller-Prüfer verwendet wird. |
| ui | on (Standard) · off | Ob die Konfigurationssteuerungen sichtbar sind. Die OBS-Browser-Quellen-URL verwendet automatisch ui=off, sodass das Overlay nur den Controller und keine Steuerelemente zeigt. Klicke auf Vorschau OBS-Modus auf der Seite, um zu sehen, wie das aussieht. |
Layouts passen zu gängigen Controllern
Wähle das Layout, das zu dem physischen Controller passt, den du im Stream verwendest. Jeder Standard-Controller funktioniert mit jedem Layout, aber das Diagramm wirkt am natürlichsten, wenn es mit dem Controller gepaart wird, den es darstellt.
Häufige Schritte zur Fehlerbehebung
ÄhnlicheDiagnostiken
Fragen zu Gamepad-Anzeige
Stelle Layout, Thema und Skalierung auf dieser Seite so ein, dass das Overlay passt. Klicke auf den Kopieren-Button im Panel mit der OBS Browser-Source-URL. Füge in OBS eine neue Quelle hinzu, wähle Browser, füge die URL in das URL-Feld ein, setze die Breite auf 800 und die Höhe auf 500 (oder etwas, das deinem skalierten Diagramm entspricht), und aktiviere "Refresh browser when scene becomes active", damit das Overlay beim Aktivieren der Szene sauber neu geladen wird. Die Quelle ist jetzt fertig - deine Controller-Eingaben werden live angezeigt, sobald die Szene aktiv ist.
Verwende die konfigurierte OBS-URL mit ui=off und bg=transparent. Stelle sicher, dass du die ganze URL kopiert hast, und lade die Quelle neu. Der Overlay-Modus sollte nur den Controller zeigen. Falls nicht, melde die URL-Einstellungen und die OBS-Version; eine Szenen-Neuladungseinstellung ist keine Transparenz-Korrektur.
Nein. GPADLABs Gamepad-Viewer läuft in deinem Browser. Um ihn in OBS zu verwenden, kopiere den konfigurierten Link in eine Browser-Quelle. Du benötigst keine separate GPADLAB-App oder Browser-Erweiterung. Der Controller-Zugriff hängt weiterhin von der Browser-Quelle und deinem Setup ab.
Die aktuellen Einstellungen bieten Layout, Thema, Skalierung und Hintergrund - die vier Einstellungen, die die große Mehrheit der Streamer-Bedürfnisse abdecken. Individuelle Positionierungen von Buttons, individuelle Beschriftungen und Recording-Overlays sind aus Gründen der Fokussierung und Geschwindigkeit für das MVP bewusst nicht enthalten. Falls dir eine Funktion fehlt, die du tatsächlich nutzen würdest, sende Feedback - wir priorisieren streamerorientierte Erweiterungen in der öffentlichen Roadmap.
Der Browser muss nutzbare Button- und Achsenwerte ausgeben. Wähle ein Layout und prüfe jede Steuerung. "Generic" zeigt nummerierte Buttons an, kann aber eine nichtstandardisierte Zuordnung nicht korrigieren. Wenn das Diagramm nicht mit deiner Eingabe übereinstimmt, gehe nicht davon aus, dass es den Controller genau widerspiegelt.
Das sind sie nicht - das Switch-Layout bezeichnet die Gesichtsbuttons der Reihe nach mit B, A, Y, X, genau so wie sie physisch auf einem Nintendo-Controller aufgedruckt sind (B unten, A rechts, Y links, X oben). Das ist das Gegenteil von Xboxs A/B/X/Y-Reihenfolge. Das Diagramm entspricht den physischen Beschriftungen deines Controllers - das ist es, was deine Stream-Zuschauer sehen, wenn sie dir beim Spielen zuschauen.
Ja. Streamlabs, XSplit und jede andere Broadcast-Software, die eine Browser-Source-URL unterstützt, funktioniert genau gleich - konfigurierte URL einfügen, Abmessungen einstellen, fertig. Das Overlay funktioniert auch als separater Controller-Checker in jedem Browser-Tab; klicke auf "Preview OBS Mode", um das reine Overlay ohne das Einstellungen-Panel zu sehen.
Der Viewer liest Controller-Eingaben lokal aus und zeichnet sie. Sein Code lädt deine Tastenanschläge nicht hoch oder speichert keine Replay-Aufzeichnung. Die konfigurierte URL speichert Display-Einstellungen, nicht Eingabeverlauf. Eine in OBS erstellte Übertragung oder Aufnahme kann das sichtbare Overlay natürlich erfassen.
So wird das Controller-Overlay gerendert
Der Viewer liest den angeschlossenen Controller und zeichnet Button-, Stick- und Trigger-Werte pro Browser-Frame. Layout, Thema und Skalierung sind in der konfigurierten URL gespeichert. OBS lädt diese URL als separate Browser-Quelle. Der Viewer remapt keine Eingaben und relayed sie auch nicht zwischen Computern.Ein eigenes Methodik-Artikel ist noch nicht veröffentlicht; sieh dir die Methodik-Zentrale für die derzeit verfügbaren Methoden an.