Electron+React 프로그램에서 쇼츠 형식으로 영상 내보내기

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

작업 시점: 2021년 8월

배경

• 사용자들의 짧은 형식의 영상을 보다 편하게 제작할 수 있도록 하기 위해 시도함
• 특정한 기획 사항이나 디자인이 있지는 않았고, 프로그램 내에서 세로 형식으로 영상이 출력되는게 가능한지 파악하는 것이 핵심.
• 메인 프로세스(main.js) 의 코드들을 살펴봤고, 그 중에서 영상 내보내기 관련 함수(makeClipsAndMerge) 중심으로 봄.

세로 형식으로 영상 내보내기 시도

• 찾아보고 실제로 테스트 해보는 과정에 시간이 오래 걸렸지만, 적용되는 결과는 간단했음

1. videoFilters를 적용해주면 됨.

   .videoFilters({
    ...
    })

2. filter를 crop으로 설정한 후에 옵션으로 너비, 높이, x위치, y위치 값을 넣어주면 됨.

   .videoFilters({
     filter: 'crop',
     options: {
       w: 150,
       h: 150,
       x: 100,
       y: 200,
     },
   })

테스트 과정

• 테스트1
  • 세로로는 나오지 않음
• 테스트2
  • 세로로는 나오는데, 화면이 2개가 나옴
• 테스트3
  • 세로로는 나오고, 화면도 1개인데, 위치가 상단에 있음
• 테스트4
  • 세로 방향, 화면 1개, 위치 중간으로 성공!
• 결론
  • 추가적인 작업들이 더 필요할 것 같지만, 일단 세로 형태로 영상 출력하는 것 자체는 가능한 것으로 판단됨.

배우고 느낀 점

• 영상 관련 작업들은 테스트 시간이 오래 걸리는 편 -> 충분한 정도로 찾아보고 숙지한 후에 테스트 진행하는 것이 좋을 듯