Streamování her a dalšího obsahu na Twitchi se stalo oblíbeným způsobem, jak komunikovat s publikem a vytvářet obsah pro miliony diváků po celém světě. Jedním z důležitých aspektů streamování je interakce s diváky prostřednictvím chatu. Jak ale dostat chat na obrazovku, aby ho diváci mohli vidět a zapojit se do diskuse? V tomto článku vám řekneme podrobný návod, jak dostat chat na obrazovku během streamování na Twitchi.
Pro výstup chatu na obrazovku během streamování na Twitchi budete potřebovat speciální software. Jedním z nejoblíbenějších nástrojů pro tento účel je OBS Studio (Open Broadcaster Software). Jedná se o bezplatný open source program, který umožňuje streamerům snadno vytvářet profesionální streamy.
Chcete-li přenést chat na obrazovku, budete muset nakonfigurovat okno chatu uvnitř OBS Studio. Nejprve musíte otevřít rozhraní OBS Studio a vytvořit novou scénu, kterou použijete pro streamování. Poté přidejte zdroj videozprávy na scénu a nastavte její rozměry a polohu podle svého uvážení.
Je důležité si uvědomit, že rozměry a poloha chatovacího okna by měly být pro váš streaming optimální. Optimální nastavení pomůže usnadnit čtení chatu a nezatíží obrazovku.
Po nastavení velikosti a polohy okna chatu v OBS Studio, budete muset přidat zdroj okna prohlížeče na scénu. Vyberte prohlížeč, ve kterém je chat na Twitchi otevřen, a nastavte jeho rozměry a polohu tak, aby se chat na obrazovce správně zobrazoval.
Získání autorizačního tokenu Twitch API: příprava na výstup chatu
Chcete-li přenést chat na obrazovku během streamování na Twitchi, musíte získat autorizační Token Twitch API. Autorizační Token je nezbytný pro přístup k Twitch API a získání dat o chatu.
Chcete-li získat token autorizace, musíte postupovat podle následujících kroků:
- Zaregistrujte se na webu Twitch developers (https://dev.twitch.tv/).
- Vytvořit novou aplikaci zadáním požadovaných údajů, jako je název aplikace, popis a adresa URL přesměrování.
- Získejte klientské a tajné klíče pro novou aplikaci. Je třeba zachovat tajný klíč na bezpečném místě.
- Vygenerovat autorizační Token pomocí klientských a tajných klíčů a zadáním požadovaných přístupových práv (scope).
Po obdržení autorizačního tokenu jej lze použít k přístupu k Twitch API a získání dat o chatu. Každý autorizační token má omezenou dobu platnosti, takže jej lze v případě potřeby aktualizovat.
Vytvoření HTML stránky pro zobrazení chatu během streamování
Chcete-li zobrazit chat na obrazovce během streamování na Twitchi, budete muset vytvořit jednoduchou HTML stránku. V tomto článku vám povím, jak na to.
1. Vytvořte nový dokument HTML. Nejprve vytvořte otevíratelnou značku a uzavírací značka . Poté přidejte Otevírací značku
a uzavírací značka .2. Uvnitř přidejte Otevírací značku
3. Po zavírací značce přidejte úvodní značku
a uzavírací značka . Uvnitř budeme zveřejňovat prvky stránky.4. K zobrazení chatu lze použít tabulku. Přidejte úvodní značku
5. Uvnitř tabulky přidejte úvodní značku
6. Uvnitř řádku přidejte otevíratelnou značku
7. Opakujte kroky 5 a 6 pro přidání dalších řádků a buněk do tabulky, pokud je to nutné.
8. Po přidání všech řádků a buněk uložte dokument HTML s příponou."html".
9. Otevřete dokument HTML v libovolném prohlížeči, abyste se ujistili, že se chat zobrazuje správně.
Nyní máte stránku HTML, která zobrazuje chat během streamování na Twitchi. Tuto stránku můžete otevřít během streamování a umístit ji na obrazovku, aby diváci viděli živý chat.
Připojení k rozhraní Twitch API: instalace požadovaných závislostí
Chcete-li získat přístup k rozhraní API Twitch, musíte nastavit několik závislostí, které umožňují interakci s API. Níže je uveden seznam těchto závislostí:
| Závislost | Popis |
|---|---|
| TwitchAPI | Knihovna poskytující interakci s Twitch API |
| OAuth2 | Knihovna pro práci s autorizačním protokolem OAuth2 |
| HTTPClient | Knihovna pro odesílání požadavků HTTP |
Chcete-li tyto závislosti nastavit, musíte na příkazovém řádku spustit následující příkaz:
npm install twitchapi oauth2 httpclient
Po úspěšné instalaci závislostí můžete začít připojovat rozhraní Twitch API a získat potřebná data.
Použití WebSocket pro příjem živých chatových zpráv
Chcete-li začít, musíte otevřít WebSocket připojení k Twitch chat serveru. To lze provést pomocí JavaScriptu. Příklad kódu:
const socket = new WebSocket('wss://irc-ws.chat.twitch.tv:443');
Po navázání spojení se musíte přihlásit zasláním autentizačních údajů. K tomu slouží protokol IRC (Internet Relay Chat), který Twitch podporuje.
Příklad kódu pro odesílání autentizačních dat:
socket.send('PASS oauth:'); // Odeslání autentizačního tokenu
socket.send ('NICK'); / / odeslání uživatelského jména
socket.send ('JOIN#'); / / připojení k požadovanému kanálu chatu
Po úspěšné autorizaci můžete začít přijímat chatové zprávy:
const message = event.data;
// Zpracování přijaté zprávy (např. zobrazení v chatu na obrazovce)
Místo Komentáře "/ / zpracování přijaté zprávy " je třeba přidat svůj kód pro zpracování každé přijaté zprávy chatu, jako je její zobrazení na obrazovce během streamování na Twitchi.
Použití WebSocket k přijímání živých chatových zpráv umožňuje streamerům zobrazovat chat během streamování, aniž by museli neustále aktualizovat stránku a žádat server o nové zprávy. To výrazně zlepšuje interakci s diváky a pomáhá vytvářet interaktivnější atmosféru během vysílání.