Electron+React 프로그램에서 영상 내보내기 시 워터마크(이미지, 텍스트) 추가

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

작업 시점: 2021년 7월

배경

• 라이센스에 따라 영상 내보내기 시 워터마크 붙는 기능을 테스트 해보기 위해 시도함
• 정해진 기획이나 디자인은 없었고, 핵심은 영상 내보내기 시 원하는 위치에 워터마크 넣는 것이 가능한지 알아보는 것

영상 내보내기 시 워터마크 추가

• 메인 프로세스(main.js)의 영상 클립 내보내고 병합하는 함수(makeClipsAndMerge)를 수정하면서 테스트 진행 -> 테스트 및 리서치 과정은 길었으나 생각보다 결론은 간단했음

1. 영상 내보내기 종료 시점에, ffmpeg로부터 addWatermark 인스턴스 생성

   .on('end', function() {
     console.log('merge video successfully!');
     let addWatermark = ffmpeg();
     addWatermark
       ...
   });

   • 병합이 완료된 최종 결과물 영상에 대해 워터마크 작업이 들어가야 하기 때문에, 종료 시점에 인스턴스 생성.
2. addWatermark의 input 메서드를 통해 원본 영상과 워터마크 이미지를 넣어줌

   addWatermark
     .input(mergedVideoSavedPath)
     .input('src/assets/watermark.png')

3. complexFilter 를 통해 overlay 옵션을 넣어줌

   .complexFilter("[1:v][0:v]scale2ref=(544/270)*ih/5/sar:ih/5[wm][base];[base][wm]overlay=0:H-h:enable='between(t,0,5)'")

   • [1:v][0:v] 부분은 입력 비디오 스트림을 나타냄. [0:v]는 첫 번째 비디오 입력, [1:v]는 두 번째 비디오 입력.
   • scale2ref=(544/270)*ih/5/sar:ih/5[wm][base]; 부분은 scale2ref 필터를 사용하여 두 번째 입력 비디오 스트림([1:v])을 첫 번째 입력 비디오 스트림([0:v])에서 계산된 참조 해상도를 기반으로 스케일링하는 것임. 스케일링은 종횡비가 유지되며 수행됨. 스케일된 비디오 스트림은 [wm]에 할당. 스케일링 후의 원래 입력 비디오 스트림 [0:v]은 [base]에 할당.
   • [base][wm]overlay=0:H-h:enable='between (t,0,5)' 부분은 overlay 필터를 사용하여 스케일된 비디오 스트림([wm])을 원래 비디오 스트림([base]) 위에 오버레이하는 것임. 오버레이는 (0, H-h) 좌표에서 수행되고, 여기서 H는 기본 비디오 스트림의 높이이고 h는 워터마크 비디오 스트림의 높이. 오버레이는 'between (t,0,5)'로 지정된 시간 간격인 0~5초 동안에만 활성화됨.
4. 테스트 결과, 워터마크 포함 내보내기 성공!

배우고 느낀 점

• ffmpeg 관련 명령어들은 쉽게 익숙해지지 않는 것 같다. 계속 보고 활용해보면서 익숙해져야지.