FrontEnd

Reactで動画編集機能を作り込める「remotion」を試してみた

投稿日:

はじめに

YouTube shortsやTiktokなどといった「ショート動画」を作るためのシンプルなツールを作ってみたいと思い、まずはReactで動画編集方法を調べてみたところ「Remotion」を使うのが良さそうだったので、調べてみました。

Remotionとは

Remotionは、プログラミングによって動画を作ることができるパッケージであり、Reactの状態管理の仕組みを使って動画を作り込むことができます。
Remotionは主に次の3つで構成されています。

  • Remotion
    プログラミングによって動画コンポーネントを生成し、Remotionが提供するエディター上でプレビュー・レンタリングを行う。ローカル環境で完結できる。
  • Remotion Player
    Remotionの動画プレイヤー部分のみを切り出したもの。Remotionによる動画生成を自分のアプリケーションに組み込むことができる。
  • Remotion Lambda
    Remotionで作成した動画の書き出しをAWS Lambda上で実行するもの。(Remotionはブラウザでの動画書き出しをサポートしていない)

なお、使用条件によってライセンスが異なり、有料プランを契約する必要がある場合があります。詳細は以下を確認してください。
https://www.remotion.pro/license

今回は以下のように、ローカルの動画を配置し、タイトルテキストを編集できるアプリケーションを作りたいので、RemotionとRemotion Playerを使って実装してみます。

Remotionを使ってみる

導入

pnpmでインストールします。

動画のレイアウト作成

まずは、動画のレンダリング用コンポーネントを作ります。先ほどお見せしたように、上部にタイトル、真ん中に動画が配置されるようなレイアウトを作っていきます。

AbsoluteFill はremotionの便利コンポーネントで、実際には以下のスタイルが適用されているdivです。

Video もremotionのコンポーネントで、任意の動画ファイルを埋め込むことができます。

Playerでの動画プレビュー

ローカルの動画ファイルをすると、Playerが表示され、先ほどのコンポーネントを使った動画がプレビューされるように実装します。

まず、動画ファイルの読み込みは <input type="file" で行います。remotionに動画を埋め込むにはURLで渡す必要があるのですが、 URL.createObjectURL で生成したBlob URLを渡したら問題ありませんでした。
動画プレイヤーは Player コンポーネントを使います。propsの component に先ほど作った動画レイアウト用のコンポーネントを渡し、 inputProps に定義したpropsの内容を渡します。
その他に動画のサイズ、長さ、フレームレートなどを指定します。

テキスト編集機能を付け加える

タイトルテキストの編集機能を付け加えます。今回は、テキスト・文字色・背景色を変更できるようにします。UIはJoy UIで構築しています。

テキスト・文字色・背景色をstate化し、それぞれを値を変更できるフォームを用意しました。これで、UI上でタイトルテキストを編集できるようなりました。

おまけ : ColerPicker

上記で使用されている ColorPicker コンポーネントは、Joy UIのサンプルをベースに作ってみたものです。中身は以下のような感じになっています。

さいごに

ここまでは良い感じでした。ただ、ブラウザで動画書き出しできないというのは痛いです。なんとかブラウザで動画書き出しする方法がないか調べてみたいと思います。

おすすめ書籍

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Vue.jsのコードをTypeScriptで書く

1 はじめに2 TypeScriptでの書き方2.1 定義2.2 data2.3 methods2.4 computed2.5 props2.6 emit2.7 lifecycle hooks2.8 ...

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

react-icon

React QueryのSuspese Modeを使ってみた! [TypeScript]

1 はじめに2 React Suspenseとは3 React QueryのSuspense Mode3.1 事前準備3.2 Suspenseモードの有効化3.3 データをフェッチするコンポーネントの ...

Next.js 入門してみた

1 はじめに1.1 なぜNext.jsなのか?2 Next.jsとは何か2.1 Static Site Generation (SSG)2.1.1 Incremental Static Regener ...

react-icon

【React初心者】改めて主要なhookの使い方

1 はじめに2 useState3 useEffect3.1 useLayoutEffect4 useCallback5 useContext6 さいごに7 おすすめ書籍 はじめに 今回はReactで ...

フォロー

blog-page_side_responsive

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。