---
type: note
kind: Reference
tags: ['video', 'ffmpeg', 'canvas']
status: release
ctime: 2022-04-09
mtime: 2025-01-12
generated: { by: human:cbcruk, at: 2025-03-05T14:44:06Z }
verified: { by: claude/opus-5, at: 2026-08-19T00:00:00Z }
sources:
  - id: rotato-read-transparent-videos-for-the
    resource: https://www.rotato.app/read/transparent-videos-for-the-web
    title: "How to use transparent videos on the web in 2021 - Rotato"
  - id: kitcross-hevc-web-video-alpha-channel
    resource: https://kitcross.net/hevc-web-video-alpha-channel/
    title: "How to make HEVC, H265 and VP9 videos with an alpha channel for the web | Kit Cross"
  - id: curiosalon-github-blog-ffmpeg-alpha-masking
    resource: https://curiosalon.github.io/blog/ffmpeg-alpha-masking/
    title: "Alpha Masking with FFMPEG | Curio Museum"
  - id: developer-mozilla-ko-docs
    resource: https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
    title: "캔버스(canvas)를 이용한 비디오 조작하기 - Web API | MDN"
  - id: kapwing-blog-green-screen-in-browser
    resource: https://www.kapwing.com/blog/green-screen-in-browser/
    title: "Green Screen in the Browser With HTML Canvas"
  - id: mux-blog-canvas-adding-filters-and
    resource: https://mux.com/blog/canvas-adding-filters-and-more-to-video-using-just-a-browser/
    title: "Canvas: Do cool stuff with video in the browser | Mux blog"
  - id: stackoverflow-questions-38419980
    resource: https://stackoverflow.com/questions/38419980/how-to-accurately-filter-rgb-value-for-chroma-key-effect
    title: "javascript - How to accurately filter RGB value for chroma-key effect - Stack Overflow"
---

- [How to use transparent videos on the web in 2021 - Rotato](https://www.rotato.app/read/transparent-videos-for-the-web)
- [How to make HEVC, H265 and VP9 videos with an alpha channel for the web | Kit Cross](https://kitcross.net/hevc-web-video-alpha-channel/)
- [Alpha Masking with FFMPEG | Curio Museum](https://curiosalon.github.io/blog/ffmpeg-alpha-masking/)[^27-1]

```sh
ffmpeg -framerate 25 -i image_%1d.png -c:v libvpx-vp9 -pix_fmt yuva420p output.webm
```

단점

- 두벌로 인코딩 작업을 해야한다. MacOS가 아닐경우 번거로운 부분이 존재한다.
- 브라우저 지원이 애매하게 걸친 부분이 존재한다.
- (개인적인 느낌) 사이즈가 커졌을 경우 프레임 드랍이 있다.

...그래서 어차피 안되는거 새로운 도전을 해보고 싶어서 크로마키 효과를 떠올렸다. sharp로 이미지 배경을 green 컬러로 채우고 그 이미지들을 합쳐서 동영상으로 변환. 그리고 canvas에 그리고 색상을 추출해서 green값을 alpha값으로 변환하면 완벽하지 않을까 싶었는데 겹치는 영역을 전혀 생각못했다. 이부분은 뭔가 특정 알고리즘이 있는 것 같은데 그냥 단순히 근사치[^27-5]로 적용했을때 결과물이 완벽하지는 않다.

- [캔버스(canvas)를 이용한 비디오 조작하기 - Web API | MDN](https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Manipulating_video_using_canvas)[^27-2]
- [Green Screen in the Browser With HTML Canvas](https://www.kapwing.com/blog/green-screen-in-browser/)[^27-3]
- [Canvas: Do cool stuff with video in the browser | Mux blog](https://mux.com/blog/canvas-adding-filters-and-more-to-video-using-just-a-browser/)[^27-4]

---

[^27-1]: 여기서는 좀 더 나아가서 ffmpeg으로 드로잉 하는 부분까지 알려주고 있다.
[^27-2]: 기본 배경지식을 설명하고 있다. video->canvas
[^27-3]: hsv로 색상값을 체크하는 방법을 알려주고 있다. 그리고 해당 연산은 worker로 따로 분리해서 처리.
[^27-4]: canvas 에서 색상값을 체크해서 필터 기능을 구현하고 머신러닝으로 모션탐지 기능구현이 가능하다는 예제를 보여준다.
[^27-5]: [javascript - How to accurately filter RGB value for chroma-key effect - Stack Overflow](https://stackoverflow.com/questions/38419980/how-to-accurately-filter-rgb-value-for-chroma-key-effect)