Creating a 6x6 Mix with Multiple Mixers
Creating a 6x6 Audio and Video Mix with Several Mixers Using the Red5 Pro Testbeds
A large audio and video mix with several Mixers requires:
- HTML5 page for each Mixing level or layer
- Front-end interface for the Editor who is producing the live composite stream
- Front-end to publish the live stream
HTML5 pages for Mixers
The HTML5 page loaded into a Mixer is responsible for subscribing to the live streams that are used to create the composite stream published by the Mixer.
The Red5 Pro testbeds provide the following sample pages that can be used together to create a 6x6 composition:
- 2x2 Grid Layout: Includes a 2x2 grid that can subscribe to up to 4 streams.
- 3x3 Grid Layout: Includes a 3x3 grid that can subscribe to up to 9 streams.
The example 6x6 composition uses 5 Mixers. 4 Mixers load the 3x3 Grid Layout
page that subscribes to live streams to compose. The single final Mixer loads the 2x2 Grid Layout
page to create the final composite stream of the other mixes.
Front-end to publish the live streams
The Red5 Pro testbeds can be used to publish the live streams that are included in the composite stream.
Publish each of these streams as follows:
- Open the
Red5 Pro Testbed Settings Page
, setWeb App
tolive
. - If the Round Trip Authentication is enabled on the
live
app, head to thePublish - Stream Manager Proxy RoundTrip Authentication
testbed by clickingTestbed Menu
->Stream Manager Tests
->Publish - Stream Manager Proxy RoundTrip Authentication
. Otherwise, head to thePublish - Stream Manager Proxy
testbed by clickingTestbed Menu
->Stream Manager Tests
->Publish - Stream Manager Proxy
- If using the
Publish - Stream Manager Proxy RoundTrip Authentication
, provide a set of mock username, password and token and clickSubmit
. - Repeat the process to publish as many additional streams as needed.
Front-end for the Editor
The Red5 Pro testbeds provide a sample Grid Composition Manager
page. It creates a composition with multiple Red5 Pro Mixers that load an HTML5 page that subscribes to the streams.
The page includes:
- Form on the right to create the composition
- Central
Active Streams
section with the list of published streams in the Red5 Pro environment. - Right section with a grid of boxes, each representing a Mixer.
As an Editor create a composition as follows:
- Open the
Red5 Pro Testbed Settings Page
, and setWeb App
tolive
. - While on the
Settings Page
, scroll to theMixer Specific
section and set theBackend WebSocket For Compositions
endpoint to point to the Node.js Server deployed as Back-end for the Mixer testbeds. - While on the
Mixer Specific
section, checkEnable Round Trip Authentication
if the Round Trip Authentication was configured in thelive
app. - While on the
Settings Page
, in theStream Manager Specific
section set the value for theStream Manager Access Token
. - Head to the
Grid Composition Manager
testbed by clickingTestbed Menu
->Stream Manager Mixer Tests
->Grid Composition Manager
. - Note that the
Active Streams
section shows the list of streams that were published above. -
Create the final Mixer that loads the
2x2 Grid Layout
page using theCreate Mixer Objects
form as follows:- Mixer Name: Unique name or UUID for the Mixer.
- Mixing Page: Selector for the HTML5 page to load in the Mixer. Select
2x2
. - Scope: app and room name where the composite stream is published by the mixer.
- Stream Name: stream name of the composite stream that will be published by the mixer.
- Width: Width of the composite stream that will be published by the mixer
- Height: height of the composite stream that will be published by the mixer
- Framerate: framerate of the composite stream that will be published by the mixer
- Bitrate: bitrate (in kbps) of the composite stream that will be published by the mixer
- Destination Mixer Name: Leave empty.
- Add the Mixer using the Add Mixer button.
-
Create the 4 Mixers that load the
3x3 Grid Layout
page using theCreate Mixer Objects
form as follows:- Mixer Name: Unique name or UUID for the Mixer.
- Mixing Page: Selector for the HTML5 page to load in the Mixer. Select
3x3
. - Scope: app and room name where the composite stream is published by the mixer.
- Stream Name: stream name of the composite stream that will be published by the mixer. Use a different stream name for each Mixer.
- Width: Width of the composite stream that will be published by the mixer
- Height: height of the composite stream that will be published by the mixer
- Framerate: framerate of the composite stream that will be published by the mixer
- Bitrate: bitrate (in kbps) of the composite stream that will be published by the mixer
- Destination Mixer Name: It determines which Mixer will receive the composite stream from the current Mixer. Use the
Mixer Name
specified earlier for the Mixer that loads the2x2 Grid Layout
. - Add the Mixer using the Add Mixer button.
- Repeat step 6 four times to create the 4 Mixers.
- Specify an
Event Name
which is a unique name or UUID. - Check
Transcode Composition
if your node group includes a Transcoder and you want to transcode the composite stream. - Specify a
Mixer Region
which is the name of the region where the Mixer servers are deployed - Click
Create Composition
and scroll up to theActive Composition
section where the state of the newly created composition will be shown. - Wait until the composition
State
becomesComposing
. At the same time, a rectangle should appear in the right section of the page. - Drag and drop a stream box from the
Active Streams
section to the rectangle of one of the Mixers with the3x3
grid. If the stream is dropped into themuted
section it will be muted in the composition. Similarly, if the Stream is dropped into theunmuted
section it will be unmuted in the composition. - Remove the stream from the composition by dragging it back to the
Active Streams
area. - If the Round Trip Authentication was enabled, use the Stream Manager
Subscribe - Stream Manager Proxy RoundTrip Authentication
testbed to subscribe to the composite stream and verify the composition updates in real-time as changes are applied in theGrid Composition Manager
testbed. Otherwise, use the Stream ManagerSubscribe - Stream Manager Proxy
testbed.