Open the controller · See every scene · The watch page

Live draw set-up guide

How the live draw goes from the streaming PC to the website (and Facebook), with every scene, pop-up, host game and quiz night run from one controller on your phone. Everything runs on Spin 2 Win's own Cloudflare account. Nothing depends on RaffleX except plain pieces on the site (a button and a page), and those keep working however RaffleX changes.

How it fits together

OBS on its own sends to one place (the website). Section 2b adds Facebook as a second place, from the same OBS, with the free Multiple RTMP outputs plugin.

1. OBS: install and import the scenes (once)

  1. Install OBS Studio (version 30 or newer) from obsproject.com.
  2. Download the scene file: Spin-2-Win-OBS.json.
  3. In OBS: Scene Collection → Import, pick the file, then Scene Collection → Spin 2 Win live draw. Your existing scenes are not touched.
  4. Settings → Video: Base (Canvas) and Output resolution 1920×1080, 30 FPS.
  5. Open the scene Camera (do not delete) and pick your webcam in its Webcam source.
  6. Open Draw window (do not delete): add a Window Capture (or Display Capture) of TrueNorth or the draw screen, then right-click it → Transform → Fit to screen.
  7. Open Game window (do not delete): launch a game from the controller first (it opens its own window), then add a Window Capture of that browser window and Fit to screen. Launching another game swaps the same window, so this is done once.

Each webcam can only be opened once, so the camera lives in its own scene and every other scene shows that scene. Never add a second copy of the webcam, or one of them goes black.

SceneWhen
1 Starting SoonBefore you start: the countdown to the next draw (set it in the controller) and your competitions.
2 Live DrawThe draw: the draw window and your camera.
3 Host GamesA host game, launched from the controller. The frame says which game it is.
4 Be Right BackA short break.
5 Thanks for WatchingThe end. It shows the next draw if one is set.
6 Quiz NightA JoltQuiz quiz: JoltQuiz's big screen, your camera, the QR and the join code.

2. OBS: where to send the stream (once)

  1. In the controller, open the Set-up tab → OBS → OBS stream settings. It shows the Server and the Bearer Token (the stream key), each with a Copy button.
  2. In OBS: Settings → Stream, Service WHIP. Paste the Server and the Bearer Token. Apply.
  3. Settings → Output (Output Mode: Simple is fine): video bitrate about 4000 Kbps, audio 160.

The stream key is a password: never show it on stream or send it in a message. Anyone with it could send video to your website.

2b. Facebook at the same time (optional, free)

The website gets the stream from OBS's main Start Streaming (section 2). The free plugin Multiple RTMP outputs (obs-multi-rtmp) adds a second output to the same OBS, so your Facebook page gets the same pictures and sound at the same time.

  1. Install the plugin (once). Close OBS. Download the Windows installer from the plugin's own page, github.com/sorayuki/obs-multi-rtmp/releases (the newest release that says it works with your OBS version), run it, then open OBS again.
  2. OBS now has a Multiple output panel. If you cannot see it: Docks → Multiple output.
  3. Get your Facebook stream key (once). On Facebook: Live Producer (Create → Live video) for your page, choose Streaming software, and switch on Use a persistent stream key, so the key stays the same every week. You will see a Server URL and a Stream key.
  4. Add Facebook to the plugin (once). In the Multiple output panel: Add new target.
    • Name: Facebook.
    • Server: rtmps://live-api-s.facebook.com:443/rtmp/
    • Key: your persistent stream key from Facebook. Type or paste it on the streaming PC only.
    • Video: H.264 (NVENC if the PC has an NVIDIA card, otherwise x264), about 4000 Kbps, keyframe interval 2 seconds, 1920×1080. If the PC struggles, pick the option to use the main output's video encoder instead.
    • Audio: its own AAC encoder, 128 Kbps. Facebook needs AAC sound. The website's stream uses a different kind of sound, so do not share the main output's audio here.
    • Save. Ticking Sync start (if your version has it) makes it start and stop with OBS's own Start Streaming.
  5. Every live draw: press Start Streaming in OBS (the website), then Start on the Facebook target in the Multiple output panel (unless it starts by itself). In Facebook Live Producer, wait for the preview, set the title, and press Go live.
  6. At the end: End live video in Facebook, Stop on the Facebook target, then Stop Streaming in OBS.

The Facebook stream key is a password. It lives only in OBS on your streaming PC: it is never kept by the live draw system, never shown on stream and never sent in a message. If it ever leaks, reset it in Facebook Live Producer and paste the new one into the Facebook target.

Or: Streamlabs Desktop

  1. Download Spin-2-Win-Stream.overlay, then in Streamlabs: Settings → Scene Collections → Import Overlay File.
  2. Settings → Video: 1920×1080. The scenes are the same as OBS's. Streamlabs cannot send the lag-free website stream, so on its own it suits streaming to Facebook only (Settings → Stream). OBS (sections 1, 2 and 2b) is the set-up that puts the draw on the website and Facebook together.
  3. Pick your camera in Camera (do not delete), and add the window captures as in step 1.
  4. The Chat Box (your Facebook comments) is in every show scene, hidden, exactly over the site's chat panel: switch it on (the eye) if you would rather show Facebook's comments there.

Streamlabs' Edit Transform size boxes go wrong on a scene shown inside another scene - every one is already placed by the file, so never resize them in that dialog. And as in OBS: one webcam, one source.

3. Every live draw

  1. Earlier in the day, in the controller's Set-up tab: Next live draw. Pick the competition's draw or type a time, then Save. The home page button, the Live Draw page and the Starting Soon scene count down to it.
  2. In OBS, show 1 Starting Soon and press Start Streaming. The controller says "OBS is sending - lag-free" within a few seconds.
  3. In the controller, tap Off air - tap to go live. The home page button says LIVE NOW (within about a minute), the Live Draw page plays the stream and the live chat opens - it is only open while you are live.
  4. Switch to 2 Live Draw and do the draw in TrueNorth. From the controller: Start the draw (drum roll or computer sound until you press STOP, then the ta-daa and confetti), Shout out a winner (first name and initial only), Spotlight a competition, Message, Confetti, Gold coins.
  5. Host games: Games → Launch in the controller - OBS switches to 3 Host Games by itself. Press H in the game for its host controls.
  6. At the end: 5 Thanks for Watching, then in the controller tap LIVE - tap to go off air, then Stop Streaming in OBS.

4. A JoltQuiz quiz night

  1. Open the quiz in JoltQuiz's host panel as usual. It shows the room code (6 letters and numbers).
  2. In the controller: Quiz tab, type the room code and the prize (if there is one), press Start the quiz on stream.
    • The 6 Quiz Night scene shows JoltQuiz's big screen for that room, your camera, the QR and the code, with "Play along: joltquiz.com" along the bottom the whole time.
    • Every other scene gets a Quiz starting pop-up with the QR for 25 seconds (Show the join pop-up again repeats it).
    • The Live Draw page on the website shows the code and a Join the quiz button.
  3. Run the quiz from JoltQuiz's host panel. The QR and the button go to joltquiz.com/j/<code>.
  4. When it is over: Clear the quiz in the controller.

The big screen is JoltQuiz's own page, https://www.joltquiz.com/watch/<code>?embed=page, shown inside the Quiz Night scene. If it ever needs to be its own browser source in OBS, the controller's Quiz tab shows the exact address to paste (1920×1080), on top of the scene's frame.

5. On the website

If something is wrong