Set up SHUTTERPARTY

日本語

Six steps, about five minutes. You do this once — after that, opening OBS is all it takes.

Before you start

OBS 28 or newer SHUTTERPARTY talks to OBS through obs-websocket, which ships inside OBS from version 28. Older versions need a plugin and are not supported.
The extension installed Install SHUTTERPARTY from the Twitch Extension Store and activate it as a Component (over the video) or a Panel (below it).
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.

Download

Download SHUTTERPARTY → Two HTML files. No installer, nothing to run in the background.

Unzip it wherever you keep your streaming files and leave the folders as they came — setup and overlay sit next to each other, and the setup page looks for the overlay beside itself, so moving one of them on its own breaks it.

Why a download and not a link? The photograph is taken by your OBS, on your machine. A page served over the web is not allowed to talk to software running on your computer, so the file has to live on your disk. That is also why nothing here can see your scenes, your screen, or your password.

The six steps

  1. Copy your pairing code

    On Twitch, open Creator Dashboard → Extensions → SHUTTERPARTY → Configure. Press Copy to take the pairing code. It is a password — do not show it on stream.

  2. Turn on the WebSocket server in OBS

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

    This is the one thing SHUTTERPARTY cannot do for you: a page in your browser is not allowed to read OBS's settings file, so the password has to be copied by hand.

  3. Open setup/index.html

    Double-click it. It opens in your normal browser — not in OBS. Paste the OBS password and press Connect.

  4. Press “Build it all in OBS”

    One button makes everything: the capture scene, the overlay, and the goal bar, stacked in the right order. You do not add browser sources by hand.

  5. Paste the pairing code, then choose your scenes

    The code connects your channel to the button your viewers press. Then pick the Scenes the button works in.

    Worth a moment: 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. An empty list and “every scene is fine” look identical from the outside, so the extension waits for the answer rather than guessing — and Allow every scene is an answer.

  6. Fill the capture scene, write it to OBS, and test

    The capture scene starts empty, and only what you put in it is photographed — usually your camera or your avatar. Add it in OBS.

    Then press Write to OBS at the foot of the left column. That button is what carries the pairing code and your settings into the overlay — the line above it says whether anything is still unwritten. Finish with Test shot.

Want to see the effects before going live? On the setup page, press Allow shooting off-air for 30 minutes. It reverts on its own, so the door cannot be left open by accident.

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

When a new version comes out

Download it again and replace the two folders where they already are. Then open setup/index.html and press Write to OBS once — OBS keeps the old overlay until it is told to fetch the new one. You do not have to remember which state you are in: the setup page says “The overlay file is newer than what OBS has. Write it again” until you press it.

Your settings survive the replacement. They are kept by the browser you set things up in, not by the files.

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. Step 2.
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 6. To try it off air, use the 30-minute window on the setup page.
Viewers press and nothing reaches OBS The pairing code has not been written to OBS yet. Open the setup page and press Write to OBS. 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.

What it does with your data

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