Mux

The Mux Developer Hub

Welcome to the Mux developer hub. You'll find comprehensive guides and documentation to help you start working with Mux as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started

Integration Guide: Chromecast

Monitor your video streaming performance with just a few lines of code.

Mux Data is the best way to monitor video streaming performance.

Integration is easy - just initialize the Mux SDK, pass in some metadata, and you're up and running in minutes.

1. Getting Started

This documents integration instructions for Chromecast. For other players, see the additional Integration Guides.

2. Include the Mux Data SDK

Mux supports Chromecast applications that are built on top of the Cast Application Framework CAF Receiver SDK. The CAF Receiver SDK supports the following streaming protocols.

A Chromecast application contains two main components: a sender and a receiver. The Mux Data SDK is integrated at the receiver side; include the chromecast-mux.js JavaScript file within your custom receiver application. You can use the Mux-hosted version of the script to receive automatic updates. (The API will not change within major versions, as in chromecast/MAJOR_VERSION/chromecast-mux.js).

<script src="//src.litix.io/chromecast/2/chromecast-mux.js"></script>

For those that would rather host the file on your own, the source can be found here: https://github.com/muxinc/chromecast-mux. Also included in this repo is a sample sender application (in Java) and a sample custom receiver application showing the Mux Data integration.

3. Initialize Mux Data

To monitor video playback within your Chromecast application, pass the PlayerManager instance to initChromecastMux along with SDK options and metadata.

var app = {
  init: function () {
    const context = cast.framework.CastReceiverContext.getInstance();
    const playerManager = context.getPlayerManager();

    initChromecastMux(playerManager, {
      debug: false,
      data : {
        env_key: 'EXAMPLE_ENV_KEY', // required
        
        // Metadata
        player_name: 'Custom Player', // ex: 'My Main Player'
        player_init_time: Date.now(),
        
        // ... additional metadata
      }
    });

    context.start();
  }
};

$(document).ready(function () {
  app.init();
});

4. Test it

After you've finished integration, the quickest way to see that the SDK is loaded is to pass debug: true in the options passed to the SDK. With this flag enabled, you can open the debug console, and you should start seeing debug statements from [mux] when you click play on the video.

After playing a video, a few minutes after you stop watching, you'll see the results in your Mux account. We'll also email you when your first video view has been recorded. Log in to the dashboard and find the environment that corresponds to your env_key and look for video views.

Note that it may take a few minutes for views to show up in the Mux Data dashboard.

5. Add Metadata

Detailed Documentation

Options are provided via the data object passed in the call to initChromecastMux.

All metadata details except for env_key are optional, however you'll be able to compare and see more interesting results as you include more details. This gives you more metrics and metadata about video streaming, and allows you to search and filter on important fields like the player version, CDN, and video title.

For more information, see the Metadata guide.

6. Changing the Video

If your application plays multiple videos back-to-back in the same video player, you need to signal when a new video starts to the Mux SDK. Examples of when this is needed are:

  • The player advances to the next video in a playlist
  • The user selects a different video to play

In order to signal the Mux SDK that a new view is starting, you will need to emit a videochange event through the player, along with new metadata about the video (i.e. any of the Metadata that starts with video_). This can be done by the following:

playerManager.mux.emit('videochange', { ... });

It's best to change the video info immediately after telling the player which new source to play.

7. Advanced Options

Custom Errors

As of v1.0.0, chromecast-mux supports customizing the error handling, similar to other web player SDKs. See Custom Errors for detail.

Automatic Video Change

As of v1.0.0, chromecast-mux would automatically detect videochange events and emit these to Mux. This option was enabled by default, but from v2.0.0 onwards it is disabled by default in favour of you emitting the videochange event manually. If you would rather Mux continued to track these view changes, set automaticVideoChange: true in the Mux configuration when you initialize Mux.

initChromecastMux(playerManager, {
  debug: true,
  automaticVideoChange: true,
  data: {
    env_key: 'YOUR_KEY_HERE',
    // other metadata
  }
});

Destroying the Monitor

There are certain use cases where you want to stop monitoring playback within a player (for instance if the player is no longer being used, you are recycling players, or you are shutting down the application). In this case, you should make sure to destroy the monitor. This can be done by simply calling playerManager.mux.destroy().

8. Release Notes

Current Release

v2.0.1

  • Bug fix: Ensure the video_source_url is detected

Previous Releases

v2.0.0

  • Support ad event tracking
  • Default videochange detection to false - this can still be enabled if required
  • Clean up error tracking to report only fatal errors
  • Minor optimisations and bug fixes

v1.0.0

  • Support customizing error handling (via configuring automaticErrorTracking and errorTranslator).
  • Do not shut down on REQUEST_STOP.
  • Expose playerManager.mux.destroy() to stop monitoring the player instance.
  • Clean up better and minor bug fix around destroying monitor.

v0.1.0

  • Initial SDK created.

Updated 19 days ago

Integration Guide: Chromecast


Monitor your video streaming performance with just a few lines of code.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.