https://github.com/monyone/umataste

HTML5 fmp4 live stream (ll-fmp4) player written in TypeScript
https://github.com/monyone/umataste

fmp4 html5 low-latency mse player webcodecs

Last synced: 3 months ago
JSON representation

HTML5 fmp4 live stream (ll-fmp4) player written in TypeScript

• Host: GitHub
• URL: https://github.com/monyone/umataste
• Owner: monyone
• License: mit
• Created: 2022-04-17T01:13:12.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-01T03:53:35.000Z (over 1 year ago)
• Last Synced: 2024-10-03T15:07:48.094Z (3 months ago)
• Topics: fmp4, html5, low-latency, mse, player, webcodecs
• Language: TypeScript
• Homepage:
• Size: 110 KB
• Stars: 11
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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

HTML5 fmp4 live stream (ll-fmp4) player written in TypeScript

## Feature

* Playback for fmp4 stream

* Extremely low latency of less than 0.1 second in the best case

* following live playback style supported

    * MSE (High Quolity, but 0.5 ~ delay)

    * Breakout Box (low latency, use WebCodecs and BreakOut Box, Chrome Only)

    * Canvas + WebAudio (low latency, use WebCodecs, Chrome Only)

* Every component are plugable style

## Build

```

yarn

yarn build

```

## Getting Started

```

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

  // MSEPlayer use Media Source Extension

  // BreakoutBoxPlayer use Insertable Stream for MediaStreamTrack

  // CanvasWebAudioPlayer use Canvas and WebAudio

  var zlplayer = new window.umataste.MSEPlayer({ 

    // some options

  });

  zlplayer.attachMedia(videoElement);

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

    videoElement.play()

  });

```