Mixer-based Video Conference
Creating a Mixer-based Video Conference with the Red5 Pro Testbeds
A Mixer based video conference requires:
- HTML5 page for the Mixer
- Front-end for the Host
- Front-end for the Participants
Mixed Conference Flow
- Presenters begin by publishing content to Red5 Pro in a waiting room scope.
- The
Grid Manager
uses the Stream Manager API to create a provision for a conference. - The backend mixer creates a composition on a Mixer node, based on the HTML5 layout specified by the
Grid Manager
. - The mixer node publishes the composite stream back to an Origin node, which passes the stream to the Edge nodes.
- The
Grid Manager
adds presenters to the conference through the Backend Mixer. - When a presenter is added, they call the Stream Manager join API to get an Origin (which is the Origin the Mixer is publishing to) to publish their conference stream to the conference room scope created at step 2.
- The Origin creates a
mix-minus
audio stream and publishes that. A stream combining themix-minus
audio with the video is generated by the Mixer to the Origin and is returned to the presenter through their existing publish connection. (Note: Presenters do not subscribe from Edge nodes) - The HTML5 page on the Mixer subscribes to the presenter's live stream, through Edge nodes, to add to the composition.
- Streams are then subscribed to by the viewers on the edge nodes.
HTML5 page for the Mixer
The HTML5 page for the Mixer is responsible for subscribing to the conference participants' streams that are shown in the composite stream. The composite stream is returned to participants along with mix-minus audio allowing them to participate without audio feedback. This stream can also be consumed by third parties to watch the whole conference.
The Red5 Pro testbeds provide a sample Conference Layout
page for this purpose. The page shows the focused presenter on the top row and the other participants in the bottom row.
Front-end for the Participants
The Red5 Pro testbeds provide a sample Conference Participant - Stream Manager Proxy
page. It allows the publishing of a stream to the waiting room of a conference and it receives a composite stream with mix-minus audio once added to the conference.
The page includes:
- Form to submit the Round Trip Authentication credentials, if authentication is configured
- Small player on the right for the published stream
- Larger player on the left for the composite stream
Join the conference as a Participant as follows:
- Open the
Red5 Pro Testbed Settings Page
, setWeb App
tolive/<room>
, where<room>
is a room scope. A room scope is always required when creating a mixed conference. - 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. - Head to the
Conference Participant
testbed by clickingTestbed Menu
->Stream Manager Mixer Tests
->Conference Participant
. - If
Enable Round Trip Authentication
was checked at step 3, provide a set of mock username, password, and token and clickSubmit
- Click
Start Broadcast
to join the waiting room of the video conference for the room<room>
configured on theSettings
page. - As soon as the
Conference Host
adds the participant to the conference, the composite stream will appear in the player on the left. Continue to the next section to see how to create a conference as a Host and add Participants to it.
Front-end for the Host
The Red5 Pro testbeds provide a sample Conference Host - Stream Manager Proxy
page. It creates a mixed video conference using a Red5 Pro Mixer that loads an HTML5 page and subscribes to the Participants' streams.
The page includes:
- Form to submit the Round Trip Authentication credentials, if the authentication was enabled
- Form on the left to create the composition
- Section on the right to manage participants in a waiting room
- Central section to see and manage participants that are part of the video conference and composite stream.
Create a conference as a Host as follows:
- Open the
Red5 Pro Testbed Settings Page
, setWeb App
tolive/<room>
, where<room>
is the same room scope used above. - 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
Conference Host
testbed by clickingTestbed Menu
->Stream Manager Mixer Tests
->Conference Host
. - If
Enable Round Trip Authentication
was checked at step 3, provide a mock username, password, and token, and clickSubmit
. - The right-hand side section of the testbed will display the streams in the waiting room that were published by the Conference Participants.
-
Create the composition using the
Create Composition
form. The form is pre-configured, but special attention must be paid to theMixer Region
field that must specify the region where the Red5 Pro Mixers are currently deployed. The other parameters are as follows:- Event Name: Unique event name or UUID.
- Mixing Page: Selector for the HTML5 page to load in the Mixer. The testbed allows selecting only the
focused
page that points to the sampleConference Layout
page. - 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. Note: The mixer of a conference must always publish its composite stream to
<app>/<room>/<room>
. That is, Stream Name must be equal to the value of<room>
. - 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
- Mixer Region: 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
. - Click on the
add to conference
button of one of the waiting room streams and verify it is moved to the central section of the page. That indicates the stream was added to the composition. Note: A composition needs to be created before Participants are added to a conference. - If the Round Trip Authentication is enabled, use the
Subscribe - Stream Manager Proxy RoundTrip Authentication
to subscribe to the composite stream published by the Mixer<app>/<room>/<room>
to verify it includes the new Participant. Otherwise, use theSubscribe - Stream Manager Proxy
testbed. - Interact with the
make presenter
andremove from conference
buttons to verify the focused presenter and list of Participants changes in theConference Host
testbed and composite stream.