Home

Awesome

fix-webm-duration

navigator.mediaDevices.getUserMedia + MediaRecorder create WEBM files without duration metadata.

This library appends missing metadata section right to the file blob.

See the demo here.

Installation

Install from a package manager:

npm install @fix-webm-duration/fix

Then, the library could be imported:

import { fixWebmDuration } from "@fix-webm-duration/fix";

Usage

Syntax:

const newBlob = await fixWebmDuration(blob, duration, (options = {}));

where

fixWebmDuration will parse and fix your file asynchronously and return the fixed blob once the result is ready.

If the original blob already contains duration metadata section and the duration value is not empty, the callback will receive it without any changes made.

Example:

let mediaRecorder;
let mediaParts;
let startTime;

function startRecording(stream: MediaStream, options: MediaRecorderOptions) {
    mediaParts = [];
    mediaRecorder = new MediaRecorder(stream, options);
    mediaRecorder.onstop = async () => {
        const duration = Date.now() - startTime;
        const buggyBlob = new Blob(mediaParts, { type: "video/webm" });

        const fixedBlob = await fixWebmDuration(buggyBlob, duration);
        displayResult(fixedBlob);
    };
    mediaRecorder.ondataavailable = (event) => {
        var data = event.data;
        if (data && data.size > 0) {
            mediaParts.push(data);
        }
    };
    mediaRecorder.start();
    startTime = Date.now();
}

function stopRecording() {
    mediaRecorder.stop();
}

function displayResult(blob: Blob) {
    // ...
}

Note: this example is not a MediaRecorder usage guide.