npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webm-demuxer-js

v0.0.2

Published

A javascript implementation of the Webm Demuxer (matroska). View a demo of a dumux result [here](https://jscodec.github.io/jswebm/) Better examples and reworked api coming soon.

Downloads

1

Readme

Webm Demuxer

A javascript implementation of the Webm Demuxer (matroska). View a demo of a dumux result here Better examples and reworked api coming soon.

live demo: https://jscodec.github.io/jswebm-demo/ https://github.com/jscodec/jswebm-demo

API Proposal

JsWebm

Properties

Top Level wrapper and interface.

  • videoPackets : Array of demuxed video packets
  • audioPackets : Array of demuxed audio packets
  • docType : Document type
  • audioCodec : Audio codec for the audio track
  • eof : Boolean, if the end of the file has been reached

Functions

  • queueData(buffer) : queue an incoming chunck of data, must be sequential
  • demux() : Attempts to parse up to 1 new packet, maybe return promise and reject if current buffer runs out

Example

const demuxer = new JsWebm();
demuxer.queueData(buffer);
while (!demuxer.eof) {
  demuxer.demux();
}
console.log(demuxer);
console.log(`total video packets : ${demuxer.videoPackets.length}`);
console.log(`total audio packets : ${demuxer.audioPackets.length}`);

Packet format

{
  data: ArrayBuffer(3714) {},
  isKeyframe: false,
  keyframeTimestamp: 0,
  timestamp: 0,
}

Webm Demuxer

Running the demo npm install npm run test

Change Log

  • V0.0.3
    • Working on ogv.js 1.3.1
    • Added basic support for Matroska Files
    • Added support for Tags Element
    • Added Support for Fixed size, and EBML laced elements

Algorithm Overview

The demuxer holds a queue of arrayBuffers which are sent in from the main player controller. The difficulty lies in the way the buffers come in. In order to achieve progressive downloading, we must parse the data as it comes in, but it is not possible to ensure that the elements will be completely contained in one chunk ie: the elements can be arbitrarily broken up across one ore more incoming buffers.

Main goal : To parse the incoming buffers without unnecessary rewrites. The only write will be the time the final frame buffer is made which will be sent off to the decoders.

DataInterface Class

  • queueData(data) receives arrayBuffer chunks of arbitrary length, adds to queue
  • demux() is called from main loop
    • Parse as much as possible then exit.
    • Must pick up parsing where it left off.
    • Not possible to know if enough data available to parse.

Matroska Parsing

The matroska format uses the EBML principal, which is essentially a type of markdown language like xml which can be applied to binary files. The elements come in 2 basic types: container types, which contain sub elements called Master Elements, and 7 data type elements. All elements contain a 2 part header, plus their payload. The header contains an id, which can range in length from 1 to 4 bytes, and a size which ranges from 1 to 8 bytes. Vint or variable sized integers, used for the id and size contain the length of their respective integer in the first byte.

The algorithm will then work as follows:

  • Read first byte
  • Calculate byte width of Vint
  • Test if there are enough bytes available in current buffer
    • If yes, read entire Vint
    • If not, use buffered read method saving state at each position (more overhead)
  • At each stage check if there are remaining bytes
    • If no, dequeue buffer
      • If no more buffers, return null or false (can't decide yet)
  • Upon next call to process, must pick up where it left off

Example of Element spread across 2 buffers

Alt

Closeup of Vint or Element ID

Alt

API

Coming Soon!