Day 34 : 로컬 영상파일 cut 기능 구현

서버-클라이언트 구조의 웹서비스였을 때의 컷 내보내기 기능 : 

버튼을 누르면 컷 구간 정보대로 영상을 잘라주는 exe가 다운로드됨

이걸 실행하면 로컬의 영상파일이 잘린다

 

아카이브 영상으로부터 다운로드를 제공하자니 정책 위반이고, 웹서비스에서 로컬 파일에 FFmpeg을 돌리자니 여러모로 곤란해서 이런식으로 좀 사용성이 떨어지는 방식의 구현을 택했는데, 마무리 발표에서 사용성이 떨어진다는 지적을 받았다.

 

하지만 일렉트론 기반 데스크탑 앱이 되었으니, 로컬 파일을 쓱싹 자르는 것도 손쉬운 일

그래서 영상을 고르면 직접 잘라서 파일을 주는 기능을 구현하기로 했다.

 

백그라운드 스크립트는 어려울게 없다

그냥 늘 해왔던 것처럼 FFmpeg으로 input file을 구간대로 잘라주는 코드를 작성

 

사실 어려운건 없었어도 화나는 일은 많았다

머리에 쥐나면서 상대경로 생각해가며 영상 분할 잘 돌아가게 구현해뒀더니,

앱 빌드하니까 exe 진입점이랑 스크립트의 상대경로가 달라져서 다 뒤집어져서 새로 한번 더짰다...

 

얘뿐만 아니라 모든 FFmpeg 사용 로직을 전부...

 

아무튼 이제 이 input file이라는 로컬 파일의 절대경로+파일명을 프론트에서 취하는게 문제

 

기능버튼을 모아둔 컴포넌트에선 이렇게 파일 경로를 따고, export를 함수를 실행하는 버튼을 만들고,

 

컷 보관함 컴포넌트의 export 함수에선 북마크 구간과 타이틀을 IPC로 보내는 로직을 구현했다.

 

근데 물론 안됨ㅋ

 

기능버튼이 딴 파일경로를 컷보관함이 몰라서 자꾸 undefined를 보내는게 원인이었는데,

당연히 상태를 공유하면 될거라 생각해서 컨텍스트에 추가를 해봤지만 안됐다.

 

아무리 고민해도 이유를 모르겠어서, 한창 UI 등 마무리작업중이던 프론트 팀원을 불러 팀원찬스

그럴땐 Ref를 쓰면 된다고 1분컷으로 해결해줬다...

 

???

왜됨?

 

리액트의 세계는 심오하다

 

아무튼 구현완료

 

내보내기 버튼을 누르고 로컬 파일을 선택하면, 요런식으로 컷 보관함 폴더에 컷이 생긴다

 

굿