프로젝트 워크플로우

WAVE workflow

비디오 개념

컨테이너

오디오 트랙 + 비디오 트랙을 묶어 두는 확장자

• 비디오와 오디오를 담아두는 '상자' 같은 것으로, 이 둘을 하나의 파일로 만드는 역할을 한다.
• 확장자인 mp4,avi,mov 등을 컨테이너 포맷을 가르키는 말이다.

재생

트랙의 데이터를 표현하는 것(소리, 영상)

인코딩

트랙(MediaStreamTrack)의 용량을 줄여 저장하는 것

• 컨테이너에는 인코딩된 상태로 들어가 있다.

디코딩

인코딩된 상태를 트랙으로 복원하는 것

코덱

(en)co(der) + dec(oder) 으로, 인코딩/디코딩을 수행하는 소프트/하드웨어

동영상에서 소리가 안 나요
컨테이너에 인코딩되어 들어 있는 오디오를 디코딩하여 트랙으로 만들 수(있는 코덱이) 없기 때문 참고 사이트

워크플로우

I. Video Input

1. video 불러오기 버튼을 통해 video를 불러온다
   • 로컬에서 동영상 파일 불러오기
   • 서버에서 동영상 파일 다운받기
2. 불러온 video를 역 재생하며 썸네일 추출
3. 추출 후 video 소스를 Webgl을 통해 canvas에 표시

II. Video Edit

1. 버튼을 눌러서 편집 기능을 활성화
   • 회전 및 반전
     • 왼쪽으로 90도 회전
     • 오른쪽으로 90도 회전
     • 상하 반전
     • 좌우 반전
   • 비율 조정
     • 확대
     • 축소
   • 자르기
     • CropLayer가 띄워짐 -> 원하는 시점과 종점을 선택 -> 확인
     • 썸네일 재생성
2. 취소 / 완료
   • 취소 버튼을 눌러서 video 편집 취소
   • 완료 버튼을 눌러서 video 저장

III. Video Encoding

1. Frame 추출
   • VideoTrackerReader: MediaTrack -> VideoFrame
2. 프레임을 ImageBitmap으로 바꿔서 webGL Canvas를 통과하여 필터를 적용한 Frame으로 바꾼다.
   • VideoFrame -> ImageBitmap -> WebGL Canvas -> Pixels
3. mp4-h264 인코더를 이용해서 Pixels를 mp4로 바꾼다
   • mp4-h264: Pixels -> encoder -> mp4
4. 오디오 인코딩
5. 오디오+비디오 mux

IV. Video Save

1. video 이름 바꾸기
2. 편집된 동영상을 다운로드 받을 수 있다.
3. user이름 폴더에 video 저장