mpegts.js Documentation

mpegts.js is an HTML5 MPEG2-TS stream player optimized for low-latency live stream playback (e.g., DVB/ISDB television or surveillance cameras).

It works by transmuxing MPEG2-TS streams into ISO BMFF (Fragmented MP4) segments, which are then fed into an HTML5 <video> element using the Media Source Extensions (MSE) API.

To build the project manually, follow these steps:

1. Install development dependencies: npm install
2. Install the build tool: npm install -g webpack-cli
3. Run the build: npm run build (emits packaged & minimized JS in the dist folder).

For a debug build, use: npm run build:debug

npm install                 # install dev-dependencies
npm install -g webpack-cli  # install build tool
npm run build               # packaged & minimized js will be emitted in dist folder

When playing static MPEG2-TS or FLV files, it is recommended to include the Content-Length header in your CORS configuration so the player knows the file size. Alternatively, you must provide the accurate file size manually in the MediaDataSource object.

Access-Control-Expose-Headers: Content-Length

To play a live stream, first check if the browser supports mseLivePlayback using mpegts.getFeatureList(). Then, create a player instance using mpegts.createPlayer, attach it to a video element, and call load() and play().

<script src="mpegts.js"></script>
<video id="videoElement"></video>
<script>
    if (mpegts.getFeatureList().mseLivePlayback) {
        var videoElement = document.getElementById('videoElement');
        var player = mpegts.createPlayer({
            type: 'mse',  // could also be mpegts, m2ts, flv
            isLive: true,
            url: 'http://example.com/live/livestream.ts'
        });
        player.attachMediaElement(videoElement);
        player.load();
        player.play();
    }
</script>

If your video server uses 3xx redirects, the redirection response itself must contain the Access-Control-Allow-Origin header.

Note that browsers may send Origin: null in redirected requests due to current CORS policies. To support this, your edge server should respond with:

Access-Control-Allow-Origin: null
# OR
Access-Control-Allow-Origin: *

Alternatively, you can dynamically determine the allowed origin by reading the Origin request header.

Access-Control-Allow-Origin: null | *

To add mpegts.js to your project, use the following npm command:

npm install --save mpegts.js

When using Range seek for cross-origin files, mpegts.js adds a Range header, which triggers a browser Preflight OPTIONS request. Your server must handle this OPTIONS request by responding with the following headers to allow the subsequent GET request:

Access-Control-Allow-Origin: <your-origin> | *
Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Headers: range

To play a livestream, you must provide a configuration object to MediaDataSource where isLive is set to true. The type field determines the protocol used (e.g., mpegts, flv, or mse for WebSocket-based streams).

// MPEG2-TS over HTTP
{
    "type": "mpegts",
    "isLive": true,
    "url": "http://127.0.0.1:8080/live/livestream.ts"
}

// HTTP FLV
{
    "type": "flv",
    "isLive": true,
    "url": "http://127.0.0.1:8080/live/livestream.flv"
}

// MPEG2-TS/FLV over WebSocket
{
    "type": "mse",
    "isLive": true,
    "url": "ws://127.0.0.1:9090/live/livestream.flv"
}