npm install @ffmpeg/ffmpeg @ffmpeg/core
ffmpeg를 쓰고싶은 파일에 import한다.
나는 video를 recorder하고 유저가 다운로드할때 video를 webm가 아닌 mp4로 변환하기 위해 ffmpeg를 쓸 것 이다.
const handleDownload = async () => {
const ffmpeg = createFFmpeg({
log: true,
corePath: "https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js",
});
await ffmpeg.load();
ffmpeg.FS("writeFile", "recording.webm", await fetchFile(videoFile));
await ffmpeg.run("-i", "recording.webm", "-r", "60", "output.mp4");
const a = document.createElement("a");
a.href = videoFile;
a.download = "My Recording.webm";
document.body.appendChild(a);
a.click();
};
app.use((req, res, next) => {
res.header("Cross-Origin-Embedder-Policy", "require-corp");
res.header("Cross-Origin-Opener-Policy", "same-origin");
next();
});
만든 output.mp4를 이용하여 mp4파일 다운받게 만들기
수많은 숫자들로 표현된 자바스크립트 방식의 파일
Uint8Array(91210) [0, 0, 0, 32, 102, 116, 121, 112, 105, 115, 111, 109, 0, 0, 2, 0, 105, 115, 111, 109, 105, 115, 111, 50, 97, 118, 99, 49, 109, 112, 52, 49, 0, 0, 0, 8, 102, 114, 101, 101, 0, 1, 83, 66, 109, 100, 97, 116, 0, 0, 2, 160, 6, 5, 255, 255, 156, 220, 69, 233, 189, 230, 217, 72, 183, 150, 44, 216, 32, 217, 35, 238, 239, 120, 50, 54, 52, 32, 45, 32, 99, 111, 114, 101, 32, 49, 54, 48, 32, 45, 32, 72, 46, 50, 54, 52, 47, 77, 80, 69, …]
ArrayBuffer(91210)
byteLength: 91210
[[Prototype]]: ArrayBuffer
[[Int8Array]]: Int8Array(91210)
[[Uint8Array]]: Uint8Array(91210)
[[Int16Array]]: Int16Array(45605)
[[ArrayBufferByteLength]]: 91210
[[ArrayBufferData]]: "0x007004c68000
const handleDownload = async () => {
const ffmpeg = createFFmpeg({
log: true,
corePath: "https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js",
});
await ffmpeg.load();
ffmpeg.FS("writeFile", "recording.webm", await fetchFile(videoFile));
await ffmpeg.run("-i", "recording.webm", "-r", "60", "output.mp4");
const mp4File = ffmpeg.FS("readFile", "output.mp4");
console.log(mp4File);
console.log(mp4File.buffer);
const mp4Blob = new Blob([mp4File.buffer], { type: "video/mp4" });
const mp4Url = URL.createObjectURL(mp4Blob);
console.log(mp4Url);
const a = document.createElement("a");
a.href = mp4Url;
a.download = "My Recording.mp4";
document.body.appendChild(a);
a.click();
};
만들어진파일은 파일시스템의(FS) 메모리에 만들어지는것이다.
await ffmpeg.run(
"-i",
"recording.webm",
"-ss",
"00:00:01",
"-frames:v",
"1",
"thumbnail.jpg"
);
const thumbBlob = new Blob([thumbFile.buffer], { type: "image/jpg" });
const thumbUrl = URL.createObjectURL(thumbBlob);
const thumbA = document.createElement("a");
thumbA.href = thumbUrl;
thumbA.download = "MyThumbnail.jpg";
document.body.appendChild(thumbA);
thumbA.click();
ffmpeg.FS("unlink", "recording.webm");
ffmpeg.FS("unlink", "output.mp4");
ffmpeg.FS("unlink", "thumbnail.jpg");
URL.revokeObjectURL(mp4Url);
URL.revokeObjectURL(thumbUrl);
URL.revokeObjectURL(videoFile);