[클라우딩 어플리케이션 엔지니어링 TIL] 240311 - ReactJS 비디오 에디터 제작하기 프로젝트 (4)

Intro

---

ffmpeg 라이브러리를 사용해서 비디오를 내보내는 기능을 구현했다.

공식 문서가 조금 빈약하다고 느껴져서 ffmpeg 라이브러리를 이해하기는 데에 조금 어려웠다 ㅠ

 

 

 

프로젝트 진행사항

---

FFmpeg

Overview | ffmpeg.wasm

 

위의 공식 사이트와 더불어 리액트에서 FFmpeg를 사용한 예제 코드를 참고해서 구현했다.

https://github.com/ffmpegwasm/ffmpeg.wasm/blob/main/apps/react-vite-app/src/App.tsx

 

버전이 올라가면서 바뀐 부분이 많아 프로젝트 전 강의에서는 다운그레이드하여 FFmpeg를 사용했는데 나는 최신 버전으로 사용하고 싶은 마음에 하나하나 분석해 보았다.

 

먼저, FFmpeg를 생성자 함수로 선언한다.

const ffmpeg = new FFmpeg();

 

ffmpeg 기능을 사용하기 위해 프로젝트 마운트 시 ffmpeg를 로드한다.

useEffect(() => {
  async function loadFFmpeg() {
    await ffmpeg.load();
  }

  loadFFmpeg();
  setFfmpegLoaded(true);
}, []);

 

다음으로 파일 내보내기에 관련된 함수이다.

writeFile이란 함수는 비디오 파일을 로컬 환경에 저장하는 함수이다.

파일 이름과 가져올 파일을 매개변수로 받는다.

URL.createObjectURL 함수로 비디오 파일의 Blob URL을 생성하고 fetchFile함수에 전달해 비디오 파일을 가져온다.

const writeFile = async inputFileName => {
  return await ffmpeg.writeFile(
    inputFileName,
    await fetchFile(URL.createObjectURL(videoFile))
  );
};

 

exec 함수로 다음 명령어를 수행할 수 있다.

ffmpeg -ss [시작시간] -i input.mp4 -t [지속시간] -f gif output.gif

 

위의 명령어는 mp4 파일을 원하는 시간 만큼 잘라 gif 파일로 저장할 수 있는 ffmpeg 명령어이다.

위 값들을 배열에 담아 exec 함수의 매개변수로 전달한다.

await ffmpeg.exec([
  '-i',
  `${inputFileName}`,
  '-ss',
  `${minTime}`,
  '-t',
  `${maxTime - minTime}`,
  '-f',
  'gif',
  `${outputFileName}`,
]);

 

변환된 파일을 읽어와 Bolo URL로 변환하는 코드를 작성하고,

const data = await ffmpeg.readFile(outputFileName);
const gifURL = URL.createObjectURL(
  new Blob([data.buffer], { type: 'image/gif' })
);

 

url을 a 태그에 담아 클릭하여 다운로드 되도록 구현하였다.

const downloadFile = dataURL => {
  const link = document.createElement('a');
  link.href = dataURL;
  link.setAttribute('download', '');
  link.click();
};

 

 

 

 

 

마무리

---

처음엔 코드만 보고 ffmpeg 라이브러리에 대해 이해하기 어려웠는데 계속 보면서 열심히 분석해서 이해하게 되었다.

그 덕에 비디오 내보내기, 음성 내보내기 등의 기능도 쉽게 응용하여 구현할 수 있었다. 뿌듯했다 ^__^