mpegts.js

MPEG2-TS ストリームを HTML5 上で再生するビデオプレーヤーです。

mpegts.js はライブ配信に対し、低遅延再生のために最適化しています。DVB/ISDB のテレビチャンネルや監視カメラの映像等を低遅延で再生可能になります。

mpegts.js は flv.js を基づいて作ってきたものです。

Overview

mpegts.js は、JavaScript で MPEG2-TS ストリームを解析しながら、映像と音声のデータを ISO BMFF (fmp4) フォーマットのフラグメントにリマックスして、Media Source Extensions を通じて <video> 要素に提供することで再生することにしています。

Demo

http://xqq.github.io/mpegts.js/demo/

demo with aribb24.js

Features

• http(s) または WebSocket で伝送する H.264 + AAC の MPEG2-TS ストリームが再生可能
• 最良の場合は 1 秒以内の低遅延が達成可能
• TS packet が 192 bytes の .m2ts ファイル（BDAV/BDMV）、または 204 bytes も再生可能
• 動的パラメータ切り替えが可能 （例えば、映像解像度が途中に切り替わっても再生します）
• Chrome, FireFox, Safari, Edge (Old or Chromium) または Chromium-based ブラウザで実行可能
• HTMLMediaElement 内部バッファーの遅延を追いかける機能
• 低い CPU 使用率とメモリ使用量 （1つのインスタンスが概ね 10MiB のメモリかかります）
• ARIB-B24 字幕等の PES private data (stream_type=0x06) が抽出可能
• Timed ID3 Metadata (stream_type=0x15) のコールバック支援 (TIMED_ID3_METADATA_ARRIVED)

CORS

MPEG2-TS ストリームが別のサーバー上にある場合、Access-Control-Allow-Origin は必須です。

cors.md を参照してください。

Installation

npm install --save mpegts.js

Build

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

Getting Started

<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>

Simple Realtime Server を用いて mpegts.js をテストすることができます。

TODO

• 静的 MPEG2-TS ファイルの再生 （現時点ではシークできません）
• H.265/HEVC codec の支援 （ただし、現時点では Safari のみ HEVC が再生可能）
• MP3/AC3 audio codec の支援
• AV1/OPUS codec over MPEG2-TS stream support (?)

Limitations

• mpeg2video はサポートしていません。映像は H.264 であることが求められます
• IE11 などの古いブラウザでは、HTTP MPEG2-TS がライブ視聴できません
• iOS では、Media Source Extensions が禁じられたため使えませんが、iPadOS では使用可能

Features inherited from flv.js

• H.264 + AAC/MP3 codec の FLV ファイルが再生可能
• マルチパットな複数の FLV ファイルも一緒に再生可能
• HTTP FLV のライブストリームが低遅延で再生可能
• WebSocket で伝送する FLV ストリームも再生可能
• Chrome, FireFox, Safari 10, IE11 and Edge のブラウザで実行可能
• ブラウザによる hardware accelerated があるためコストは非常に低い

FLV playback limitations

• MP3 audio codec は IE11 / Edge でサポートされていません
• HTTP FLV のライブストリームは一部のブラウザで再生できません。livestream.md を参照

FLV Multipart playback

multipart.md を参照

Livestream playback

livestream.md を参照

API and Configuration

api.md を参照

Debug

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

Design

design.md を参照

License

Copyright (C) 2021 magicxqq. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

This site is open source. Improve this page.