Using the Red5 Pro Mixer

The following components are required to use the Red5 Pro Mixer:

  • HTML5 Page for the Mixer
  • Optional Editing Front-end
  • Optional Editing Back-end

These components and their implementation depend on the use case and requirements of each application. To help developers get started, Red5 Pro provides a set of testbeds that showcase possible implementations for different use cases.

Simple Composition with Static HTML5 Page for the Mixer

This composition requires only a single HTML5 page provided when creating the composition. The page determines the looks and content of the composite stream created by the Mixer. The Mixer loads the page and publishes it and its content as if it was a screen share stream. Therefore, all content displayed on the page will be also displayed in the composite stream.

As a simple use case, consider using the Mixer to create a composite stream that includes two live streams. This is implemented using an HTML5 page including two players that subscribe to streams that show in the composite stream. At any time the page will render the two live streams and the mixer will capture and broadcast that as the composite stream.

For simple use cases, where the content of the composite stream does not change over time, a single HTML5 page is sufficient.

Complex Composition with Dynamic HTML5 Page for the Mixer

Complex use cases where the composite stream is updated in real-time involve an HTML5 page for the mixer that can change its content based on commands sent by external processes. An example of such a use case is a production scenario where the composite stream is the program feed for the audience. This stream is managed by one or more Editors that control the content of the feed in real-time.

Editing Front-end and Back-end

In the example above an editing front-end is required to allow Editors to remotely control the HTML5 page loaded into the Mixer. An editing back-end is required to receive the commands from the Editors and forward them to the HTML5 page loaded into a Mixer.

A simple solution consists of using a WebSocket server for the back-end and a WebSocket client in both the Editor front-end and an HTML5 page loaded into the mixer. The WebSocket server can easily forward the update commands from Editors to HTML5 pages. The HTML5 pages parse the commands to subscribe to new streams, change audio settings, update layouts through JavaScript and CSS, and more. As the commands are applied the composite stream will update accordingly continuing to show the effective contents of the HTML5 page.

The back-end server can also leverage a new webhook feature that allows it to receive stream publish and unpublish events from Red5 Pro nodes. These events can be used to keep track of which streams are live to add or remove them from compositions. The mixer testbeds provided by Red5 Pro include a Node.js server that uses the webhook feature to manage an active streams list. A list it provides to grid moderators through a WebSocket connection between the Node.js server and the mixer testbeds used by the moderator. In this way, as streams are published and unpublished from the live application, the moderator can see which streams are live and add any of those to a composition.

Check the Red5 Pro testbeds to see possible implementations for the Front-end and Back-end for different use cases.

Installing Mixer for Autoscale

See the mixer installation documentation for instructions on deploying a mixer node with your Red5 Pro Autoscale environment.