Mux EE Module Docs

for ExpressionEngine

Installation & Setup

Let’s run through the first-time step process.

System Requirements:

  • ExpressionEngine 6 and its minimum system requirements (specifically cURL).
  • v2 requires php +8.0 and MySQL +5.7.
  • Mux account.
  • Mux.com must be able to reach your EE install (more below) to send webhook events.

Also there are default config options that can be adjusted before install. Some advanced options are only available in the config. Once installed, default config options can be changed in the file, and then the settings must be re-saved to commit.

Install Checklist

Getting started has a few steps. Here is the short list, with more details below:

  • Install the Module. Copy both System and Themes folders. Note there is also example templates to reference.
  • Copy Mux API keys to EE.
  • Copy EE Webhook URL into Mux.
  • For live streams, check the custom live field is linked in Settings.
  • Add Asset/Live fields to channels.

Creating Mux Access Tokens

When creating API Access Tokens there are options to enable each service, Video, Data, System. It is recommended to create one key with all the services enabled. If you need different tokens for different services, then the EE Config file environment setup must be used.

screenshot

v2

API Tokens from Mux can be added to the module’s Environment page if the key is authorized for all the Mux services (video, data, system).

screenshot

v1

The API access tokens can only be added to the EE config file. The structure is listed below. Each service (video/data/system) can use the same token (if granted) or different tokens.

$config['mux_settings'] = array(

    'environments' => array(

        'development' => array(
            'name'         => 'Development',
            'env_key'      => '',
            'mux_video'    => array(
                'access_token' => '',
                'secret_key'   => '',
            ),
            'mux_data' => array(
                'access_token' => '',
                'secret_key'   => '',
            ),
            'mux_system' => array(
                'access_token' => '',
                'secret_key'   => '',
            ),
        ),

        'production' => array(
            'name'         => 'Production',
            'env_key'      => '',
            'mux_video'    => array(
                'access_token' => '',
                'secret_key'   => '',
            ),
            'mux_data' => array(
                'access_token' => '',
                'secret_key'   => '',
            ),
            'mux_system' => array(
                'access_token' => '',
                'secret_key'   => '',
            ),
        ),

        'staging' => array(
            'name'         => 'Staging',
            'env_key'      => '',
            'mux_video'    => array(
                'access_token' => '',
                'secret_key'   => '',
            ),
            'mux_data' => array(
                'access_token' => '',
                'secret_key'   => '',
            ),
            'mux_system' => array(
                'access_token' => '',
                'secret_key'   => '',
            ),
        ),
    )
)

Using Multiple Environments

MuxEE can support multiple environments like development, staging, production…etc. Each environment has API Access Tokens and settings, and correlates to Mux’s environments. If you are just getting started and want to keep things simple, use the “default” control panel approach. Environments can be changed by simply copying and pasting in different keys.

To add an environment, add a new array to the EE Config file as shown above. Once added, the different environments will show in the “Environments” page in the add-on.

3. Copy EE Webhook URL into Mux

What is a Webhook and Why Use Them?

When events happen in Mux, data is sent from Mux to the EE site.  We call these webhooks. For example, when a live stream receives a feed from an encoder, a request is sent from Mux to EE to signal that the encoder is connected, then another that the stream is active, then another that it disconnected. This is a more efficient process than EE constantly polling a URL to check for changes.

For this to work, Mux.com must be able to reach the module (your EE site). Locations like localhost and development servers behind firewalls may not work without some advanced network configuration. The module will warn when data is from Mux directly instead of from a stored webhook, and there will be greatly reduced functionality.

In addition, webhooks are sent when any video update happens, including events triggered from outside ExpressionEngine.  Should you add or delete videos using the API directly, or in the Mux Dashboard, updates will be sent to ExpressionEngine.  This is per-environment, so it is best to use different development environments if you want to keep changes isolated.

More information here: https://docs.mux.com/guides/video/listen-for-webhooks

One development tool for routing webhooks to local installs is https://smee.io/

1. Get URL

Head to Add-on Settings -> End Points. Copy Mux Webhook URL.

screenshot

2. Mux Webhook Page

Find the Mux Webhook page in their control panel.

screenshot

3. Create a new Webhook

Copy and paste the URL with your website into their URL field, and in the desired environment.

screenshot

4. Enable It

Verify the webhook is enabled.

screenshot

4. Select the EE Live Stream Field in Add-on Settings

When the module is installed, asset and live stream fields are automatically created for convenience. The fields can be added to a channel for use.

Multiple asset fields can be created at any time. However currently only one live stream field can be in use. The field can be used in multiple channels and entries, but only one instance of that field will work correctly at a time. Specifically one field ID. If you have a complex need for multiple live fields, please get in touch!

To disable the automatic field creation on install, change the /config/default.php file settings to false for these fields.

1. Verify Live Field

The module should automatically install this field. If not, simply create one.

screenshot

2. Link Field in Settings

In the Add-on Settings, select the live field. The module should automatically do this on install.

screenshot

3. Add Field to Channel

Simply add the custom field to a channel, tweak the channel layouts...etc. It is recommended to put the field in its own tab due to the large height of the field.

screenshot