Set up SHUTTERPARTY

日本語

The eight steps listed in the extension’s settings on Twitch, explained in full. The numbers are the same as there. You do this once — after that, opening OBS is all it takes.

Came here from the extension’s settings on Twitch? Pairing happens in step 7, and logging in with Twitch there means you do not need to copy the pairing code. Start from step 1, on the PC that runs OBS. If you do use the code, you can copy it again at any time.

Before you start

OBS 28 or newer obs-websocket is built in from version 28. Older versions are not supported. Streamlabs Desktop is not supported: it does not let other software photograph a scene.
The extension installed Install it from SHUTTERPARTY’s page on Twitch. (Activating it comes in step 6.)
Affiliate or Partner Not required. Bits need it, but free presses fill the goal bar on their own, so a SHUTTER PARTY can happen on any channel.

The eight steps

The same steps as a video (3 min). Nothing is loaded from YouTube until you press the picture. Open on YouTube
  1. Download the OBS kit, unzip it, and put the folder somewhere it can stay

    Where: this page

    Download SHUTTERPARTY → A zip. No installer, nothing to run in the background.

    Download it on the PC that runs OBS. Unzip it and put the folder anywhere you like. But once it is set up, do not move or rename it — OBS remembers where the overlay file is, and stops finding it. Somewhere you will not tidy away later is better than your Downloads folder. If you moved it, move it back, or set it up again: open SHUTTERPARTY-setup.html in the new place, press Build it all in OBS, choose Overwrite when it asks about a source with the same name, then press Write to OBS.

    Inside, the only file you open is SHUTTERPARTY-setup.html; the overlay folder you never have to open. Keep the two in the same folder — the page looks for the overlay beside itself.

    Why a download? A web page cannot talk to OBS on your PC, so the file lives on your disk — which is also why we cannot see your scenes, your screen or your password.

  2. Turn on the WebSocket server in OBS and copy the password

    Where: OBS

    In OBS: Tools → WebSocket Server Settings. Tick Enable WebSocket server, then Show Connect Info and copy the password.

  3. Open SHUTTERPARTY-setup.html in your browser, paste the password and connect

    Where: the setup page (SHUTTERPARTY-setup.html), “Connect to OBS”

    Double-click SHUTTERPARTY-setup.html in the folder. It opens in your normal browser (Chrome, Edge…). Do not add this file to OBS as a browser source — what goes into OBS, the page makes for you in step 4.

    The page connects to OBS on its own. If OBS asks for a password, Connection details (host, port, password) opens with the cursor in Password: paste the password from step 2 there and press Connect. When OBS in the left column says connected, this step is done. (If OBS is set to use no password, it connects without one.)

  4. Press “Build it all in OBS”, put what you want photographed in the capture scene, and check it with a test shot

    Where: the setup page, “Build the capture scene and the overlay”, and OBS

    One button makes everything: the capture scene, the overlay, and the goal bar, stacked in the right order, and a third source for a vertical scene, switched off. You do not add browser sources by hand.

    The capture scene starts empty, and only what you put in it is photographed. Add in OBS a camera feed or an avatar you are happy to have photographed.

    Then press Test shot, in the same section, to see that what you want is in the picture. A test shot is taken by the setup page itself, so it succeeds even before Write to OBS. Whether your viewers’ button reaches OBS is for step 8.

  5. Choose when the button works

    Where: the setup page, “Choose when the button works”

    It is right below the build section, on the same OBS tab. Pick the Scenes the button works in. You do not need the pairing code for this.

    OBS renders a scene even when it is not on air, so without this a viewer could photograph you while your “be right back” screen is up.

    Nothing can be photographed until you answer this — and Allow every scene is an answer.

  6. Activate the extension

    Where: Twitch (the Extensions page, and the extension’s Configure screen)

    In Creator Dashboard → Extensions → SHUTTERPARTY, activate it as a Component (over the video) or a Panel (below it). Installing it alone does not show the button to your viewers.

    The pairing code is only for when you do not log in with Twitch in the next step. In that case, open SHUTTERPARTY’s Configure and press Copy to take the pairing code. It is a password — do not show it on stream. You can copy it again at any time.

  7. Log in with Twitch to pair

    Where: the setup page, “Connect to the Twitch extension”

    Back on the setup page, open Twitch extension in the left column and press Log in with Twitch to pair. A Twitch page opens. Check that the code on it is the same as the code on the setup page, then press Authorize.

    After you authorize, go back to the setup page. It then says “This will pair as …” with an account name. If it is your channel, press Pair; if it is not, press Stop. That connects your channel to the button your viewers press. All we read from Twitch is your channel id, and the Twitch token is not kept. If you log in again as the channel that is already paired, no name is shown and it goes straight on to pairing.

    Only authorize a code you started yourself. If you authorize on Twitch a code somebody sent you in chat or a message, whoever sent it can pair as your channel.

    If you would rather not log in, or the button is not there (an earlier download), open If that does not work, or you would rather not log in (pairing code) just below it, and paste the code from step 6 into Pairing code.

  8. Press “Write to OBS”, then try it with “Allow shooting off-air for 30 minutes”

    Where: the setup page

    Press Write to OBS at the foot of the left column. That button is what carries the pairing and your settings into the overlay — the line above it says whether anything is still unwritten.

    Then press Allow shooting off-air for 30 minutes, under Choose when the button works, to see the effects without going live. It turns itself off after 30 minutes.

