Reactive Crew is a local server app used to display who is talking and whose perspective you're viewing during streams. It uses hotkeys to swap the current focused player icon to show that viewers are seeing through their point of view.
The current use case for this is to arrange Discord reactive images and use the hotkeys to switch to a focused player while also pulling up their Discord stream with the same hotkey.
Example: Setting a hotkey to switch to your screen and setting your crew's hotkeys to hide your window in OBS while pulling up their perspective.
To use (Steps 1-4):
Step 1) Go to the settings.json and adjust the generic crew players with your team's information.
Crew information settings:
name: The name that is displayed under the image of the player. This name is placed in a generated HTML file that can be edited and styled. The file is generated under the .\CrewHTML folder as the "<name>.html".
img_src: Each crew's "img_src" should be the link to the discord reactive image. I've been using the website https://reactive.fugi.tech/ to get a link to a reactive image. Paste the "Individual Browser Source" into the "img_src" for the associated player.
active: The "active" setting will determine if the image is arranged in the image tray.
css_file: "css_file" is the name of an optional CSS File that can be included if the player is active. Each active player will have an HTML file generated to be used for styling. Adding a "css_file" value (without the .css file extension) will include a file that can be put in the ./css folder. (Each player also as a blank CSS file that's generated and used automatically. Will probably just remove this setting eventually)
hotkey: Use what the hotkey should be to make the player the focused reactive image. Uses the keyboard module, so any valid string that can be used in the `keyboard.add_hotkey()` function's first argument should work here.
Other settings:
refresh_hotkey: This hotkey will be used to refresh the page if you need to adjust settings.
max_row: Maximum number of rows of icons allowed.
max_column: Maximum number of icons allowed to be placed in a grid row before putting creating a new column.
Any of the settings detailing img sizes are given in pixel sizes.
Any of the settings having to do with name sizes are given in font sizes.
Step 2) Download requirements
Download Python 3.9, and then use pip install to get the needed requirements.
Open a terminal and type "py -m pip install -r requirements.txt" and enter.
Step 3) Start a python webserver in the folder location of reactivecrew.py.
Pull up a terminal in the ReactiveCrew folder and type "py -m http.server" and enter.
The default address of the server will be "localhost:8000".
The Websocket used by the page to communicate with the program is "ws://localhost:8001/".
Step 4) Start the program and navigate to the page.
Open another terminal and type "py .\reactivecrew.py" and enter.
From here, I use a "Browser Source" on OBS to pull up the resulting page for my reactive overlay. The hotkeys should adjust the sizing and ordering of the icons and their labels.
The default address of the webpage should be "localhost:8000/HTML/reactivecrew.html"
If there's any unresponsiveness, cache refresh the page. If the labels or images are misplaced or incorrectly sized, just keep pressing hotkeys. It should work after some swapping around. If you can reproduce any of these errors, please let me know.
I just wanted to upload this tool I made for a very specific way of spectating people on my streams. It is slightly rushed and probably still has bugs. If you want to see it in action, we play Barotrauma and Project Zomboid on the weekends at https://twitch.tv/hoversquid and I use it to spectate the entire team by switching between perspectives.
I'll be updating this based on feedback I get, so let me know what problems you're having - or suggestions you would have for your own uses! I would love to see how you're using this, too. I'm @hoversquid on Twitter so send me whatever you're using with the overlay if you like it!