brew로 ffmpeg 설치할때1
brew install ffmpeg $(brew options ffmpeg | grep -vE '\s' | grep -- --with-' | tr '\n' ' ')
Footnotes
# 비디오 자르기
ffmpeg -i INPUT.mp4 -ss 00:00:00 -to 00:01:00 -c:v copy -c:a copy OUTPUT.mp4
- 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
Footnotes
extractFrames() {
ffmpeg -i $1 -vf fps=30 output_frame_%d.png
}
# $1 = frames로 사용될 파일들
# $2 = output 파일
# Example: concatFrames ./frame_%5d.png output.webm
concatFrames() {
ffmpeg -framerate 30 -i $1 -c:v libvpx-vp9 -pix_fmt yuva420p $2
}
# $1 = frame로 사용될 파일
# $2 = output 파일
# Example: frameToVideo frame.jpg output.mp4
frameToVideo() {
ffmpeg -loop 1 -i $1 -c:v libx264 -t 10 -pix_fmt yuv420p $2
}
# $1 = 인코딩할 영상 video.mp4
# $2 = output 파일명
encodingVideo() {
ffmpeg -an -i $1 -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 "${$2}.mp4"
ffmpeg -i "${$2}.mp4" -vcodec libvpx-vp9 -b:v 1M -acodec libvorbis "${$2}.webm"
}