/

Creating a Small Audio and Video Mix

Creating a Small Audio and Video Mix using the Red5 Pro Testbeds

A Small Audio and Video Mix that uses a single Mixer requires:

  • HTML5 page for the Mixer
  • Front-end for the Editor
  • Front-end to publish live streams for composition

HTML5 page for the Mixer

The HTML5 page for the Mixer is responsible for subscribing to the live streams shown in the composite stream.

The Red5 Pro testbeds provide the following sample pages:

  • 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.
  • Dynamic NxN Grid Layout: Includes a dynamic grid that resizes as streams are added or removed from it.

Front-end to publish the live streams

The Red5 Pro testbeds can be used to publish the live streams included in the composite stream.

Publish each of those streams as follows:

  1. Open the Red5 Pro Testbed Settings Page, and 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 the mock username, password, and token and click Submit.
  4. Repeat the process to publish as many other streams as needed.

Front-end for the Editor

The Red5 Pro testbeds provide a sample Grid Composition Manager page. This sample creates a composition with a Red5 Pro Mixer loading 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.
  • Section on the right with a grid of boxes, each representing a Mixer.

Create a composition as an Editor 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 one Mixer for the composition 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. The testbed allows selecting the 2x2, 3x3 and NxN sample grids. Select any of these grids.
    • 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: used only with compositions that have multiple Mixers. It determines which Mixer receives the composite stream from the current Mixer. For a composition with only one Mixer like this one, this field must be left empty to have the mixer publish to an Origin or Transcoder node.
  8. Add the Mixer using the Add Mixer button.
  9. Specify an Event Name which is a unique name or UUID.
  10. Check Transcode Composition if your node group includes a Transcoder and you want to transcode the composite stream.
  11. Specify a Mixer Region which is the name of the region where the Mixer servers are deployed
  12. Click Create Composition and scroll up to the Active Composition section where the state of the newly created composition will be shown.
  13. Wait until the composition State becomes Composing. At the same time, a rectangle should appear in the right section of the page. The rectangle represents the Mixer that was just created.
  14. Drag and drop a stream box from the Active Streams section to the rectangle on the right. 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.
  15. Remove the stream from the composition by dragging it back to the Active Streams area.
  16. If the Round Trip Authentication is 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 Subscribe - Stream Manager Proxy testbed.