FFmpeg

PussinSocks·2022년 8월 12일
0

CloneCoding

목록 보기
20/20

What is ffmpeg?

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.


Installing ffmpeg

npm install @ffmpeg/ffmpeg @ffmpeg/core

Usage (in My Project)

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
}

ffmpeg.wasm

https://github.com/ffmpegwasm/ffmpeg.wasm

documentation

https://www.ffmpeg.org/documentation.html

profile
On a journey to be a front-end developer

0개의 댓글