/

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:

  1. Open the Red5 Pro Testbed Settings Page, set Web App to live.
  2. If the Round Trip Authentication is enabled on the live app, head to the Publish - Stream Manager Proxy RoundTrip Authentication testbed by clicking Testbed Menu -> Stream Manager Tests -> Publish - Stream Manager Proxy RoundTrip Authentication. Otherwise, head to the Publish - Stream Manager Proxy testbed by clicking Testbed Menu -> Stream Manager Tests -> Publish - Stream Manager Proxy
  3. If using the Publish - Stream Manager Proxy RoundTrip Authentication, provide a set of mock username, password and token and click Submit.
  4. 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:

  1. Open the Red5 Pro Testbed Settings Page, and set Web App to live.
  2. While on the Settings Page, scroll to the Mixer Specific section and set the Backend WebSocket For Compositions endpoint to point to the Node.js Server deployed as Back-end for the Mixer testbeds.
  3. While on the Mixer Specific section, check Enable Round Trip Authentication if the Round Trip Authentication was configured in the live app.
  4. While on the Settings Page, in the Stream Manager Specific section set the value for the Stream Manager Access Token.
  5. Head to the Grid Composition Manager testbed by clicking Testbed Menu -> Stream Manager Mixer Tests -> Grid Composition Manager.
  6. Note that the Active Streams section shows the list of streams that were published above.

  7. Create the final Mixer that loads the 2x2 Grid Layout page using the Create 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.

  8. Create the 4 Mixers that load the 3x3 Grid Layout page using the Create 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 the 2x2 Grid Layout.
    • Add the Mixer using the Add Mixer button.
  9. Repeat step 6 four times to create the 4 Mixers.
  10. Specify an Event Name which is a unique name or UUID.
  11. Check Transcode Composition if your node group includes a Transcoder and you want to transcode the composite stream.
  12. Specify a Mixer Region which is the name of the region where the Mixer servers are deployed
  13. Click Create Composition and scroll up to the Active Composition section where the state of the newly created composition will be shown.
  14. Wait until the composition State becomes Composing. At the same time, a rectangle should appear in the right section of the page.
  15. Drag and drop a stream box from the Active Streams section to the rectangle of one of the Mixers with the 3x3 grid. If the stream is dropped into the muted section it will be muted in the composition. Similarly, if the Stream is dropped into the unmuted section it will be unmuted in the composition.
  16. Remove the stream from the composition by dragging it back to the Active Streams area.
  17. 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 the Grid Composition Manager testbed. Otherwise, use the Stream Manager Subscribe - Stream Manager Proxy testbed.