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). This shows your own website, where the draws happen. You never open TrueNorth yourself: RaffleX uses it behind the Draw Winners button.
    • In Chrome, open a new window and log in to spin2wincompetitions.co.uk/admin. Keep this window just for draws: everything in it shows on stream.
    • In OBS, under Sources click + → Window Capture → OK, pick that Chrome window, OK. Then right-click it → Transform → Fit to screen.
    • Black picture? In the capture's settings set Capture Method to Windows 10 (1903 and up).
    • Don't use a Browser Source for the draw: it isn't logged in, so the Draw Winners button won't show.
  7. The games (once). They play inside the 3 Host Games scene itself: its big middle frame is the game screen, which loads whatever game the controller launches. Nothing to add, but do these once:
    • On the streaming PC, open the controller and sign in. Set-up tab → OBS → Host Games scene address → Copy.
    • In OBS show 3 Host Games, double-click Host Games frame, paste that address into URL, tick Control audio via OBS, OK.
    • That's all. The middle frame connects by itself: no code, and nobody types the games' password. From then on the host only signs in to the controller on their phone. The address is private to this PC: never show it on stream or send it in a message.
    • If the middle frame ever shows a 6-digit code instead, the address is missing or old: copy it again, or type the code in the controller's Games tab → Pair game screen.

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. That's it: you are live. The website goes on air by itself - the home page button says LIVE NOW (within about a minute), the Live Draw page plays the stream and the live chat opens. The controller says "OBS is sending - lag-free".
  3. Switch to 2 Live Draw. In your draw window, on the competition, click Draw Winners → Start verifiable draw, and Confirm each winner (confirming saves the winner and emails them). 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.
  4. Host games: Games → Launch in the controller: the game loads on the game screen in OBS and OBS switches to 3 Host Games by itself. Run it from the phone: the game's settings, its buttons and (in The Banker's Deal) its boxes appear under Games, and its host menu is under Host menu.
  5. At the end: 5 Thanks for Watching, then Stop Streaming in OBS. The website goes off air by itself. (The controller's LIVE - tap to go off air button still works too, for example if OBS crashed.)

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