Streaming

Enabling Multiview for a Dolby.io Livestream

SUMMARY

Enabling Multiview for Dolby.io Livestreaming allows users to seamlessly swap between real-time WebRTC streams all from within their browser.


Have you ever been watching a Livestream and wished you could switch to a different angle? What about a different stream entirely? With Dolby.io streaming you have the ability to enable Multiview, a feature that lets you simultaneously view multiple WebRTC streams at once and swap between each stream all without adding a delay or sacrificing quality. Multiview engages users with the view and content they prefer all in real-time, making it a great addition to any virtual live event or online streaming experience.

In this guide, we’ll be outlining how you can enable multisource stream ingest, create multiple streams, and stream them all into a real-time multi-stream viewer with just a few button clicks.

An example of the WebRTC multiview feature streaming three feeds. Users can switch between an iPhone view (Seen enlarged above), a PC webcam view, and a view of the PC desktop streamed from OBS.
An example of the WebRTC multiview feature streaming three feeds. Users can switch between an iPhone view (Seen enlarged above), a PC webcam view, and a view of the PC desktop streamed from OBS.

Setting up a WebRTC Stream Multiviewer

To enable Multiview you first must have an active Dolby.io account. You can create a free Dolby.io account limited to 50 Gigabytes of data transfer a month, which will be plenty for testing out the WebRTC Multiview feature.

Once you have created your account, log in and navigate to the streaming dashboard. From here add a new token called “Multiview Test”. When creating the token make sure to switch to the Advanced tab and enable Multisource. The Multisource parameter allows users to bundle multiple WebRTC and RTMP feeds into a single stream and distinguish each by different Source IDs.

The Dolby.io streaming token creation menu. By switching to the Advanced Tab, users can enable multisource for WebRTC streams.
The Dolby.io streaming token creation menu. By switching to the Advanced Tab, users can enable multisource for WebRTC streams.

With our token created we can now begin setting up our individual streams. Click on the Broadcast button of your newly created token and then on the gear icon in the bottom right of the broadcaster. From here select Media Settings. Inside Media Settings enable Multisource and add a unique identifier to Source ID, in this case, I chose PC_VIEW. Multisource allows for the token to ingest multiple video and audio feeds and is required for Multiview to work.

WebRTC streaming settings within the Dolby.io broadcaster. The user has switched on Multisource and the source ID is defined.
WebRTC streaming settings within the Dolby.io broadcaster. Note how Multisource is switched on and the source ID is defined.

Once you click Update, the first view is ready. 

Since we are testing Multiview we need to set up multiple streams. For this demo, I chose to set up a second view from my phone by signing into my Dolby.io account and opening the broadcaster from my Multiview Test token. From the broadcaster I emulated the same steps as for the first view, opening the media settings, enabling multisource, and setting the Source ID.

WebRTC streaming settings within the Dolby.io broadcaster this time open on an iPhone. Note how Multisource is switched on and the source ID is defined.
WebRTC streaming settings within the Dolby.io broadcaster this time open on an iPhone. Note how Multisource is switched on and the source ID is defined.

Finally, I want to add one more feed, this time with the WebRTC-enabled version of OBS. If you are interested in setting up WebRTC-enabled OBS check out this guide here. Inside WebRTC-enabled OBS add your credentials to the stream section of the settings, tick the multisource box, and include a unique identifier for your Source ID.

In the WebRTC-enabled fork of OBS, you can alter stream settings to include a multisource ID for multiview.
In the WebRTC-enabled fork of OBS, you can alter stream settings to include a multisource ID for Multiview.

Great, so now we have three views set up: a PC web camera view, an iPhone view, and a desktop screen view with WebRTC OBS. Now all that’s left is to start the streams and open the stream viewer. You can open the stream viewer from the Dolby.io dashboard or by navigating to:

https://viewer.millicast.com?streamId=[YOUR_ACCOUNT_ID]/[YOUR_STREAM_NAME]

You’ll notice when joining that the bottom right gear icon will flash a notification prompting you to enable Multiview. Enable it to begin viewing all three streams.

The author on side screens with a dark screen in the middle. The user needs to switch to the side views to see feeds.
As we open up the viewer a multiview notification will flash. When switching to multiview the player will default to a black screen unless we have a default feed defined. Users can click on feeds to switch between them.

Note: We never defined a default feed causing the viewer to open to a black screen. To define the default feed don’t add a source ID when enabling Multisource.

From here users can switch between different feeds as they desire.

The author on screen streaming from his iPhone. Users can click on the side to switch between views.
By clicking on the iPhone_view we switch it to the main screen.
The author switching the view to the PC webcam.
By clicking on PC_view we can switch to the view from the PC webcam.

It’s important to note that there are some limitations to the Multiviewer.¬†Dolby.io¬†streaming allows you to deliver as many tracks to the viewer as you like, however, there is a 12mbps limit that the viewer can receive. Hence, it is important to throttle your feeds appropriately so that the end user remains under this threshold. In the example above I limit each feed to 1mbps by using the Bandwidth parameter.

Interested in building your own custom multiviewer? Check out this guide here.

Start Experimenting with WebRTC Multiview

The Multiview feature offers an exciting way to engage viewers, allowing them to swap between real-time WebRTC feeds seamlessly. This feature is perfect for virtual live events where viewers want to get multiple angles on the action all without sacrificing quality or adding delay. If you are interested in building your own Livestream viewer using JavaScript check out this guide here or learn more about Dolby.io streaming by checking out our documentation.

Feedback or Questions? Reach out to the team on TwitterLinkedIn, or via our support desk.

Leave a Comment

Braden Riggs

Developer Advocate

Born and Raised in Australia and now Living in San Francisco, Braden joined the Developer Relations team in 2021 after graduating from UC San Diego with a degree in data science. Braden loves to create apps and content for the Dolby.io Blog, YouTube channel, and the samples GitHub. When not working you can find Braden surfing, hiking, or exploring San Francisco.

Get Started

Drive real-time interactions and engagement with sub-second latency

We are more than just a streaming solutions provider; we are a technology partner helping you build a streaming ecosystem that meets your goals. Get started for free and as you grow, we offer aggressive volume discounts protecting your margins.

Developer Resources

Explore learning paths and helpful resources as you begin development with Dolby.io.

Copy link
Powered by Social Snap