맞는 방향인지는 모르겠지만
내 대가리로는 더 나은방향이 떠오르지 않는다

우선 video element는 생성만 하고 append는 안함

쉐이더로 텍스쳐를 webgl canvas에 그려주
video element의 이미지를 캔버스로 쏴주는 애니메이션을 실행한다


그리고 input element로 파일을 업로드하면
그걸 video element에 할당해주고 재생함

여기다 유니폼으로여러가지 필터 커널들을 추가하면

이제 쉐이더 필터가 가능한 웹기반 비디오 플레이어가 완성됨

여기서 나는 영상크롭과 저장까지 가능한 에디터로 구현이 하고싶었음
이런저런 방향을 고민하다가
편집과 저장의 구현을 아예 분리하기로 마음먹었다. 아니면 속도가 너무 느리더라


영상크롭같은경우는 브레이크 포인트 시간을 따로 상태로 두고,
그 상태에 따라 video element의 current time을 조작하는 방식으로 재생을 구현함.
그리고 영상을 저장하고 추출하는건 캔버스는 전혀 별개로 두고
wasm빌드한 ffmpeg으로 저장된 breakpoint들로 크롭을 하고나서
적용한 커널과 같은 필터를 역시 ffmpeg으로 씌워주고 다운로드를 하는 방식.

이게 효율적인진 모르겠지만
다른 방법이 생각이 안난다 ㅇㅇ