Skip to content

newrelic/video-dash-js

Community Project header

New Relic Dash.js Tracker

npm version License

The New Relic Dash.js Tracker provides comprehensive video analytics for applications using Dash.js Player. Track video events, monitor playback quality, identify errors, and gain deep insights into user engagement and streaming performance for MPEG-DASH content.

Features

  • 🎯 Automatic Event Detection - Captures Dash.js player events automatically without manual instrumentation
  • 📊 Comprehensive Bitrate Tracking - Four distinct bitrate metrics for complete quality analysis
  • 🔄 Multi-Version Support - Compatible with both dash.js v4.x and v5.x
  • 📈 QoE Metrics - Quality of Experience aggregation for startup time, buffering, and playback quality
  • 🎨 Event Segregation - Organized event types: VideoAction, VideoErrorAction, VideoCustomAction
  • 🚀 Easy Integration - NPM package or direct script include
  • Real-Time Performance - Network throughput and download bitrate monitoring
  • 🎬 MPEG-DASH Specific - Optimized for adaptive streaming with separate video/audio tracks

Table of Contents

Installation

Option 1: Install via NPM/Yarn

Install the package using your preferred package manager:

NPM:

npm install @newrelic/video-dash

Yarn:

yarn add @newrelic/video-dash

Option 2: Direct Script Include (Without NPM)

For quick integration without a build system, include the tracker directly in your HTML:

<!DOCTYPE html>
<html>
  <head>
    <!-- Dash.js Player -->
    <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
    
    <!-- New Relic Dash.js Tracker -->
    <script src="path/to/newrelic-video-dash.min.js"></script>
  </head>
  <body>
    <video id="myVideo" controls width="640" height="480"></video>

    <script>
      // Initialize Dash.js player
      var player = dashjs.MediaPlayer().create();
      player.initialize(document.querySelector('#myVideo'), 'https://your-dash-manifest.mpd', true);

      // Configure New Relic tracker with info from one.newrelic.com
      const options = {
        info: {
          licenseKey: "YOUR_LICENSE_KEY",
          beacon: "YOUR_BEACON_URL",
          applicationID: "YOUR_APP_ID"
        }
      };

      // Initialize tracker
      const tracker = new DashTracker(player, options);
    </script>
  </body>
</html>

Setup Steps:

  1. Get Configuration - Visit one.newrelic.com and complete the video agent onboarding to obtain your credentials (licenseKey, beacon, applicationID)
  2. Download Tracker - Get newrelic-video-dash.min.js from:
    • GitHub Releases (recommended)
    • Build from source: npm run builddist/umd/newrelic-video-dash.min.js
  3. Integrate - Include the script in your HTML and initialize with your configuration

Prerequisites

Before using the tracker, ensure you have:

  • New Relic Account - Active New Relic account with valid application credentials (beacon, applicationID, licenseKey)
  • Dash.js Player - Version 4.x or 5.x integrated in your application

Note: This tracker is standalone and does not require the New Relic Browser agent. It communicates directly with New Relic using the credentials provided in the configuration.

Usage

Getting Your Configuration

Before initializing the tracker, obtain your New Relic configuration:

  1. Log in to one.newrelic.com
  2. Navigate to the video agent onboarding flow
  3. Copy your credentials: licenseKey, beacon, and applicationID

Basic Setup

import DashTracker from '@newrelic/video-dash';

// Initialize Dash.js player
const player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector('#video'), manifestUrl, autoPlay);

// Configure tracker with credentials from one.newrelic.com
const options = {
  info: {
    licenseKey: 'YOUR_LICENSE_KEY',
    beacon: 'YOUR_BEACON_URL',
    applicationID: 'YOUR_APP_ID'
  }
};

// Initialize tracker
const tracker = new DashTracker(player, options);

Advanced Configuration

const options = {
  info: {
    licenseKey: 'YOUR_LICENSE_KEY',
    beacon: 'YOUR_BEACON_URL',
    applicationID: 'YOUR_APP_ID'
  },
  config: {
    qoeAggregate: true,        // Enable QoE event aggregation
    qoeIntervalFactor: 2       // Send QoE events every 2 harvest cycles
  },
  customData: {
    contentTitle: 'My Video Title',
    customPlayerName: 'MyCustomPlayer',
    customAttribute: 'customValue'
  }
};

const tracker = new DashTracker(player, options);

Configuration Options

QoE (Quality of Experience) Settings

Option Type Default Description
qoeAggregate boolean false Enable Quality of Experience event aggregation. Set to true to collect QoE metrics like startup time, buffering, and average bitrate.
qoeIntervalFactor number 1 Controls QoE event frequency. A value of N sends QoE events once every N harvest cycles. Must be a positive integer. QoE events are always included on first and final harvest cycles.

Custom Data

Add custom attributes to all events:

