DEV Community

Cover image for Adding a Remote Participant View for Real-Time Streams in OBS
Todd Sharp for AWS

Posted on

Adding a Remote Participant View for Real-Time Streams in OBS

In the last post in this series, we saw that utilizing custom docks in OBS is a great way to improve the user experience when broadcasting to an Amazon Interactive Video Service (Amazon IVS) real-time stage. In that post, we used a custom dock to generate participant tokens (and even set them directly into the user's OBS configuration) which makes it easier for broadcasters to stream without having to use your web application to create a new token via the browser. In this post, we'll address another tricky use case - how to see and hear other participants in a real-time stream directly in OBS. This makes it much easier for your broadcasters to use OBS - again - without having to rely on an open browser tab to talk to remote participants.

Creating a Remote Participant View

It's actually rather simple to create a dedicated view that can be used as a custom dock in OBS to allow broadcasters to see and hear other participants. With the Amazon IVS Web Broadcast SDK, create an instance of the Amazon IVS stage client with a valid participant token and render the participants to the page in a single column view. This view can be customized as necessary, but I like to keep it clean and just present the participant audio and video. The only addition is a simple toggle to show/hide individual participants. Since the broadcaster themselves will also be listed, this allows them to hide themselves from the view to prevent audio echo. If desired, you could also implement additional logic to prevent rendering the broadcaster by passing in the broadcaster's userId.

Once you've created a view to render the stage participants, add it as a custom dock in OBS.

Add dock

Add dock link

As participants join and leave the stage, they will be shown in the custom dock in OBS.

Participant view

Participant view full

Which means that your user can broadcast to the Amazon IVS real-time stage in OBS without needing to keep a browser tab open to see and hear the other stage participants! Of course, with a web based view, the other participants can still see and hear everyone on the stage - including the person broadcasting from OBS.

Web based view

Summary

In this post, we saw how it is possible to allow your broadcasters to see and hear other Amazon IVS real-time stage participants directly in OBS. In the next post, we'll look at creating browser sources in OBS to allow your users to broadcast a real-time stage to their Amazon IVS low-latency channels to reach millions of viewers!

Top comments (1)

Collapse
 
jocomvag profile image
Jocom Vag

...huh. Neat trick. Now that I know how it's possible, would be worth using.