Electron+React 프로젝트에서 썸네일 생성기 구현

안녕하세요:) 개발자 우디입니다! 아래 내용 관련하여 작업 중이신 분들께 도움이되길 바라며 글을 공유하니 참고 부탁드립니다😊
(이번에 벨로그로 이사오면서 예전 글을 옮겨적었습니다. 이 점 양해 부탁드립니다!)

작업 시점: 2022년 6월

배경

• 고객에게 서비스 제공 과정에서 여러 클립들에 대한 썸네일 추출이 필요했음.

썸네일 생성 기능 구현

• 클립을 선택하면 자동으로 썸네일이 동일한 경로에 생성되도록 구현함.

  function getScreenshot(videoPath) {
    const savedFileName = path.parse(videoPath).name + '_Thumb.png';
    const savedFolderName = path.join(path.dirname(videoPath), 'thumbnail ');
  
    if (!fs.existsSync(savedFolderName)) {
      fs.mkdirSync(savedFolderName);
    }
  
    ffmpeg(videoPath).screenshots({
      timestamps: ['50%'],
      filename: savedFileName,
      folder: savedFolderName,
      size: '1920x1080',
    });
    console.log('make clip thumbnail successfully...');
  }
  ...
  function makeThumbnailOfEachClip(videoNamesArr) {
    for (let i = 0; i < videoNamesArr.length; i++) {
      getScreenshot(videoNamesArr[i]);
    }
  }

  • getScreenshot 함수
    • 클립 경로를 받아와서 해당 경로에 썸네일이 저장되도록 구현.
    • 여러 클립의 썸네일이 저장될 경우를 고려하여 썸네일들이 폴더에 저장되도록 구현.
    • path 라이브러리 활용하여 저장되는 썸네일 이미지 파일은 기존 클립 파일명에 '_Thumb.png' 을 붙인 형태가 되도록 구현.
    • fs 라이브러리 활용하여 썸네일 저장되는 폴더가 없을 경우 폴더 생성되도록 구현.
    • ffmpeg().screenshots() 활용하여 클립의 중간 시점(50%)에서 1920x1080 사이즈로 썸네일 생성되도록 구현.
  • makeThumbnailOfEachClip 함수
    • 사용자가 선택한 여러 클립 경로를 받아와서 반복문 돌며 getScreenshot 를 호출.

• ipcMain 통신

  ipcMain.on('make-clip-screenshots', () => {
    dialog
      .showOpenDialog(win, {
        properties: ['multiSelections'],
        filters: [{ name: 'Movies', extensions: ['mp4', 'mkv'] }],
        title: '썸네일 생성하기',
      })
      .then(data => {
        if (!data['canceled']) {
          makeThumbnailOfEachClip(data['filePaths']);
        }
      });
  });

  • 렌더러 프로세스에서 'make-clip-screenshots' 요청을 보내면, 파일 시스템 창을 띄워 사용자가 썸네일 생성할 클립을 선택할 수 있도록 유도함.
  • 여러 클립이 선택될 수 있으니 프로퍼티는 multiSelections 로 설정.