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

1. Presenters begin by publishing content to Red5 Pro in a waiting room scope.
2. The Grid Manager uses the Stream Manager API to create a provision for a conference.
3. The backend mixer creates a composition on a Mixer node, based on the HTML5 layout specified by the Grid Manager.
4. The mixer node publishes the composite stream back to an Origin node, which passes the stream to the Edge nodes.
5. The Grid Manager adds presenters to the conference through the Backend Mixer.
6. 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.
7. The Origin creates a mix-minus audio stream and publishes that. A stream combining the mix-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)
8. The HTML5 page on the Mixer subscribes to the presenter's live stream, through Edge nodes, to add to the composition.
9. 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:

1. Open the Red5 Pro Testbed Settings Page, set Web App to live/<room>, where <room> is a room scope. A room scope is always required when creating a mixed conference.
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. Head to the Conference Participant testbed by clicking Testbed Menu -> Stream Manager Mixer Tests -> Conference Participant.
5. If Enable Round Trip Authentication was checked at step 3, provide a set of mock username, password, and token and click Submit
6. Click Start Broadcast to join the waiting room of the video conference for the room <room> configured on the Settings page.
7. 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:

1. Open the Red5 Pro Testbed Settings Page, set Web App to live/<room>, where <room> is the same room scope used above.
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 Conference Host testbed by clicking Testbed Menu -> Stream Manager Mixer Tests -> Conference Host.
6. If Enable Round Trip Authentication was checked at step 3, provide a mock username, password, and token, and click Submit.
7. The right-hand side section of the testbed will display the streams in the waiting room that were published by the Conference Participants.

8. Create the composition using the Create Composition form. The form is pre-configured, but special attention must be paid to the Mixer 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 sample Conference 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.
9. Click Create Composition and scroll up to the Active Composition section where the state of the newly created composition will be shown.
10. Wait until the composition State becomes Composing.
11. 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.
12. 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 the Subscribe - Stream Manager Proxy testbed.
13. Interact with the make presenter and remove from conference buttons to verify the focused presenter and list of Participants changes in the Conference Host testbed and composite stream.