https://github.com/monyone/zlplayer

low latency player used Breakout box
https://github.com/monyone/zlplayer

html5 low-latency mpegts player

Last synced: about 2 months ago
JSON representation

low latency player used Breakout box

• Host: GitHub
• URL: https://github.com/monyone/zlplayer
• Owner: monyone
• License: mit
• Created: 2021-12-23T21:12:05.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-22T06:36:54.000Z (about 2 years ago)
• Last Synced: 2024-11-01T03:32:52.673Z (2 months ago)
• Topics: html5, low-latency, mpegts, player
• Language: TypeScript
• Homepage:
• Size: 161 KB
• Stars: 27
• Watchers: 7
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# zlplayer [![npm](https://img.shields.io/npm/v/zlplayer.svg?style=flat)](https://www.npmjs.com/package/zlplayer)

HTML5 MPEG2-TS live stream player written in TypeScript.

## Overview

zlplayer works by decoding MPEG2-TS stream into VideoFrame/AudioData using [WebCodecs](https://www.w3.org/TR/webcodecs/),   

followed by feeding into an an HTML5 `` element through [MediaStreamTrack Insertable Streams (a.k.a. Breakout Box)](https://alvestrand.github.io/mediacapture-transform/chrome-96.html).

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

```bash

npm install --save zlplayer

```

or 

```bash

yarn add zlplayer

```

## Build

```

yarn

yarn build

```

## Getting Started

```

  var videoElement = document.getElementById('videoElement');

  var zlplayer = new window.zlplayer.Player({

    // some options

  });

  zlplayer.attachMedia(videoElement);

  zlplayer.load(/* url */).then(() => {

    videoElement.play()

  });

```