FFMPEG In The Browser

videoconverter.js

there are two variants, both are
ffmpeg version 2.2.1 Copyright (c) 2000-2014 the FFmpeg developers
ffmpeg.js -- https://github.com/bgrins/videoconverter.js/blob/master/build/ffmpeg.js 22.5 MB
ffmpeg-all-codecs.js -- https://github.com/bgrins/videoconverter.js/blob/master/build/ffmpeg-all-codecs.js 26.3 MB
the files themselves are available from ( right click save as )
ffmpeg.js -- https://raw.githubusercontent.combgrins/videoconverter.js/master/build/ffmpeg.js
ffmpeg-all-codecs.js -- https://raw.githubusercontent.com/bgrins/videoconverter.js/master/build/ffmpeg-all-codecs.js
in my testing the all-codecs version is about 4 times slower
they are just javascript files, so you can use them by incuding a single, albeit quite large, file
it exposes a single function ffmpeg_run
note. there was mention of muaz-khan / Ffmpeg.js github.com
it does offer some additional exmaple code, but as far as i can tell its simply a varaiant of ffmpeg.js from videoconverter.js

tl;dr

ffmpeg.wasm

tl;dr

Kagami / ffmpeg.js

ffprobe in the browser

i came across this to day, so thought i would include it also
https://www.npmjs.com/package/ffprobe-wasm

media mimetypes

when working with audio / video its often helpful to determine the mime types of the codecs in use

Further Reading : Minimal h.264-in-javascript overview

WebCodecs API developer.mozilla.org

Practical options

• WebCodecs (recommended): Native browser API. Minimal code, no external library downloads, good performance. Requires you to parse or otherwise obtain SPS/PPS for the decoder config.
• Broadway (JS/asm.js/WASM): A historical JavaScript H.264 decoder compiled from Android’s C decoder via Emscripten. Runs fully in JS without browser codecs, but is heavier and slower compared to hardware/native paths. Useful if WebCodecs isn’t available or you need a pure-JS path.

Minimal webcodecs example: decode one frame and export jpeg

Tips:

• You must provide a keyframe right after configure or flush. For AVC/H.264, the SPS/PPS must be supplied in the description field for VideoDecoderConfig. If not, you’ll get a “key frame is required” style error.
• WebCodecs exposes raw decoded frames efficiently, avoiding the need for shipping external codec libraries.

Getting the sps/pps (avc decoder config)

• From container: If your H.264 comes from MP4, read the avcC box (AVCDecoderConfigurationRecord). It contains SPS/PPS you can pass as description.
• From Annex B elementary stream: Extract NAL units with start codes 00 00 00 01 (or 00 00 01). Find NAL types: 7 = SPS, 8 = PPS; 5 = IDR. Collect SPS/PPS bytes and build a description buffer compatible with your browser’s AVCC expectations.
• Why this matters: The decoder uses SPS/PPS to understand frame dimensions, profiles, and other parameters; skipping them is the most common reason minimal examples fail.
  Error using webcodecs to decode h264 data and display on browser from http fetch stackoverflow.com

Converting the decoded frame to jpeg

• Canvas route: Convert the VideoFrame to an ImageBitmap, draw to a canvas, then canvas.toBlob('image/jpeg'). This is the simplest pipeline for a single snapshot.
• Alternatives: Use VideoFrame directly with HTMLVideoElement/WebGL for preview and only snapshot when needed; then export via canvas as above. Guides and examples show decode pipelines using WebCodecs for both playback and encoding.
  Decode and Encode Video with the WebCodecs API in JavaScript slingacademy.com

Pure-js fallback: broadway

If you truly need a codec that runs without relying on the browser’s built-in decoders, Broadway is a project that compiled Android’s H.264 decoder to JavaScript via Emscripten. It can decode frames directly in JS, but expect significantly lower performance and more complex integration compared to WebCodecs. It’s mainly of historical/educational interest today.
LongJohnCoder / Broadway264 github.com