A tool to manipualte media file. You can change format of the video, change the video into an audio file, or extract a frame(a screenshot) from a video.
Usually used in back-end and it is a quite hefty program.
But WebAssembly let it be used on the front-end side to make user's pc can process the trnascode the video.
npm install @ffmpeg/ffmpeg @ffmpeg/core
const handleDownload = async () => {
const ffmpeg = createFFmpeg({corePath: 'https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js', log: true });
await ffmpeg.load();
ffmpeg.FS("writeFile", "recording.webm", await fetchFile(videoFile));
//This code lets write file called "recording.webm" which will be the videoFile that we created in ObjectURL.
await ffmpeg.run("-i", "recording.webm", "-r", "60", "output.mp4");
await ffmpeg.run("-i", "recording.webm", "-ss", "00:00:01", "-frames:v", "1", "thumbnail.jpg");
//This creates the files that we are trying to make. (mp4 file and a jpg file)
const mp4File = ffmpeg.FS("readFile", "output.mp4");
const thumbFile = ffmpeg.FS("readFile", "thumbnail.jpg");
//Reading files we created. The return value of this readFile is Uint8Array, Uint means unsigned integers, or positive integers.
const mp4Blob = new Blob([mp4File.buffer], {type: "video/mp4"});
const thumbBlob = new Blob([thumbFile.buffer], {type: "image/jpg"});
// With the Uint Array values above, we make the blob file using buffer.
// Blob is basically a javascript file-like object
const mp4Url = URL.createObjectURL(mp4Blob);
const jpgUrl = URL.createObjectURL(thumbBlob);
// With the blob file, we make new ObjectUrl.
const a = document.createElement("a");
a.href = mp4Url;
a.download = "MyRecord.mp4";
document.body.appendChild(a);
a.click();
const thumbA = document.createElement("a");
thumbA.href = jpgUrl;
thumbA.download = "thumbNail.jpg";
document.body.appendChild(thumbA);
thumbA.click();
// To make it downloadable from the browser, we create a link which holds the ObjectUrl of the blob files. and let it be downloaded.
ffmpeg.FS("unlink", "recording.webm");
ffmpeg.FS("unlink", "output.mp4");
ffmpeg.FS("unlink", "thumbnail.jpg");
// this unlink the MEMFS(In-Memory FileSyStem) to prevent the browser to be slow and heavy from loaded files
}
https://github.com/ffmpegwasm/ffmpeg.wasm