IT Projekte / Home Lab / Smart Home / Games

Allgemein, Streaming

Touch Portal 3.0 mit OBS Studio 29 verbinden 2023

Wie installiere und richte ich Touch Portal zu Beginn ein? Und wie verbinde ich es mit OBS Studio, um dies von meinem Smartphone oder Tablet zu steuern?

Touch Portal ist ein Programm, welches als App auf Deinem Smartphone oder Tablet mit Deinem Computer kommunizieren kann. Auf Deinem Computer kannst Du die einzelnen Buttons mit vielen unterschiedlichen Aktionen belegen. Unter anderem kannst Du darüber Aktionen in OBS Studio steuern. So kannst Du während des Streams oder der Aufnahme Deine Lautstärke anpassen, die Szene wechseln oder auch auf Interaktionen Deines Chats eingehen.

Du benötigst Folgendes:

  • OBS Studio installiert
  • ein Smartphone oder Tablet
  • Deinen PC

1. Touch Portal herunterladen und installieren

Gehe auf die Homepage von Touch Portal und lade Dir dort die passende Version für Dein Betriebssystem herunter. Um auf die Seite zu gelangen, klicke hier.

Touch Portal - Lizenzbestimmungen akzeptieren
Touch Portal – Lizenzbestimmungen akzeptieren

Touch Portal - Lege den Speicher- bzw. Installationsort fest
Touch Portal – Lege den Speicher- bzw. Installationsort fest

Touch Portal - Dem Startmenü hinzufügen
Touch Portal – Dem Startmenü hinzufügen

Touch Portal - Füge dem Desktop eine Verknüpfung hinzu
Touch Portal – Füge dem Desktop eine Verknüpfung hinzu

Touch Portal - Installationszusammenfassung
Touch Portal – Installationszusammenfassung

Touch Portal - Starte nun den PC einmal neu
Touch Portal – Starte nun den PC einmal neu

2. Touch Portal Einrichtung

Führe nach Deinem Neustart Touch Portal das erste Mal aus und wähle Deine Sprache.

Touch Portal - Sprachauswahl
Touch Portal – Sprachauswahl

Hier kannst Du nun schon vorgefertigte Seiten anlegen lassen. Für diesen Beitrag gehe ich aber mit einer leeren Seite, da ich im Anschluss meine Verknüpfungen selber setzen möchte.

Touch Portal - Vorgefertigte Seiten hinzufügen oder nicht
Touch Portal – Vorgefertigte Seiten hinzufügen oder nicht

Wenn Du eine weitere Seite anlegst, soll direkt ein Button hinzugefügt werden, der Dich zurück auf die vorherige Seite bringt. Dies aktiviere ich, da es mir die auf Dauer lästige Arbeit erspart.

Touch Portal - Automatisierung von Buttons
Touch Portal – Automatisierung von Buttons

Damit die Desktop-App am Ende mit Deinem Smartphone oder Tablet kommunizieren kann, musst Du den Zugriff aufs Netzwerk zulassen. Ich selbst wurde bei meiner Installation nicht aktiv dazu aufgefordert. Also musst Du es vielleicht auch nicht.

Touch Portal - Ein Hinweis die Firewall Regeln anzupassen
Touch Portal – Ein Hinweis die Firewall Regeln anzupassen

Touch Portal - Tipps
Touch Portal – Tipps

Touch Portal - Hinweise
Touch Portal – Hinweise

3. Smartphone / Tablet mit Touch Portal verbinden

Lade zunächst die Touch Portal App aus dem App Store herunter.

Dein Smartphone / Tablet und PC müssen sich im gleichen Netzwerk befinden, damit Touch Portal das Gerät auch erkennen und sich damit verbinden kann.

Wenn Du die App startest, wirst Du darauf hingewiesen, dass Du die Desktop-Version bereits installiert haben solltest.

Touch Portal App - Hinweis Download
Touch Portal App – Hinweis Download

Touch Portal - Hinweis Installation
Touch Portal – Hinweis Installation

Es kann passieren, dass die App Touch Portal die Desktop Version nicht finden kann. Dann musst Du diese einfach mit der IP-Adresse manuell hinzufügen. Hierzu auf Manual klicken.

Touch Portal App - Manuell Verbinden
Touch Portal App – Manuell Verbinden

Hierzu einfach die IP-Adresse, die unten Links in Deiner Desktop-App steht, eintragen und mit Abschließen bestätigen.

Touch Portal App - IP-Adresse eingeben
Touch Portal App – IP-Adresse eingeben

Wenn das erfolgreich geglückt ist, dann sollte Deine App wie folgt aussehen:

Touch Portal App - Startseite
Touch Portal App – Startseite

4. OBS Studio Websocket Plugin installieren

