One queue
Mix YouTube, Twitch Clips, Medal and TikTok in the same request queue.
v1 release candidate
React Player
A simple media request player for OBS, powered by Streamer.bot. Viewers send links. You control the queue from a dock inside OBS.
YouTube
Twitch Clips
Medal
TikTok
Media requests without the setup circus
React Player gives you a dedicated video player and a control dock inside OBS. The queue lives in Streamer.bot, so your stream controls stay local on your PC.
Control it from OBS
Play, skip, pause, seek, change volume, hide video, show the source and more from the dock.
No API setup
You do not need your own YouTube API key or a separate web service.
Use only what you want
Viewer commands, chat scanning, StreamElements tips and vote skip are included but optional.
Setup guide
Follow the steps in order. You do not need to understand how React Player works behind the scenes.
This guide assumes OBS and Streamer.bot are running on the same PC. If Streamer.bot already controls your OBS, Step 3 is already done.
1
Download the React Player package
Download the Streamer.bot import file. Do not open or edit it.
Done when: You have a file named React-Player-Import.txt.
2
Import it into Streamer.bot
- Open Streamer.bot.
- Click Import at the top.
- Drag React-Player-Import.txt onto the Import String box.
- You should see React Player by Melkepakken.
- Leave the included items selected and click Import.
Done when: Streamer.bot shows a group named React Player - by Melkepakken.
3
Make sure Streamer.bot can control OBS
Already use Streamer.bot to control OBS? Skip this step.
- In OBS, open Tools > WebSocket Server Settings.
- Turn on Enable WebSocket server.
- Keep the default port 4455. If you use a password, remember it.
- In Streamer.bot, open Stream Apps > OBS.
- Right-click the empty connection list and choose Add.
- Give it any name. Use OBS WebSocket v5, host 127.0.0.1 and port 4455.
- Enter your OBS WebSocket password only if you set one in OBS.
- Turn on Auto Connect on Startup and Reconnect on Disconnect, then connect.
Done when: Streamer.bot shows your OBS connection as connected.
4
Turn on the Streamer.bot WebSocket server
- In Streamer.bot, open Servers/Clients > WebSocket Server.
- Turn on Auto Start.
- Use address 127.0.0.1.
- Use port 8080.
- Use endpoint /.
- Leave Authentication off for the normal React Player setup.
- Start the WebSocket server if it is not already running.
Done when: The Streamer.bot WebSocket server is running on 127.0.0.1:8080.
5
Add the player to OBS
- In OBS, add a new Browser source.
- Name it anything you want.
- Paste the player URL below into the URL box.
- Set the browser source width and height to match your OBS canvas.
- Save the source.
https://react.melkepakken.tv/v1/player/
Done when: The Browser Source exists in one of your OBS scenes or groups.
6
Add the React Player dock to OBS
- In OBS, open Docks > Custom Browser Docks.
- Set the dock name to React Player.
- Paste the dock URL below.
- Apply the change and close the window.
https://react.melkepakken.tv/v1/dock/
Done when: The React Player dock is visible inside OBS and says Connected.
7
Try your first link
- Paste a YouTube link into the box near the top of the React Player dock.
- Click Add.
- The request should appear in the queue.
- Click Play.
- Use Show on stream when you want the Browser Source visible.
Done when: The video plays and you can control it from the dock.
Optional stuff
React Player is already usable. Only enable the features below if you actually want them.
Let viewers request with !sr
In Streamer.bot, find the command React Player Request and enable it.
!sr · !request · !react · !reactrequest · !addvideo
Scan normal chat messages for links
- Open - React Player: Scan Chat.
- Enable the action.
- Enable the chat-message trigger for each platform you want to scan.
This lets someone type normal text such as "check this out [link]" and React Player will use the first supported link.
Accept StreamElements tip links
- Enable - React Player: StreamElements Tip.
- Edit its StreamElements Tip trigger if you want a minimum donation amount or other rules.
Enable vote skip
- Enable - React Player: Vote Skip.
- Enable the command React Player Vote Skip.
The default is 3 unique viewers. Commands are !voteskip and !vskip.
Give moderators chat controls
The helper actions are already included. Enable only the command objects you want your mods to use.
!rskip · !rplay · !rpause · !rstop · !rmute · !runmute · !rshow · !rhide · !raudio · !rvideo · !rrefresh · !rclear · !rautoplay
Use Bits, subs, rewards or other triggers
Open React Player: Add Link and look at its Triggers. Example triggers are included but are off by default. Configure the trigger you want for your channel, then enable it.
If something does not work
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 connects but cannot find the OBS player
Check that your OBS Browser Source uses this exact URL:
https://react.melkepakken.tv/v1/player/
The dock works but OBS controls do nothing
Streamer.bot probably is not connected to OBS. Go back to Step 3 and check the OBS connection.
I do not see !sr or the other chat commands working
Commands are disabled by default. Go to Commands in Streamer.bot and enable the React Player commands you want to use.
Changelog
Short version history. No engineering diary.
v1.0.0 - Initial release
Release candidate- YouTube, Twitch Clips, Medal and TikTok requests.
- Hosted player and OBS control dock.
- Queue, history, autoplay, seeking, volume and streamer controls.
- Optional viewer requests, chat scanning, StreamElements tips, vote skip and moderator commands.
- English and Norwegian dock language.