@accurate-player/mse

This package contains some useful tools built on the Media Source Extensions (MSE) API.

EmptySource

This tool creates an empty black-frame video with a given duration. This is useful when you don't have a video for example and still want to load discrete audio tracks:

Example:

import { ProgressivePlayer } from "@accurate-player/accurate-player-progressive";
import { EmptySource } from "@accurate-player/mse";

const master = document.getElementById("video");
const player = new ProgressivePlayer(master, LICENSE_KEY);

const emptySource = new EmptySource(duration);
player.api.loadVideoFile(emptySource.videoFile);
Copy

TrackExtractor

This tool enables you to play multi-track mp4 files. The browser <video> element cannot play more than one muxed audio track at the time, but this tool works around that issue.

It creates VideoFile and DiscreteAudioTrack objects from the video- and audio tracks in the file that you can load in Accurate Player. The TrackExtractor takes care of buffering and performs on-the-fly segmentation of the tracks.

Subtitle extraction is also supported. getTracks returns subtitle objects for all supported subtitles found in the file. The subtitles can be loaded with the corresponding plugin.

Example:

import { ProgressivePlayer } from "@accurate-player/accurate-player-progressive";
import { DiscreteAudioPlugin } from "@accurate-player/accurate-player-plugins";
import { TrackExtractor } from "@accurate-player/mse";

const master = document.getElementById("video");
const player = new ProgressivePlayer(master, LICENSE_KEY);
const dap = new DiscreteAudioPlugin(player);
const imscSubtitlePlugin = new ImscSubtitlePlugin(player);
const vttSubtitlePlugin = new VttSubtitlePlugin(player);
const sccSubtitlePlugin = new SccSubtitlePlugin(player);

// Extract muxed tracks as Accurate Player objects
const trackExtractor = new TrackExtractor("https://example.com/video.mp4");
const { videoFiles, discreteAudioTracks, vttSubtitles, imscSubtitles, sccSubtitles } = await trackExtractor.getTracks(master);

// Load the tracks with the player/plugin apis as usual
player.api.loadVideoFile(videoFiles[0]);
dap.initDiscreteAudioTracks(
  discreteAudioTracks.map((audioTrack, index) => {
    return {
      enabled: index === 0,
      track: audioTrack,
    };
  }),
);
vttSubtitlePlugin.createVttSubtitles(vttSubtitles);
imscSubtitlePlugin.load(imscSubtitles);
sccSubtitlePlugin.add(sccSubtitles);
Copy

Known issues

The underlying package mp4box does not ship with typescript definitions. If your project requires strict type checking you must provide these definitions manually, as explained in this mp4box issue. Here is a minimal example:

declare module "mp4box" {
  export interface MP4MediaTrack {
    id: number;
    created: Date;
    modified: Date;
    movie_duration: number;
    movie_timescale: number;
    layer: number;
    alternate_group: number;
    volume: number;
    track_width: number;
    track_height: number;
    timescale: number;
    duration: number;
    bitrate: number;
    codec: string;
    language: string;
    nb_samples: number;
  }
  export interface MP4VideoData {
    width: number;
    height: number;
  }
  export interface MP4VideoTrack extends MP4MediaTrack {
    video: MP4VideoData;
  }
  export interface MP4AudioData {
    sample_rate: number;
    channel_count: number;
    sample_size: number;
  }
  export interface MP4AudioTrack extends MP4MediaTrack {
    audio: MP4AudioData;
  }
  export type MP4Track = MP4VideoTrack | MP4AudioTrack;
}
Copy