Technology is continuously advancing towards remote interaction, especially since the beginning of the COVID era. As we grow more used to communicating with each other in virtual meeting rooms, it is becoming clear that interactivity is key to a successful and engaging live streaming application. This is why our team began working on a Watch… Continue reading How to Build a Virtual Watch Party
Technology is continuously advancing towards remote interaction, especially since the beginning of the COVID era. As we grow more used to communicating with each other in virtual meeting rooms, it is becoming clear that interactivity is key to a successful and engaging live streaming application. This is why our team began working on a Watch Party example to show how Red5 Pro’s software can be used to interact with online content—and with each other—in a more natural way.
What is a Watch Party?
A watch party is a main video stream paired with a group video chat and displayed in a defined layout. It allows users to join friends online to watch the latest movies, TV shows, sports, and more. This is ideal for live sports, concerts, and other events because you can add features such as micro-betting or live shopping to the party. The interactive nature of a watch party offers a solid base for a wide range of use cases, and we were inspired to create a simple example to demonstrate how it could be implemented.
The watch party concept can be split into two parts: the main program stream, and the video chat. This combines a few of Red5 Pro’s existing features: a basic publish/subscribe to a stream and our video conference feature, which allows for group video chat. These acted as a reference to get started.
The video chat requires a publish stream and a group of subscribe streams within the same session. In other words, each participant is publishing and also subscribing to everyone else. To do this we need a host which acts as the meeting place where all participants connect. Using the video conference feature as a base, we set up a NodeJS-based WebSocket server as the host (see further details in our documentation). With this in place, participants can select their camera and microphone and enter the necessary joining parameters—the shared room name and a unique stream name, collectively known as their “publish information”—and click join. On joining, participants connect to the host, enter the “room”, and publish their stream.
Behind the scenes, participants are then added to a SharedObject that is accessible by everyone connected to the host (in other words, by everyone in the room). When a participant joins, the SharedObject is updated with their publish information. Since all participants in the room are connected to the SharedObject, they are then able to view the new stream, and the new participant can view the streams already created.
As a user, this process is seamless. After clicking join, the user automatically subscribes to the other people in that room. Those are the people whose publish information is currently in the SharedObject. Likewise, when a participant exits the room, the SharedObject is updated and the user sees that person leave.
Main Program Stream and Layout
Adding the main program is easier. Once the broadcaster publishes the stream, we add a subscribe function to connect to that specific stream. The program autoplays on join by default. After that, all that was left was to configure the layout.
For this specific example, we kept the group limited to eight participants surrounding the main program.
This is the perfect setup for demonstrations, however it can easily be modified to support more viewers. There are endless possible features to be added here as well. Red5 Pro has a variety of options that could work well with the Watch Party, including authentication to protect the streams and interstitial media insertion (helpful for ads, stats, intermissions, etc). All of these options are fully customizable.
Below is the finished product shown with four participants during our test webinar: