Day 30 (2) : 썸네일 스프라이트 이미지 생성 로직

일렉트론으로 한참 삽질을 반복하던 중

뭔가 만들어달라는 요청이 왔다

 

 

지난 발표 시연에서는 구현하지 못해 그냥 유튜브 로고가 있는 이미지로 대체했던 부분인데,

북마크한 컷 각각에 어떤 장면인지 썸네일이 보이면 좋을거라는 의견이 있었다

 

구현방법으로 떠오른건 두 방향이 있었는데

 

1. 분석에 쓴 영상파일 삭제하지 않고 갖고있다가 컷 북마크될때마다 클라가 요청을 보내고 이미지 만들어서 보내주기

2. 분석할때 스프라이트 이미지도 만들어서 같이 보내주기

 

1은 서버에 남은 영상을 언제 지울지, DB에서 불러온다면 영상이 없을텐데 굳이 새로 받을지 등등의 문제도 있고,

ffmpeg이 돌아가는동안 클라이언트가 굳어있을수도 없는 노릇이라 비동기 처리로 구현해야했는데 이게 좀 애매했다

분석 결과를 비동기처리로 실시간 받아보자는 아이디어도 이제와서 소켓으로 바꾸자니 애매해서 넘어갔는데

썸네일때문에 그 대공사를 하기엔 남은 시간이 얼마 없음...

 

2안처럼 스프라이트 이미지를 분석시 같이 만든다면 로딩시간은 더 걸리고 로직도 새로 짜야하겠지만 사용중엔 여러모로 더 나을 것

혹시 가능하면 유튜브에서 재생바에 작은 미리보기 이미지 나오듯이 우리 차트에서도 같은걸 보이게 할 수도 있고.

여러모로 괜찮을 것 같아 2안으로 가기로 했다

 

아무튼 그래서 내가 만들어야하는건

영상으로부터 스프라이트 이미지를 생성하는 로직

 

ffmpeg으로 10초마다 이미지파일을 생성하고

PIL로 이미지를 합쳤다

 

그럼 이렇게 한줄에 6장씩, 1분이 한줄인 세로로 긴 스프라이트 이미지가 생성된다

프론트에선 북마크의 시작점이 몇시몇분몇초인지를 통해 해당하는 포인트의 이미지를 잘라서 쓰면 될텐데

JS로 그걸 짜는건 프론트의 몫...

 

시간은 영상 1시간당 30초정도 걸린다.

기능을 완전히 구현해서 서버에 합치면 4시간 영상 기준 8분 걸리던게 10분으로 늘거나

혹시 병렬로 해도 AWS가 버티면 그보단 시간을 덜쓸듯

 

백엔드 팀원이 AWS 배포를 진행중이라 프리티어에서 서버를 돌리고 있는데, 생각보다 빡세다...

램 1기가는 진짜 너무한거 아니냐고ㅋㅋ

 

 

아무튼 갑자기 들어온 할일을 마쳤으니

다시 일렉트론을 파보자.