브라우저에서 실행되는 비디오 편집 소프트웨어의 제작 방법

개시하다

최근 몇 년 동안 웹 브라우저WebWorker,[1],WebAssembly[2] 등 기술이 등장함에 따라 브라우저에서 로컬 응용 못지않은 속도를 계산할 수 있다.
이 가운데 애니메이션, 사운드 변환, 코딩 등을 할 수 있는 오픈소스 소프트웨어인 FFmpeg[3]도 브라우저[4]에서 실행할 수 있다.
그래서 나는 브라우저로 완성된 애니메이션 편집 소프트웨어를 만들어 보았다.당시의 기본적인 생각을 총결하였다.

https://github.com/toshusai/vega
시위 행진: https://vega.toshusai.net/
주의: Chrome 92 ~ 등 Shared Aray Buffer를 사용할 수 있는 데스크톱 브라우저를 구상했습니다.이 항목은 실험적인 항목이다.예상치 못한 동작과 CPU 자원을 많이 소모할 수 있다.직접 사용하세요.

기본적인 생각

애니메이션

사운드

이미지

텍스트
라는 소재를 담았다.

이러한 소재의 재생 위치, 화면의 위치, 길이 등 정보를 가진 단위를 만드는 것을 분리라고 한다.

최종적으로 이 분리를 영상으로 출력합니다.
FFmpeg의 입력은 애니메이션, 일련 번호 이미지, 사운드이기 때문에 문자와 이미지처럼 화면에 자유롭게 설정된 소재를 한 번 이미지로 변환해야 한다.

비디오

FFmpeg에 대한 입력은 모든 이미지, 애니메이션 및 텍스트를 일련 번호 이미지로 변환합니다.
이러한 요소는 Three.js[5]로 각 프레임을 출력한다.
비디오는 비디오 텍스처, 이미지는 Image Texture, 텍스트는 canvas에서 그려져 Canvas Texture로 처리됩니다.
canvas에서 그린 그림은 ccapture[6]로 웹 페이지로 변환됩니다.

소리

소리 소재와 애니메이션 소재의 소리에 대해 ffmpeg를 경계로 하는 가공을 한 번filter_compex으로 애니메이션과 결합하여 최종적으로 출력한다.

-i _vega_video.webm -i video.mp3 -i audio.mp4
  -filter_complex [2:a]adelay=5715|5715[out2];[1:a]adelay=260|260[out1];[out1][out2]amix=inputs=2[out]
  -map [out]:a

소재 처리의 절차

끝말

브라우저는 웹XR과 오디오 API 등을 이용해 로컬 앱 못지않은 소프트웨어를 만들 수 있다고 생각한다.표준은 유니버설로 많은 장치에서 실행할 수 있고, Electron과ionic 등을 통해 플랫폼/장치의 API를 호출할 수 있다.웹 브라우저의 가능성을 탐색해 보는 것이 어떻습니까?
Adobe Spectrum for Vue도 개발했습니다.
https://github.com/toshusai/spectrum-vue
관심 있으면 검사해 주세요.
각주
https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers ↩︎
https://webassembly.org/ ↩︎
https://www.ffmpeg.org/ ↩︎
https://github.com/ffmpegwasm/ffmpeg.wasm ↩︎
https://github.com/mrdoob/three.js/ ↩︎
https://github.com/spite/ccapture.js/ ↩︎