Before your first stream

A test shot can pass while your viewers’ button is still not connected. Check these three things before you go live for the first time.

  1. The extension is activated (step 6). Installing it does not show it to viewers. In Creator Dashboard → Extensions → SHUTTERPARTY, choose Component or Panel.
  2. The setup page says “all set” at the top. If it does not, the page points at what to do next.
  3. You pressed Write to OBS last (step 8). A test shot only checks what is in the capture scene, so it succeeds without Write to OBS and does not prove this on its own.

Every stream after this: nothing. Open OBS and the browser sources reconnect on their own.

Streaming vertically as well

With Twitch’s dual format (OBS 32 or later and the Aitum Vertical plugin), the same overlay lays itself out for a 1080×1920 frame, clear of Twitch’s own buttons and chat. If you do not stream vertically, skip this section.

  1. Press Build it all in OBS (or Build again)

    It makes a third browser source, <your overlay> vertical, at 1080×1920. It is placed in your normal scene switched off, so it draws nothing there.

  2. Add it to your vertical scene

    In the vertical canvas, use its + to add an existing source and pick <your overlay> vertical. The setup page cannot reach into the plugin’s canvas, so this step is by hand.

  3. Do not resize it on the canvas

    Leave its size as it is. Stretching it on the canvas squeezes the horizontal layout instead of switching to the vertical one. It is already 1080×1920.

  4. Check it on Twitch

    In Stream Manager, the orientation icon next to the gear in Stream Preview shows the vertical stream. Photographs and the contact sheet should sit clear of the top and bottom of the frame.

The goal bar is a separate source. If you want it in the vertical scene too, add <your overlay> bar the same way and keep it within the middle 70% of the frame, clear of Twitch’s buttons at the top and chat at the bottom.

Deleted the vertical source? Press Build again on the setup page and it comes back.

Using a Stream Deck

You can put two keys on an Elgato Stream Deck: Shutter on/off and SHUTTER PARTY. The SHUTTER PARTY key shows the goal bar filling, and pressing it while a full bar waits for your signal starts the party. For now it is Windows only (Stream Deck 7.1 or later). If you do not use one, skip this section.

  1. Download the plugin and open it

    Get app.shutterparty.streamdeck.streamDeckPlugin from its download page and double-click it. Stream Deck installs it. It is not on Elgato’s Marketplace yet.

  2. Place the keys and log in with Twitch

    Drag the two keys from SHUTTERPARTY in the actions list, open either key’s settings and press Log in with Twitch to pair. Twitch opens in your browser with a code to enter; authorize, come back to Stream Deck, and go on if the name it shows is your account. This pairing is separate from the setup page’s.

A new version has to be downloaded and opened again; it does not arrive by itself. Stream Deck does not install the same version over itself, so a new one always has a higher number.

When a new version comes out

Download it again and unzip it over the old copy, in the same place. Replace the files, not the folder — anything you put in overlay/ yourself stays. Then open SHUTTERPARTY-setup.html and press Write to OBS once; until you do, OBS keeps the old overlay and the setup page says so. Your settings are kept.

No vertical source yet? Press Build again once: it adds it, and changes nothing else.

If something does not work

The setup page keeps a Log — the button is at the foot of the left column, next to Write to OBS. Open it and it will usually name the problem. The most common causes:

Cannot connect to OBS The WebSocket server is off, the password is wrong, or OBS is not running. Steps 2 and 3.
The button says “not shooting right now” You are not live, no scenes have been chosen yet, or the scene on air is not one you allowed. Steps 5 and 8. To try it off air, use the 30-minute window on the setup page. If the overlay’s log says OBS did not say whether you are live, start the stream or reconnect: while it cannot tell, it does not photograph.
Viewers press and nothing reaches OBS The pairing has not been written to OBS yet. Open the setup page and press Write to OBS (step 8). A test shot succeeds without it, because that one is taken by the setup page itself.
Nothing appears on stream The overlay browser source is below your game capture. Move it to the top in OBS.
Photos look frozen The capture scene is not nested in a live scene, so OBS never draws it. Nest it, or add a source to it that is on air.

Be careful when you share an OBS log file. OBS can write the overlay's full address into its log. Your OBS password, pairing code and Discord webhook are sealed there, except the very first time you write the settings (and a resend after the overlay has lost its key), when the OBS password goes in unsealed, once. Do not use OBS's “Upload Log File” — anyone with the link can read it. If such a log has been shared, change the OBS password.

Ending a pairing

After either, doing steps 7 and 8 again (pair, then Write to OBS) puts it back.

What it does with your data

The files you downloaded are the source — ordinary HTML, not minified, so you can read either one in a text editor before you type a password into it. Read the full privacy policy.