customData: {
  contentTitle: 'My Video Title',      // Override video title
  customPlayerName: 'MyPlayer',        // Custom player identifier
  customPlayerVersion: '1.0.0',        // Custom player version
  userId: '12345',                     // User identifier
  contentSeries: 'Season 1',           // Series information
  // Add any custom attributes you need
}

API Reference

Core Methods

tracker.setUserId(userId)

Set a unique identifier for the current user.

tracker.setUserId('user-12345');

tracker.setHarvestInterval(milliseconds)

Configure how frequently data is sent to New Relic. Accepts values between 1000ms (1 second) and 300000ms (5 minutes).

tracker.setHarvestInterval(30000); // Send data every 30 seconds

tracker.sendCustom(actionName, state, attributes)

Send custom events with arbitrary attributes.

tracker.sendCustom('VideoBookmarked', 'playing', {
  timestamp: Date.now(),
  position: player.time(),
  userId: 'user-12345',
  bookmarkId: 'bookmark-789'
});

tracker.sendOptions(options)

Update tracker configuration after initialization.

tracker.sendOptions({
  customData: {
    contentTitle: 'New Video Title',
    season: '1',
    episode: '3'
  }
});

Example: Complete Integration

import DashTracker from '@newrelic/video-dash';

// Initialize Dash.js player
const player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector('#video'), manifestUrl, true);

// Initialize tracker
const tracker = new DashTracker(player, {
  info: {
    licenseKey: 'YOUR_LICENSE_KEY',
    beacon: 'YOUR_BEACON_URL',
    applicationID: 'YOUR_APP_ID'
  },
  config: {
    qoeAggregate: true
  }
});

// Set user context
tracker.setUserId('user-12345');

// Configure reporting interval
tracker.setHarvestInterval(30000);

// Send custom events
player.on('qualityChangeRendered', () => {
  tracker.sendCustom('QualityChanged', 'playing', {
    newQuality: player.getQualityFor('video'),
    timestamp: Date.now()
  });
});

Bitrate Metrics

The tracker captures four distinct bitrate metrics providing complete quality analysis:

Attribute Description Use Case
contentBitrate Video-only bitrate (in bps) from the currently active video track, excluding audio Monitor actual video quality being delivered
contentManifestBitrate Maximum combined (video + audio) bitrate (in bps) as declared in the MPD manifest. Represents the highest possible stream variant Understand maximum quality potential
contentSegmentDownloadBitrate Network bandwidth (in bps) estimated by the player's ABR algorithm, based on measured download throughput Analyze ABR decision-making
contentNetworkDownloadBitrate Effective download throughput (in bps), calculated as (bytesDownloaded × 8) / downloadTime from the latest video segment request Monitor real-time network performance

Bitrate Monitoring Example

// All bitrate metrics are automatically captured and sent with each event
// Access them in New Relic Insights queries:

// NRQL Query Examples:
// SELECT average(contentNetworkDownloadBitrate) FROM VideoAction WHERE actionName = 'CONTENT_HEARTBEAT'
// SELECT contentBitrate, contentSegmentDownloadBitrate FROM VideoAction WHERE actionName = 'CONTENT_RENDITION_CHANGE'

Data Model

The tracker captures comprehensive video analytics across three event types:

  • VideoAction - Playback events (play, pause, buffer, seek, quality changes, heartbeats)
  • VideoErrorAction - Error events (playback failures, network errors, media errors)
  • VideoCustomAction - Custom events defined by your application

Full Documentation: See DATAMODEL.md for complete event and attribute reference.

Support

Should you need assistance with New Relic products, you are in good hands with several support channels.

If the issue has been confirmed as a bug or is a feature request, please file a GitHub issue.

Support Channels

Contribute

We encourage your contributions to improve the Dash.js Tracker! Keep in mind that when you submit your pull request, you'll need to sign the CLA via the click-through using CLA-Assistant. You only have to sign the CLA one time per project.

If you have any questions, or to execute our corporate CLA (which is required if your contribution is on behalf of a company), drop us an email at opensource@newrelic.com.

For more details on how best to contribute, see CONTRIBUTING.md.

A note about vulnerabilities

As noted in our security policy, New Relic is committed to the privacy and security of our customers and their data. We believe that providing coordinated disclosure by security researchers and engaging with the security community are important means to achieve our security goals.

If you believe you have found a security vulnerability in this project or any of New Relic's products or websites, we welcome and greatly appreciate you reporting it to New Relic through our bug bounty program.

If you would like to contribute to this project, review these guidelines.

To all contributors, we thank you! Without your contribution, this project would not be what it is today.

License

The Dash.js Tracker is licensed under the Apache 2.0 License.

The Dash.js Tracker also uses source code from third-party libraries. Full details on which libraries are used and the terms under which they are licensed can be found in the third-party notices document.

About

No description, website, or topics provided.

Resources

License

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Packages

 
 
 

Contributors