/
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:
- Open the
Red5 Pro Testbed Settings Page
, and 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 the mock username, password, and token and clickSubmit
. - 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:
- 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 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
andNxN
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.
- Add the Mixer using the
Add Mixer
button. - 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. The rectangle represents the Mixer that was just created. - Drag and drop a stream box from the
Active Streams
section to the rectangle on the right. 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 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 theGrid Composition Manager
testbed. Otherwise, use theSubscribe - Stream Manager Proxy
testbed.