English | 简体中文
Demux media files in the browser using WebAssembly, designed for WebCodecs.
WebCodecs only provide the ability to decode, but not to demux. mp4box.js is cool, but it only supports mp4 demux. Web-Demuxer aims to support as many multimedia formats as possible at once.
- 🪄 Specifically designed for WebCodecs, the API is very friendly for WebCodecs development, you can easily realize the media file demux.
- 📦 One-time support for a variety of media formats, such as mov/mp4/mkv/webm/flv/m4v/wmv/avi, etc.
- 🧩 Support for customized packaging, you can adjust the configuration, packaged in a specified format demuxer
npm install web-demuxer<script type="module">
import { WebDemuxer } from 'https://cdn.jsdelivr.net/npm/web-demuxer@latest/dist/web-demuxer.min.js';
</script>import { WebDemuxer } from "web-demuxer"
const demuxer = new WebDemuxer({
// ⚠️ you need to put the dist/wasm-files file in the npm package into a static directory like public
// making sure that the js and wasm in wasm-files are in the same directory
wasmLoaderPath: "https://cdn.jsdelivr.net/npm/web-demuxer@latest/dist/wasm-files/ffmpeg.min.js",
})
// Take the example of seeking a video frame at a specified point in time
async function seek(file, time) {
// 1. load video file
await demuxer.load(file);
// 2. demux video file and generate WebCodecs needed VideoDecoderConfig and EncodedVideoChunk
const videoDecoderConfig = await demuxer.getVideoDecoderConfig();
const videoChunk = await demuxer.seekEncodedVideoChunk(time);
// 3. use WebCodecs to decode frame
const decoder = new VideoDecoder({
output: (frame) => {
// draw frame...
frame.close();
},
error: (e) => {
console.error('video decoder error:', e);
}
});
decoder.configure(videoDecoderConfig);
decoder.decode(videoChunk);
decoder.flush();
}Here is the translation of the provided TypeScript API documentation into English:
new WebDemuxer(options: WebDemuxerOptions)Creates a new instance of WebDemuxer.
Parameters:
options: Required, configuration options.wasmLoaderPath: Required, the path to the corresponding JavaScript loader file for wasm (corresponding to theffmpeg.jsorffmpeg-mini.jsin thedist/wasm-filesdirectory of the npm package).
⚠️ You must ensure that the wasm and JavaScript loader files are placed in the same accessible directory, the JavaScript loader will default to requesting the wasm file in the same directory.
load(file: File): Promise<boolean>Loads a file and waits for the wasm worker to finish loading. The subsequent methods can only be called after the load method has been successfully executed.
Parameters:
file: Required, theFileobject to be processed.
getVideoDecoderConfig(): Promise<VideoDecoderConfig>Parses the video stream to obtain the VideoDecoderConfig of the file, and the return value can be directly used as an argument for the configure method of VideoDecoder.
getAudioDecoderConfig(): Promise<AudioDecoderConfig>Parses the audio stream to obtain the AudioDecoderConfig of the file, and the return value can be directly used as an argument for the configure method of AudioDecoder.
seekEncodedVideoChunk(time: number): Promise<EncodedVideoChunk>Retrieves the video data at the specified time point (default keyframe), and the return value can be directly used as an argument for the decode method of VideoDecoder.
Parameters:
time: Required, in seconds.
seekEncodedAudioChunk(time: number): Promise<EncodedAudioChunk>Retrieves the audio data at the specified time point, and the return value can be directly used as an argument for the decode method of AudioDecoder.
Parameters:
time: Required, in seconds.
readAVPacket(start?: number, end?: number, streamType?: AVMediaType, streamIndex?: number): ReadableStream<WebAVPacket>Returns a ReadableStream for streaming packet data.
Parameters:
start: The start time for reading, in seconds, defaults to 0, reading packets from the beginning.end: The end time for reading, in seconds, defaults to 0, reading until the end of the file.streamType: The type of media stream, defaults to 0, which is the video stream. 1 is audio stream. SeeAVMediaTypefor more details.streamIndex: The index of the media stream, defaults to -1, which is to automatically select.
getAVStream(streamType?: AVMediaType, streamIndex?: number): Promise<WebAVStream>Gets information about a specified stream in the media file.
Parameters:
streamType: The type of media stream, defaults to 0, which is the video stream. 1 is audio stream. SeeAVMediaTypefor more details.streamIndex: The index of the media stream, defaults to -1, which is to automatically select.
Simplified methods based on the semantics of getAVStream:
getVideoStream(streamIndex?: number): Promise<WebAVStream>getAudioStream(streamIndex?: number): Promise<WebAVStream>
getAVStreams(): Promise<WebAVStream[]>Get all streams in the media file.
getAVPacket(time: number, streamType?: AVMediaType, streamIndex?: number): Promise<WebAVPacket>Gets the data at a specified time point in the media file.
Parameters:
time: Required, in seconds.streamType: The type of media stream, defaults to 0, which is the video stream. 1 is audio stream. SeeAVMediaTypefor more details.streamIndex: The index of the media stream, defaults to -1, which is to automatically select.
Simplified methods based on the semantics of getAVPacket:
seekVideoPacket(time: number): Promise<WebAVPacket>seekAudioPacket(time: number): Promise<WebAVPacket>readVideoPacket(start?: number, end?: number): ReadableStream<WebAVPacket>readAudioPacket(start?: number, end?: number): ReadableStream<WebAVPacket>
getAVPackets(time: number): Promise<WebAVPacket[]>Simultaneously retrieves packet data on all streams at a certain time point and returns in the order of the stream array.
Parameters:
time: Required, in seconds.
destroy(): voidDestroys the instance and releases the worker.
Currently, two versions of the demuxer are provided by default to support different formats:
dist/wasm-files/ffmpeg.js: Full version (gzip: 941 kB), larger in size, supports mov, mp4, m4a, 3gp, 3g2, mj2, avi, flv, matroska, webm, m4v, mpeg, asfdist/wasm-files/ffmpeg-mini.js: Minimalist version (gzip: 115 kB), smaller in size, only supports mov, mp4, m4a, 3gp, 3g2, matroska, webm, m4v
You can also implement a demuxer for specific formats through custom configuration:
First, modify the enable-demuxer configuration in the Makefile
DEMUX_ARGS = \
--enable-demuxer=mov,mp4,m4a,3gp,3g2,mj2,avi,flv,matroska,webm,m4v,mpeg,asfThen execute npm run dev:docker:arm64 (if on Windows, please execute npm run dev:docker:x86_64) to start the Docker environment.
Finally, execute npm run build:wasm to build the demuxer for the specified formats.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent