React Player

REQUIRES OBS + Streamer.bot. Streamer.bot must already be connected to OBS.

1

Download and import

DOWNLOAD REACT PLAYER

In Streamer.bot, click Import.
Drag React-Player-Import.txt onto the Import String box.
Leave the included items selected and click Import.

Done when: You see React Player - by Melkepakken in Streamer.bot.

2

Start the local WebSocket

Open Servers/Clients > WebSocket Server.
Turn on Auto Start and start the server.
Use the defaults: 127.0.0.1 · 8080 · endpoint /.

Done when: The Streamer.bot WebSocket server is running.

3

Add the player to OBS

Add a new Browser source in OBS. Name it anything.
Paste the Player URL and set the source size to match your OBS canvas.

https://react.melkepakken.tv/v1/player/

4

Add the dock to OBS

Open Docks > Custom Browser Docks.
Name it React Player and paste the Dock URL.

https://react.melkepakken.tv/v1/dock/

Done when: The dock is visible and says Connected.

SETUP COMPLETE Paste a supported link into the dock whenever you want to add a request.

STREAMER.BOT → OBS

Connect Streamer.bot to OBS

If Streamer.bot already controls your OBS, you can skip this.

In OBS, open Tools > WebSocket Server Settings.
Turn on Enable WebSocket server. Keep port 4455.
In Streamer.bot, open Stream Apps > OBS.
Add an OBS WebSocket v5 connection.
Use host 127.0.0.1 and port 4455.
Enter your OBS password only if you set one, then connect.

WEBSITE → STREAMER.BOT

Streamer.bot WebSocket settings

The React Player website talks to Streamer.bot through its local WebSocket server.

Address127.0.0.1
Port8080
Endpoint/
AuthenticationOff
Auto StartOn

VIEWER REQUESTS

Enable !sr

Enable the React Player Request command in Streamer.bot.

!sr · !request · !react · !reactrequest · !addvideo

CHAT SCANNER

Scan normal chat for links

Enable - React Player: Scan Chat and the chat trigger for each platform you want.

STREAMELEMENTS

Accept links from tips

Enable - React Player: StreamElements Tip. Edit its trigger if you want your own tip rules.

VOTE SKIP

Let viewers vote to skip

Enable - React Player: Vote Skip and its command. Default threshold: 3.

!voteskip · !vskip

MOD CONTROLS

Give moderators chat controls

Enable only the included React Player command objects you want your moderators to use.

CUSTOM EVENTS

Bits, subs, rewards and more

Use the example triggers inside React Player: Add Link, or connect any Streamer.bot event that provides a link.

The dock says Not connected

Make sure Streamer.bot is running.
Check Servers/Clients > WebSocket Server.
It should be running on 127.0.0.1, port 8080, endpoint /.
If your browser asks for local network access for react.melkepakken.tv, allow it.

The dock cannot find the OBS player

Check that your OBS Browser Source uses the exact Player URL:

https://react.melkepakken.tv/v1/player/

OBS controls do nothing

Streamer.bot is probably not connected to OBS. Open Connections above.

Viewer or moderator commands do not work

React Player commands are disabled by default. Open Extras above and enable the commands you want.

React Player

How React Player works

Link sent

Link checked

Added to queue

You play it

Features

Chat Scanner

StreamElements Tips

Customizable Vote Skip

Setup