- Overlaying Video With Transparency While Wrangling Cross-Browser Support | CSS-Tricks
- How to use transparent videos on the web in 2021 - Rotato
- How to make HEVC, H265 and VP9 videos with an alpha channel for the web | Kit Cross
- Alpha Masking with FFMPEG | Curio Museum1
ffmpeg -framerate 25 -i image_%1d.png -c:v libvpx-vp9 -pix_fmt yuva420p output.webm
단점
- 두벌로 인코딩 작업을 해야한다. MacOS가 아닐경우 번거로운 부분이 존재한다.
- 브라우저 지원이 애매하게 걸친 부분이 존재한다.
- (개인적인 느낌) 사이즈가 커졌을 경우 프레임 드랍이 있다.
…그래서 어차피 안되는거 새로운 도전을 해보고 싶어서 크로마키 효과를 떠올렸다. sharp로 이미지 배경을 green 컬러로 채우고 그 이미지들을 합쳐서 동영상으로 변환. 그리고 canvas에 그리고 색상을 추출해서 green값을 alpha값으로 변환하면 완벽하지 않을까 싶었는데 겹치는 영역을 전혀 생각못했다. 이부분은 뭔가 특정 알고리즘이 있는 것 같은데 그냥 단순히 근사치2로 적용했을때 결과물이 완벽하지는 않다.
- 캔버스(canvas)를 이용한 비디오 조작하기 - Web API | MDN3
- Green Screen in the Browser With HTML Canvas4
- Canvas: Do cool stuff with video in the browser | Mux blog5