Twitter のタイムラインで Remotion というのを何度も見かけたので触ってみたメモ

Remotion

www.remotion.dev

React を使って動画を作ることができるライブラリらしい。

セットアップ

FFMPEG が必要なので Homebrew で入れる。

$ brew install ffmpeg

Docs を見ると $ yarn create video がインストールコマンドとして書かれていた。 $ yarn create コマンドは初見だったが create-xxx 系のパッケージをグローバルインストールして、そのまま初期化するまでを一気にやっているらしい。グローバルにパッケージをインストールしたくなかったので npx でセットアップした。

$ npx create-video

コードリーディング

アプリケーションを作成した時点でサンプルの動画を生成するための雛形は準備されている。

エントリーファイル

package.json の npm scripts を見ると src/index.tsx がエントリーファイルだということがわかる。

import {registerRoot} from 'remotion';
import {RemotionVideo} from './Video';

registerRoot(RemotionVideo);

ここで root として登録している RemotionVideo は React の FunctionComponent になっている。

preview と render

npm scripts を見ると remotion には preview と render ができるらしい。

preview は localhost にサーバーを起動して作成中の動画が再生できるようになる。 render は実際に mp4 として動画を生成する。

RemotionVideo

src/index.tsx で registerRoot() されていた RemotionVideo を見てみる。 RemotionVideo は下記のような感じになっている。

import {Composition} from 'remotion';
import { MyVideo } from './MyVideo';

export const RemotionVideo: React.FC = () => {
    return (
        <Composition
            id="MyVideo"
            component={MyVideo}
            durationInFrames={100}
            fps={30}
            width={1920}
            height={1080}
        />
    );
};

Composition を使うことで VideoConfig として fps などの値を指定できるっぽい。 component には実際に表示する component を指定し、id は remotion render コマンドで動画を出力する際に対象の component を指定するときに必要になる。

Composition を複数配置すると preview 時にサイドバーに並べることができる。 f:id:kasaharu:20210214222142p:plain

MyVideo の生成

MyVideo の実装は Getting started に沿ってやっただけなので割愛する。

実装した MyVideo は $ yarn build で動画の生成ができる。ただしデフォルトでは id が HelloWorld の component を動画として生成するため npm scripts を変更するか下記のコマンドを直接実行する。

$ yarn remotion render src/index.tsx MyVideo out.mp4

まとめ

確かに React を使って実装したコードから動画ができた。できたが、これをどう使うのかまだ想像がつかない。

サンプルコード: kasaharu/try-remotion - GitHub

とんかつ時々あんどーなつ

〜たとえ低空でも飛行していられるように〜

Remotion の Getting started を見た