zlplayer

HTML5 MPEG2-TS live stream player written in TypeScript.

Overview

zlplayer works by decoding MPEG2-TS stream into VideoFrame/AudioData using WebCodecs,
followed by feeding into an an HTML5 <video> element through MediaStreamTrack Insertable Streams (a.k.a. Breakout Box).

Feature

• Playback for MPEG2-TS stream with H.264 + AAC codec transported in http(s)
• Extremely low latency of less than 0.1 second in the best case

Installation

npm install --save zlplayer

or

yarn add zlplayer

Build

yarn
yarn build

Getting Started

<script src="zlplayer"></script>
<video id="videoElement"></video>
<script>
  var videoElement = document.getElementById('videoElement');
  var zlplayer = new window.zlplayer.Player({
    // some options
  });
  zlplayer.attachMedia(videoElement);
  zlplayer.load(/* url */).then(() => {
    videoElement.play()
  });
</script>