Revideo는 프로그래밍 방식의 비디오 편집 (programmatic video editing)을 위한 오픈 소스 프레임워크입니다. 이 프로젝트는 놀라운 Motion Canvas 에디터를 포크 (fork) 했으며, 이를 독립형 애플리케이션에서 개발자들이 전체 비디오 편집 앱을 구축하는 데 사용할 수 있는 라이브러리로 전환하는 것을 목표로 합니다.

Revideo를 사용하면 TypeScript로 비디오 템플릿을 생성하고, 동적 입력값 (dynamic inputs)을 사용하여 이를 렌더링할 수 있는 API 엔드포인트 (API endpoint)를 배포할 수 있습니다. 또한 브라우저에서 변경 사항을 실시간으로 미리 볼 수 있는 React 플레이어 컴포넌트 (React player component)를 제공합니다. 더 자세히 알고 싶다면 저희 문서 (docs), 예제 리포지토리 (examples repository)를 확인하거나 Discord 서버에 참여하세요.

• [2024/05/21] Google Cloud Functions를 사용하여 렌더링 작업 (rendering jobs)을 병렬화하는 방법에 대한 예제를 출시했습니다.
• [2024/05/20] 새로운 웹사이트가 오픈되었습니다!

예제 프로젝트를 생성하려면 다음 명령어를 실행하세요:

npm init @revideo@latest

예제 프로젝트에는 아래의 비디오를 정의하는 다음과 같은 코드가 포함되어 있습니다.

import {Audio, Img, Video, makeScene2D} from '@revideo/2d';
import {all, chain, createRef, waitFor} from '@revideo/core';
export default makeScene2D('scene', function* (view) {
...

revideo-example.mp4

Motion Canvas는 애니메이션을 위한 독립형 에디터가 되는 것을 목표로 합니다. 비록 npm 패키지로 배포되고 있기는 하지만, 유지 관리자들은 이것이 라이브러리로 사용되는 것을 의도하지 않았습니다.

저희 또한 Motion Canvas의 사용자로서 시작했으나, 이를 기반으로 비디오 편집 앱을 구축하려고 할 때 이러한 한계에 부딪혔습니다. Motion Canvas의 플러그인 시스템 (plugin system)을 사용하여 초기 버전을 구축한 후, 기존 Motion Canvas API와의 호환성을 유지하면서 구현하기 어려운 코드베이스 (codebase)의 더 근본적인 변경을 원한다는 것을 깨달았습니다.

그것이 바로 저희가 프로젝트를 포크하여 Revideo로 전환하기로 결정한 이유입니다. 이에 대해 저희 블로그에 좀 더 자세히 적어두었습니다.

구체적으로, Motion Canvas와의 몇 가지 차이점은 다음과 같습니다:

Headless Rendering (헤드리스 렌더링): 현재 Motion Canvas는 비디오를 렌더링하려면 UI에서 버튼을 직접 눌러야 합니다. 저희는 이 기능을 함수 호출(function call)로 노출하였으며, Google Cloud Run과 같은 서비스에 렌더링 API를 배포하거나(예시), CLI를 사용하여 Revideo 프로젝트로부터 렌더링 엔드포인트(endpoint)를 노출하는 것(문서)을 가능하게 만들고 있습니다.

Faster Rendering (더 빠른 렌더링): 단순히 개인용 비디오를 만드는 것이 아니라 앱을 구축할 때는 렌더링 속도가 매우 중요합니다. 저희는 병렬 렌더링(parallelized rendering)을 활성화하고, HTML 비디오의 seek() 연산을 ffmpeg 기반의 비디오 프레임 추출기(video frame extractor)로 교체함으로써 렌더링 속도를 높였습니다.

Better Audio Support (더 나은 오디오 지원): 렌더링 중에 <Video/> 태그로부터 오디오를 내보낼 수 있도록 활성화하였으며, 애니메이션과 오디오를 쉽게 동기화할 수 있는 <Audio/> 태그도 추가했습니다.

사람들이 Revideo를 어떻게 사용하는지 이해하기 위해, 저희는 오픈 소스 도구인 Posthog를 사용하여 얼마나 많은 비디오가 렌더링되는지를 익명으로 추적합니다. Posthog를 구현한 저희의 코드는 여기에서 확인하실 수 있습니다.

텔레메트리(telemetry)를 비활성화하고 싶다면, 다음 환경 변수를 설정하면 됩니다:

DISABLE_TELEMETRY=true

Revideo에 대해 더 자세히 알고 싶다면, 언제든지 저희 문서(documentation)를 확인하거나 Discord 서버에 참여해 주세요.