Open
Description
This is not an issue this is just a information , people who are looking for smaller build wasm file here is the solution.
features -
Stich png images into video - tested with html canvas
Encode , Decode mp4 files
Audio support
here is docker file instructions at the bottm, please forgive me for my english and typos i am high on coffee.
DOCKER FILE
# syntax=docker/dockerfile-upstream:master-labs
# Base emsdk image with environment variables.
FROM emscripten/emsdk:3.1.40 AS emsdk-base
ARG EXTRA_CFLAGS
ARG EXTRA_LDFLAGS
ARG FFMPEG_ST
ARG FFMPEG_MT
ENV INSTALL_DIR=/opt
# We cannot upgrade to n6.0 as ffmpeg bin only supports multithread at the moment.
ENV FFMPEG_VERSION=n5.1.4
ENV CFLAGS="-I$INSTALL_DIR/include $CFLAGS $EXTRA_CFLAGS"
ENV CXXFLAGS="$CFLAGS"
ENV LDFLAGS="-L$INSTALL_DIR/lib $LDFLAGS $CFLAGS $EXTRA_LDFLAGS"
ENV EM_PKG_CONFIG_PATH=$EM_PKG_CONFIG_PATH:$INSTALL_DIR/lib/pkgconfig:/emsdk/upstream/emscripten/system/lib/pkgconfig
ENV EM_TOOLCHAIN_FILE=$EMSDK/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake
ENV PKG_CONFIG_PATH=$PKG_CONFIG_PATH:$EM_PKG_CONFIG_PATH
ENV FFMPEG_ST=$FFMPEG_ST
ENV FFMPEG_MT=$FFMPEG_MT
RUN apt-get update && \
apt-get install -y pkg-config autoconf automake libtool ragel
# Build x264
FROM emsdk-base AS x264-builder
ENV X264_BRANCH=4-cores
ADD https://github.com/ffmpegwasm/x264.git#$X264_BRANCH /src
COPY build/x264.sh /src/build.sh
RUN bash -x /src/build.sh
# Build x265
FROM emsdk-base AS x265-builder
ENV X265_BRANCH=3.4
ADD https://github.com/ffmpegwasm/x265.git#$X265_BRANCH /src
COPY build/x265.sh /src/build.sh
RUN bash -x /src/build.sh
# Build libvpx
FROM emsdk-base AS libvpx-builder
ENV LIBVPX_BRANCH=v1.13.1
ADD https://github.com/ffmpegwasm/libvpx.git#$LIBVPX_BRANCH /src
COPY build/libvpx.sh /src/build.sh
RUN bash -x /src/build.sh
# Build lame
FROM emsdk-base AS lame-builder
ENV LAME_BRANCH=master
ADD https://github.com/ffmpegwasm/lame.git#$LAME_BRANCH /src
COPY build/lame.sh /src/build.sh
RUN bash -x /src/build.sh
# Build ogg
FROM emsdk-base AS ogg-builder
ENV OGG_BRANCH=v1.3.4
ADD https://github.com/ffmpegwasm/Ogg.git#$OGG_BRANCH /src
COPY build/ogg.sh /src/build.sh
RUN bash -x /src/build.sh
# Build theora
FROM emsdk-base AS theora-builder
COPY --from=ogg-builder $INSTALL_DIR $INSTALL_DIR
ENV THEORA_BRANCH=v1.1.1
ADD https://github.com/ffmpegwasm/theora.git#$THEORA_BRANCH /src
COPY build/theora.sh /src/build.sh
RUN bash -x /src/build.sh
# Build opus
FROM emsdk-base AS opus-builder
ENV OPUS_BRANCH=v1.3.1
ADD https://github.com/ffmpegwasm/opus.git#$OPUS_BRANCH /src
COPY build/opus.sh /src/build.sh
RUN bash -x /src/build.sh
# Build vorbis
FROM emsdk-base AS vorbis-builder
COPY --from=ogg-builder $INSTALL_DIR $INSTALL_DIR
ENV VORBIS_BRANCH=v1.3.3
ADD https://github.com/ffmpegwasm/vorbis.git#$VORBIS_BRANCH /src
COPY build/vorbis.sh /src/build.sh
RUN bash -x /src/build.sh
# Build zlib
FROM emsdk-base AS zlib-builder
ENV ZLIB_BRANCH=v1.2.11
ADD https://github.com/ffmpegwasm/zlib.git#$ZLIB_BRANCH /src
COPY build/zlib.sh /src/build.sh
RUN bash -x /src/build.sh
# Build libwebp
FROM emsdk-base AS libwebp-builder
COPY --from=zlib-builder $INSTALL_DIR $INSTALL_DIR
ENV LIBWEBP_BRANCH=v1.3.2
ADD https://github.com/ffmpegwasm/libwebp.git#$LIBWEBP_BRANCH /src
COPY build/libwebp.sh /src/build.sh
RUN bash -x /src/build.sh
# Build freetype2
FROM emsdk-base AS freetype2-builder
ENV FREETYPE2_BRANCH=VER-2-10-4
ADD https://github.com/ffmpegwasm/freetype2.git#$FREETYPE2_BRANCH /src
COPY build/freetype2.sh /src/build.sh
RUN bash -x /src/build.sh
# Build fribidi
FROM emsdk-base AS fribidi-builder
ENV FRIBIDI_BRANCH=v1.0.9
ADD https://github.com/fribidi/fribidi.git#$FRIBIDI_BRANCH /src
COPY build/fribidi.sh /src/build.sh
RUN bash -x /src/build.sh
# Build harfbuzz
FROM emsdk-base AS harfbuzz-builder
ENV HARFBUZZ_BRANCH=5.2.0
ADD https://github.com/harfbuzz/harfbuzz.git#$HARFBUZZ_BRANCH /src
COPY build/harfbuzz.sh /src/build.sh
RUN bash -x /src/build.sh
# Build libass
FROM emsdk-base AS libass-builder
COPY --from=freetype2-builder $INSTALL_DIR $INSTALL_DIR
COPY --from=fribidi-builder $INSTALL_DIR $INSTALL_DIR
COPY --from=harfbuzz-builder $INSTALL_DIR $INSTALL_DIR
ENV LIBASS_BRANCH=0.15.0
ADD https://github.com/libass/libass.git#$LIBASS_BRANCH /src
COPY build/libass.sh /src/build.sh
RUN bash -x /src/build.sh
# Build zimg
FROM emsdk-base AS zimg-builder
ENV ZIMG_BRANCH=release-3.0.5
RUN apt-get update && apt-get install -y git
RUN git clone --recursive -b $ZIMG_BRANCH https://github.com/sekrit-twc/zimg.git /src
COPY build/zimg.sh /src/build.sh
RUN bash -x /src/build.sh
# Base ffmpeg image with dependencies and source code populated.
FROM emsdk-base AS ffmpeg-base
RUN embuilder build sdl2 sdl2-mt
ADD https://github.com/FFmpeg/FFmpeg.git#$FFMPEG_VERSION /src
COPY --from=x264-builder $INSTALL_DIR $INSTALL_DIR
COPY --from=x265-builder $INSTALL_DIR $INSTALL_DIR
COPY --from=libvpx-builder $INSTALL_DIR $INSTALL_DIR
COPY --from=lame-builder $INSTALL_DIR $INSTALL_DIR
COPY --from=opus-builder $INSTALL_DIR $INSTALL_DIR
COPY --from=theora-builder $INSTALL_DIR $INSTALL_DIR
COPY --from=vorbis-builder $INSTALL_DIR $INSTALL_DIR
COPY --from=libwebp-builder $INSTALL_DIR $INSTALL_DIR
COPY --from=libass-builder $INSTALL_DIR $INSTALL_DIR
COPY --from=zimg-builder $INSTALL_DIR $INSTALL_DIR
# Build ffmpeg
FROM ffmpeg-base AS ffmpeg-builder
COPY build/ffmpeg.sh /src/build.sh
RUN bash -x /src/build.sh \
--enable-gpl \
--disable-pthreads \
--disable-w32threads \
--disable-os2threads \
--disable-everything \
--enable-libx264 \
--enable-zlib \
--enable-encoder=libx264 \
--enable-encoder=aac \
--enable-decoder=png \
--enable-decoder=h264 \
--enable-decoder=aac \
--enable-demuxer=image2 \
--enable-demuxer=mov \
--enable-muxer=mp4 \
--enable-parser=aac \
--enable-parser=h264 \
--enable-protocol=file \
--enable-filter=null \
--enable-filter=format \
--enable-filter=scale
# Build ffmpeg.wasm
FROM ffmpeg-builder AS ffmpeg-wasm-builder
COPY src/bind /src/src/bind
COPY src/fftools /src/src/fftools
COPY build/ffmpeg-wasm.sh build.sh
# libraries to link
ENV FFMPEG_LIBS \
-lx264 \
-lz
RUN mkdir -p /src/dist/umd && bash -x /src/build.sh \
${FFMPEG_LIBS} \
-o dist/umd/ffmpeg-core.js \
-s INITIAL_MEMORY=33554432 # 32MB initial memory
RUN mkdir -p /src/dist/esm && bash -x /src/build.sh \
${FFMPEG_LIBS} \
-sEXPORT_ES6 \
-o dist/esm/ffmpeg-core.js \
-s INITIAL_MEMORY=33554432 # 32MB initial memory
# Export ffmpeg-core.wasm to dist/, use `docker buildx build -o . .` to get assets
FROM scratch AS exportor
COPY --from=ffmpeg-wasm-builder /src/dist /dist
Quick React Example :-
import React, { useRef, useState } from "react";
import { FFmpeg } from "@ffmpeg/ffmpeg";
import { fetchFile } from "@ffmpeg/util";
export default function App() {
const [loaded, setLoaded] = useState(false);
const [isError, setIsError] = useState(false);
const ffmpegRef = useRef(new FFmpeg());
const videoRef = useRef<HTMLVideoElement>(null);
const messageRef = useRef<HTMLDivElement>(null);
const [logs, setLogs] = useState<string[]>([]);
const load = async () => {
const enableLarge = false;
const baseURL = `http://localhost:5173/ffmpeg${enableLarge ? '-large' : ''}/esm`;
const ffmpeg = ffmpegRef.current;
ffmpeg.on("log", ({ message }) => {
setLogs((prevLogs) => [...prevLogs, message]);
if (messageRef.current) {
messageRef.current.scrollTop = messageRef.current.scrollHeight;
}
});
try {
await ffmpeg.load({
coreURL: `${baseURL}/ffmpeg-core.js`,
wasmURL: `${baseURL}/ffmpeg-core.wasm`,
});
setLoaded(true);
} catch (e) {
setIsError(true);
alert("Failed to load FFmpeg. Please check the console for more details.");
}
};
const transcode = async () => {
const ffmpeg = ffmpegRef.current;
try {
console.log('Transcoding...');
await ffmpeg.writeFile("input.mp4", await fetchFile("/videos/movie.mp4"));
await ffmpeg.exec([
"-i", "input.mp4",
"-r", "30", // Change frame rate to 30 fps
"-c:v", "libx264", // Encode video with libx264
"-c:a", "copy", // Copy audio stream without changing it
"output.mp4"
]);
const data = await ffmpeg.readFile("output.mp4");
if (videoRef.current) {
videoRef.current.src = URL.createObjectURL(
new Blob([data], { type: "video/mp4" })
);
}
} catch (error) {
setIsError(true);
alert("Transcoding failed! Please check the logs.");
}
};
const createCanvasAnimation = async () => {
console.log('Creating canvass animation')
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (!ctx) return;
const frames: Blob[] = [];
canvas.width = 250;
canvas.height = 250;
// Create a simple animation (e.g., moving circle)
const totalFrames = 30; // 3 seconds at 30 FPS
for (let i = 0; i < totalFrames; i++) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(160 + Math.sin(i * (Math.PI / 45)) * 50, 120, 50, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
// Capture frame
await new Promise<void>((resolve) => {
canvas.toBlob((blob) => {
if (blob) frames.push(blob);
console.log('capture...');
resolve();
}, "image/png");
});
// Simulate a frame delay for animation
await new Promise((resolve) => setTimeout(resolve, 33)); // ~30 FPS
}
// Send frames to FFmpeg
const ffmpeg = ffmpegRef.current;
for (let i = 0; i < frames.length; i++) {
const file = await fetchFile(frames[i]);
await ffmpeg.writeFile(`frame${i}.png`, file);
}
// Create MP4 video from frames
await ffmpeg.exec([
"-framerate",
"30", // frame rate
"-i",
"frame%d.png", // input frames
"-c:v",
"libx264", // video codec
"-r",
"30", // output frame rate
"-pix_fmt",
"yuv420p", // pixel format
"output.mp4" // output file
]);
const data = await ffmpeg.readFile("output.mp4");
if (videoRef.current) {
videoRef.current.src = URL.createObjectURL(
new Blob([data], { type: "video/mp4" })
);
}
};
const clearLogs = () => {
setLogs([]);
};
return (
<div>
{loaded ? (
<>
<video ref={videoRef} controls></video>
<br />
<button style={{ marginRight: 15 }} onClick={transcode}>Transcode </button>
<button style={{ marginRight: 15 }} onClick={async () => {
const ffmpeg = ffmpegRef.current;
await ffmpeg.exec(["-version"]);
}}>Version</button>
<button style={{ marginRight: 15 }} onClick={createCanvasAnimation}>Canvas</button>
<button style={{ marginRight: 15 }} onClick={() => setIsError(false)}>Clear Error</button>
<button style={{ marginRight: 15 }} onClick={clearLogs}>Clear Logs</button>
<div ref={messageRef} style={{ height: 500, overflowY: "scroll" }}>
<h3>Logs:</h3>
<pre>
{logs.map((log, index) => (
<div key={index}>{log}</div>
))}
</pre>
</div>
{isError && (
<div style={{ color: "red" }}>
<h4>An error occurred! Check logs for details.</h4>
</div>
)}
</>
) : (
<button onClick={load}>Load ffmpeg-core</button>
)}
</div>
);
}steps to run docker file
1 - Docker required
2 - WSL or linux system requried
Node - make sure you install Docker in wsl ubuntu not windows host otherwise you will face a lot of issues
3 - inside wsl first create image using this command - docker build -t ffmpegwasm .
4 - Once image is created run docker buildx build -o . . this command will output wasm and core file in dist folder ffmpeg.wasm/dist this is fast command good for testing although things won't work properly so you will have to use dev or prd commands which is time consuming as well.
5 - to make a dev or prd build use make dev for dev and for production build use make prd this will take some time for me first build took 30 minutes after that with cache and all it reduced to 2-3 minutes
6 - with make dev or make prd you will find your wasm builds under ffmpeg.wasm/packages/core/dist/
You can also build multi thread and other types of ffmpeg follow these documentations official docs
Documentation to compile ffmpeg.wasm
i have 32gb ram, ryzen 5 processor and nvme drive and its a laptop so build time was good for me.
Metadata
Metadata
Assignees
Labels
No labels