From ae5dee33bb740f99d29503e052fe3b60ac251ee1 Mon Sep 17 00:00:00 2001 From: Freddie Yershon <143739931+hippogriff101@users.noreply.github.com> Date: Fri, 17 Apr 2026 09:25:55 +0100 Subject: [PATCH] docs(stguide): improve the streaming guide (#65) * fix(docs): update stream key regeneration icon in streaming guide * fix(docs): format steps in the streaming guide for better readability * fix(docs): remove unnecessary dashes from section headers in streaming guide and swap for a cleaner * Update apps/docs/src/content/docs/guides/start-stream.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * docs(stguide): move to steps and change up some stuff * Delete apps/docs/public/guides/lock.png --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: SrIzan10 <66965250+SrIzan10@users.noreply.github.com> --- .../src/content/docs/guides/start-stream.mdx | 49 +++++++++++-------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/apps/docs/src/content/docs/guides/start-stream.mdx b/apps/docs/src/content/docs/guides/start-stream.mdx index f49d8af..e4e26a7 100644 --- a/apps/docs/src/content/docs/guides/start-stream.mdx +++ b/apps/docs/src/content/docs/guides/start-stream.mdx @@ -2,43 +2,50 @@ title: How to stream description: Get started with OBS and streaming on hackclub.tv --- +import { Steps } from '@astrojs/starlight/components'; +import { Aside } from '@astrojs/starlight/components'; _This guide demonstrates how to stream with hackclub.tv via OBS Studio. For other streaming software, you will need to adapt these steps for your chosen software._ -- Open OBS Studio. + +1. Open OBS Studio. + (_If it is not installed, head to [this webpage](https://obsproject.com/) to download the installer._) -(_If it is not installed, head to [this webpage](https://obsproject.com/) to download the installer._) + ![OBS in Windows start menu](../../../assets/obs.png) -![OBS in Windows start menu](../../../assets/obs.png) +2. In OBS, click `File > Settings` in the top navigation bar. -- In OBS, click `File > Settings` in the top navigation bar. + Animated GIF of opening the settings page -Animated GIF of opening the settings page +3. In the Settings popup, open `Stream` from the sidebar. -- In the Settings popup, open `Stream` from the sidebar. +4. Set `Service` to `Custom...`. -- Set `Service` to `Custom...`. + Animated GIF of opening 'Stream' settings and changing to 'Custom' -Animated GIF of opening 'Stream' settings and changing to 'Custom' +5. Go to https://hackclub.tv/settings/channel/ in your web browser. -- Go to https://hackclub.tv/settings/channel/ in your web browser. + (_If you are not logged in, you may have to log in again and then try again._) -(_If you are not logged in, you may have to log in again and then try again._) +6. Under `Stream Settings`, you will find your `Stream Key` and `Stream URL`. Copy the `Stream URL` and paste it into OBS. -- Under `Stream Settings`, you will find your `Stream Key` and `Stream URL`. Copy the `Stream URL` and paste it into OBS. + ![Hack Club TV Stream Settings](../../../assets/hctv-settings.png) -![Hack Club TV Stream Settings](../../../assets/hctv-settings.png) +7. Go back to the website and copy the streaming key and paste it into the `Stream Key` box in OBS. + -- Go back to the website and click this Lock Icon icon to regenerate your stream key. Copy the new key and paste it into the `Stream Key` box in OBS. + -![OBS Stream Settings with data filled in](../../../assets/obs-custom.png) -(_Your OBS settings should now look like this_) + ![OBS Stream Settings with data filled in](../../../assets/obs-custom.png) -- You can now safely apply the changes in OBS and start streaming. + (_Your OBS settings should now look like this_) + +8. You can now safely apply the changes in OBS and start streaming. + Thanks for using this guide and happy streaming! - -_A video tutorial is currently being made, so check back later if you would like to see it!_