DOCSEARCHbyAlgolia
Submit Docs

jmuxer Documentation

repository·master·Indexed 20 days ago

https://github.com/webstream-labs/jmuxer

A lightweight JavaScript MP4 muxer (v2.1.1) compatible with Browser (via MSE) and Node.js. It transforms raw H264/H265 video and AAC audio data into MP4 containers for playback or streaming. Features include support for custom logging via setLogger(), a writable stream for Node.js via createStream(), and a feed() method for providing raw media chunks.

Tokens
1.4K
Snippets
5
Records
6
Agent score
21%

What's inside jmuxer

  1. Install jMuxer

    master

    You can install jMuxer via npm for use in ES6 or Node.js environments. For TypeScript support, install the corresponding type definitions.

    ES6/Node.js:

    npm install --save jmuxer

    TypeScript:

    npm install --save @types/jmuxer
    npm install --save jmuxer

  2. Use jMuxer in Node.js

    master

    In Node.js, jMuxer can be used to export MP4 data by either piping a stream or using the onData callback.

    Option 1: Writable Stream (Pipe pattern) Use jmuxer.createStream() to get a writable stream that accepts raw buffers. You can pipe a feeder stream directly into it.

    Option 2: Callback pattern Use the onData option in the constructor to receive muxed data chunks, which you can then write to a response or another stream.

    // Option 1: Pipe pattern
let h264_feeder = getFeederStreamSomehow();
let destination = getWritterStreamSomehow();
h264_feeder.pipe(jmuxer.createStream()).pipe(destination);

// Option 2: Callback pattern
const jmuxer = new JMuxer({
    onData: function(data) {
        res.write(data); // send muxed data to client
    },
    debug: true
});

jmuxer.feed({
    audio: audio,
    video: video,
    duration: duration
});

  3. Initialize jMuxer with configuration options

    master

    To use jMuxer, create a new instance of JMuxer with a configuration object.

    Browser Usage: You must provide a node property, which is either the String ID of a <video> tag or a reference to an HTMLVideoElement.

    Node.js Usage: The node property is not required. You can use jmuxer.createStream() to get a writable stream for piping raw data, or use the onData callback to handle muxed MP4 data.

    Common Options:

    • node: (Required in browser) String ID of video tag or HTMLVideoElement reference.
    • mode: 'both', 'video', or 'audio'. Default is 'both'.
    • videoCodec: 'H264' or 'H265'. Default is 'H264'.
    • flushingTime: Buffer flushing time in ms. Default is 500. Set to 0 to flush immediately.
    • maxDelay: Maximum delay in ms. Default is 500.
    • clearBuffer: true/false. Automatically clear played media buffer. Default is true.
    • fps: Optional frame rate for calculating duration if not provided in data.
    • readFpsFromTrack: true/false. Read FPS from MP4 track data. Default is false.
    • debug: true/false. Enable debug logging. Default is false.
    • onReady: Callback function called when MSE is ready.
    • onData: Callback function called when muxed data is ready. Receives the muxed data as the first argument.
    • onError: Callback for buffer-related errors.
    • onUnsupportedCodec: Callback for unsupported codecs.
    • onMissingVideoFrames: Callback for missing video frames.
    • onMissingAudioFrames: Callback for missing audio frames.
    • onKeyframePosition: Callback when a keyframe is detected (time is seekable).
    • onLoggerLog: Custom logger for debug info. Defaults to console.log.
    • onLoggerErr: Custom logger for errors. Defaults to console.error.
    var jmuxer = new JMuxer({
    node: 'player',
    mode: 'both',
    debug: false
});

  4. Feed media data to jMuxer using feed()

    master

    Use the feed() method to provide raw media chunks to the muxer. At least one of audio or video must be provided.

    Media Data Object Properties:

    • video: H264/H265 buffer.
    • audio: AAC buffer.
    • duration: Duration of the provided chunk in milliseconds. If omitted, jMuxer uses the fps option to calculate duration.
    • compositionTimeOffset: (Video only) Difference between decode time and presentation time in ms. Useful for B-frames.
    • isLastVideoFrameComplete: true/false. If true, tells jMuxer the last frame in the buffer is complete, allowing it to be pushed immediately and reducing 1-frame delay. Use with caution.
    jmuxer.feed({
  audio: audioBuffer,
  video: videoBuffer,
  duration: 50
});

  5. Available jMuxer Methods

    master

    The following methods are available on a JMuxer instance:

    • feed(data): Feeds a media data object (containing audio, video, and/or duration) into the muxer.
    • createStream(): Returns a writable stream to feed buffers. Available in Node.js only.
    • reset(): Resets the jMuxer instance and starts over.
    • destroy(): Destroys the instance and releases all resources.

  6. Configure custom logging with setLogger()

    master

    You can intercept jmuxer internal logs and errors by providing your own logging functions using setLogger. This is useful for integrating jmuxer logs into your existing application logging framework or for debugging.

    Pass two arguments to setLogger(log, err):

    1. log: A function to handle standard log messages.
    2. err: A function to handle error messages.

    If you do not call setLogger, internal logs and errors will be suppressed.

    import { setLogger } from 'jmuxer/src/util/debug.js';

// Example: Redirecting logs to the browser console
setLogger(
    (msg, ...params) => console.log('[jmuxer]', msg, ...params),
    (err, ...params) => console.error('[jmuxer-error]', err, ...params)
);