Um mit Touch Portal OBS Studio steuern zu können, musst Du einen Websocket Plugin bei OBS Studio mit installieren. Dieses muss auch in den OBS Studio installiert werden. Ebenfalls müssen die beiden Programme sich auf demselben PC befinden, da Touch Portal in der kostenfreien Version keine Verbindung mit dem Websocket aufbauen kann.

Das OBS Websocket Plugin kannst Du hier herunterladen.

Dort wirst Du dann auf GitHub für die aktuellste Version weiter geleitet. Achte bitte darauf, eine passende OBS Studio Version zu nutzen, wie auch in den Releases beschrieben. Und schließe OBS Studio, bevor Du das Plugin installierst.

Ich nutze OBS Studio 29.0.3 und musste die OBS Websocket Version 4.9.1 Compat installieren, da die Version 5.0.1 nicht funktioniert hat bzw. nicht kompatibel ist.

OBS Studio -  Websocket Plugin downloaden
OBS Studio – Websocket Plugin herunterladen

Nach der erfolgreichen Installation innerhalb vom OBS-Studio-Ordner habe ich OBS Studio geöffnet und wurde mit der Meldung begrüßt, dass OBS-Websocket erkannt wurde und ob ich nicht ein Passwort für meinen Websocket Server setzen möchte. Ebenfalls kannst Du hier auch den Server Port anpassen, falls dieser bei Dir schon belegt sein sollte. Ein Passwort zu vergeben ist immer sinnvoll, so kann Dir keiner, ohne das Passwort zu kennen, z. B. Deine Aufnahme in OBS Studio stören.

OBS Studio - Websocket einrichten
OBS Studio – Websocket einrichten

Diese Einstellungen sind auch jederzeit über Werkzeuge und Websockets Server Settings erreichbar.

OBS Studio - Websocket Server Einstellungen
OBS Studio – Websocket Server Einstellungen

5. Touch Portal und OBS Studio verbinden

Öffne wieder Touch Portal und gehe in die Einstellungen.

Touch Portal - Einstellungen
Touch Portal – Einstellungen

Wechsel in den Einstellungen auf der linken Seite zu OBS.

Hier lässt Du die IP Adresse auf localhost stehen, da sich OBS Studio und Touch Portal auf dem gleichen PC befinden. Der Websocket Port ist Dein Port aus OBS Studio und auch das Passwort ist das gleiche.

Touch Portal - OBS Studio Einstellungen
Touch Portal – OBS Studio Einstellungen

Wenn Du gespeichert hast, OBS Studio noch aktiv, dann dürftest Du die Mitteilung von OBS Studio bekommen, dass eine neue Websocket Verbindung aufgebaut wurde.

OBS Studio - Eine neue Websocket Verbindung wurde erkannt
OBS Studio – Eine neue Websocket Verbindung wurde erkannt

6. OBS Studio Szenenwechsel einrichten

Jetzt kannst Du einfach auf einen Button in Touch Portal klicken und auf der linken Seite unter Aktionen OBS auswählen.

Touch Portal - Wähle einen Button aus
Touch Portal – Wähle einen Button aus

Jetzt wirst Du dazu aufgefordert, abermals OBS Studio in Touch Portal einzurichten. Hierzu wird Dir ein Guide vorgeschlagen, diesen kannst Du aber ignorieren, da Du die Einrichtung bereits getan hast.

Touch Portal - OBS Studio Einrichtungs-Guide
Touch Portal – OBS Studio Einrichtungs-Guide

Nachdem Du das Passwort erfolgreich vergeben hast, ist die Einrichtung von OBS Studio auch schon erledigt.

Touch Portal - OBS Studio Einrichtung
Touch Portal – OBS Studio Einrichtung

Jetzt kannst Du eine Szene auf einen Button legen. Hierzu wählst Du auf der linken Seite OBS aus und darunter die Szenenauswahl. In der Mitte gibst Du an, welche Szene erscheinen soll und auf der rechten Seite kannst Du einen Titel vergeben und diesen auch für Dich anpassen. Bilder kannst Du auch hinzufügen über die Icons in der Mitte. Wenn Du mit Deinen Einstellungen zufrieden bist, dann speichere Deinen Button.

Touch Portal - Button erstellen
Touch Portal – Button erstellen

Auf dem Display wird Dir auch angezeigt, wie der Button sich in Dein Setup mit einfügt.

Touch Portal - aktuelles Design
Touch Portal – aktuelles Design

Dies wird Dir auch direkt auf Dein Smartphone übertragen.

Touch Portal App - Design Hochformat
Touch Portal App – Design Hochformat
Touch Portal App - Design Querformat
Touch Portal App – Design Querformat
Quellen:

Titelbild von Touch Portal Image und OBS Studio Image