Making an App to Watch Multiple Video Streams
So just like everyone else, I’ve been stuck at home a lot because of Covid. And like many, I have found entertainment in the form of online content creators or streamers. These past eight months I have had streamers playing games, either running in the background or straight up actively watching them. Recently one game seems to be played particularly often and it’s called “Among Us”. A multiplayer game based around lying to and killing your fellows, heavy emphasis on the lying part. But for the viewer it is particularly entertaining to watch different perspectives of the game from each of the players, so I’ve been watching it like this:
With each stream requiring its own browser. Not the best and more than a little annoying to setup every time I wanted to watch the streams. There was also the small caveat that there are up to ten players in a game of Among Us but my monitor size only had enough room for four. So I decided to make an app to watch the multiple perspectives. It looks like this:
Much more comfortable and quicker to setup as there is a sidebar saved which all the streamers that I watch. The text bar input at the top also allows entering URLs of streamers that I do not have saved to the side bar and the buttons under than adjust the sizes of each of the streamers. So I can easily increase the sizes to:
The sidebar only works for twitch streams but the URL input at the top can work with youtube streams as well. On the technical side I use Reactjs, as well as the packages ReactPlayer to render the streams and db-json to make a back-end to store the streamer links.
This app is a work in progress however, one upgrade I intend is to have the sidebar only render streams that are currently live. This would require a fetch with the Twitch API, something that I’m looking forward to working with and understanding. I would love to see any suggestions for upgrades to my app in the responses, thanks for reading. Below isthe Github repository for my code and a Youtube Demo showing the app in action.
