Remotion、Next.js、Tailwind CSS を使用した Web ベースのビデオ エディターの構築

Veed.io や Descript などの人気のあるツールに似た、独自の強力な Web ベースのビデオ エディターを作成したいと思ったことがあるなら、ここが正しい場所です。このステップバイステップ ガイドでは、Remotion、Next.js、Tailwind CSS を使用してビデオ エディターを構築する方法を説明します。最終的には、独自のブラウザベースのビデオ編集ツールを開発するための強固な基盤が得られるでしょう。

導入

Web ベースのビデオエディタは、そのアクセシビリティと使いやすさにより、ますます人気が高まっています。ビデオのレンダリングには Remotion、強力な React ベースのフレームワークには Next.js、高速でカスタマイズ可能なスタイルには Tailwind CSS を使用することで、柔軟なブラウザ上で直接動作するビデオ編集ツールです。

このガイドでは、ユーザーがビデオ クリップを配置し、テキスト オーバーレイを追加し、リアルタイムでビデオをプレビューできるようにする、React Video Editor などのツールの簡易バージョンを構築します。

前提条件

本題に入る前に、以下がインストールされていることを確認してください:

• Node.js (v14 以降)
• npm (Node.js にバンドルされています)
• コードエディタ (例: Visual Studio Code)

React の経験があると役に立ちますが、このガイドでは基本事項を段階的に説明します。

プロジェクトのセットアップ

1. TypeScript を使用して新しい Next.js プロジェクトを作成します:

次のコマンドを実行して、新しい Next.js プロジェクトを作成します。タイプセーフ性を高めるために TypeScript を使用します:

   npx create-next-app@latest video-editor --typescript
   cd video-editor

このコマンドは、TypeScript が有効になった video-editor という名前の新しい Next.js プロジェクトをセットアップします。

1. 必要なパッケージをインストールします:

次に、ビデオレンダリング (Remotion)、アイコン (Lucide) などに必要な依存関係をインストールします。

   npm install @remotion/player remotion lucide-react

これらのパッケージを使用すると、ビデオ プレーヤー (@remotion/player) の作成、ビデオ レンダリング ロジックの処理 (Remotion)、アイコン サポート (Lucide) の追加が可能になります。

1. Tailwind CSS を設定します:

Tailwind の公式 CSS インストール ガイドに従って、Tailwind を Next.js プロジェクトと統合します。 Tailwind CSS は、エディターのスタイル設定をより高速かつ柔軟にします。

1. コアコンポーネントファイルの作成:

次に、ビデオ エディター コンポーネントの主な構造を構築する新しいファイルコンポーネント/react-video-editor.tsx を作成します。次に、このコンポーネントをタイムラインやビデオ プレーヤーなどの小さな部分に分割します。

ビデオエディターの構築

プロジェクトのセットアップが完了したら、ビデオ エディターの主要コンポーネントの作成に進みましょう。まず Timeline コンポーネントと Player コンポーネントを構築し、次にメイン エディター コンポーネントのすべてを組み合わせます。

タイムラインコンポーネント

タイムラインは、ユーザーがビデオ クリップやテキスト オーバーレイを整理して視覚化する場所です。このコンポーネントはビデオ クリップとテキスト オーバーレイの配列を受け取り、タイムライン上に表示します。

タイムライン コンポーネントの基本構造は次のとおりです。

// components/Timeline.tsx
import React from 'react';
import { Clip, TextOverlay } from '@/types/types';

interface TimelineProps {
  clips: Clip[]; // Array of video clips
  textOverlays: TextOverlay[]; // Array of text overlays
  totalDuration: number; // The total duration of the video
}

const Timeline: React.FC<TimelineProps> = ({ clips, textOverlays, totalDuration }) => {
  // For now, we’ll just display the length of the video and the number of clips.
  return (
    <div>
      <h2>Total Duration: {totalDuration} seconds</h2>
      <p>Number of clips: {clips.length}</p>
      <p>Number of text overlays: {textOverlays.length}</p>
    </div>
  );
};

export default Timeline;

この例では、ビデオ クリップ、テキスト オーバーレイ、合計ビデオ時間の小道具を受け入れる Timeline コンポーネントを定義します。今後のステップでは、このコンポーネントを更新して、ドラッグ アンド ドロップ機能を備えたインタラクティブなタイムラインを表示します。

プレーヤーコンポーネント

次に、Player コンポーネントを構築します。このコンポーネントは、Remotion を使用してビデオ クリップをレンダリングし、ビデオを再生します。ビデオ クリップとテキスト オーバーレイを取り込んで、Remotion のプレーヤーに渡します。

// components/Player.tsx
import React from 'react';
import { Player } from '@remotion/player'; // Import the Player component from Remotion
import { Clip, TextOverlay } from '@/types/types';

interface PlayerProps {
  clips: Clip[]; // Array of video clips
  textOverlays: TextOverlay[]; // Array of text overlays
  totalDuration: number; // Total duration of the video
}

const VideoPlayer: React.FC<PlayerProps> = ({ clips, textOverlays, totalDuration }) => {
  // Here, the Player component from Remotion will be used to render the video clips
  return (
    <div>
      <Player
        component={() => <div>Render video here</div>} // Temporary placeholder for rendering the video
        durationInFrames={totalDuration * 30} // Assuming 30 frames per second
        compositionWidth={1920} // Standard 1080p width
        compositionHeight={1080} // Standard 1080p height
        fps={30} // Frames per second
        controls // Display play/pause and other controls
      />
    </div>
  );
};

export default VideoPlayer;

上記のコードでは、Remotion の Player コンポーネントを使用してビデオのレンダリングを処理するように VideoPlayer コンポーネントを設定しました。私たちは、durationInFrames (1 秒あたり 30 フレームに基づいて合計時間を計算する) などの小道具を渡し、標準のビデオ サイズ (1920x1080) を指定します。

メインエディタコンポーネント

次に、メイン エディター コンポーネントで Timeline コンポーネントと Player コンポーネントを結合しましょう。ここでビデオ クリップとオーバーレイの状態が管理され、両方のコンポーネントが一緒にレンダリングされます。

// components/react-video-editor.tsx
import React, { useState } from 'react';
import Timeline from './Timeline';
import VideoPlayer from './Player';
import { Clip, TextOverlay } from '@/types/types';

const ReactVideoEditor: React.FC = () => {
  // State to hold video clips, text overlays, and total duration
  const [clips, setClips] = useState<Clip[]>([]); // Initial state: an empty array of video clips
  const [textOverlays, setTextOverlays] = useState<TextOverlay[]>([]); // Initial state: an empty array of text overlays
  const [totalDuration, setTotalDuration] = useState(10); // Example initial duration (in seconds)

  // For now, we’ll render the VideoPlayer and Timeline components
  return (
    <div className="flex flex-col text-white">
      <VideoPlayer clips={clips} textOverlays={textOverlays} totalDuration={totalDuration} />
      <Timeline clips={clips} textOverlays={textOverlays} totalDuration={totalDuration} />
      {/* Additional controls for adding clips and overlays will go here */}
    </div>
  );
};

export default ReactVideoEditor;

このメイン エディター コンポーネントでは、React の useState フックを使用して、ビデオ クリップ、テキスト オーバーレイ、合計再生時間の状態を管理します。現時点では、状態はクリップとオーバーレイの空の配列で初期化されています。 VideoPlayer コンポーネントと Timeline コンポーネントは、適切な props を使用してレンダリングされます。

Customizing and Extending

Now that you’ve got the basic structure of your video editor, you can begin to extend and customize its functionality. Here are a few ideas to get you started:

• Drag-and-drop functionality: Enable users to rearrange clips on the timeline.
• Advanced text overlays: Add support for changing fonts, colors, and animations for text.
• Audio support: Allow users to upload and manage background music tracks.
• Video transitions: Implement smooth transitions between different video clips.

These features will help your editor become more interactive and user-friendly, comparable to professional editing tools like Veed.io or Descript. If you are feeling stuck feel free to pull down the open source version here. Or have a play with the live version here.

以上がRemotion、Next.js、Tailwind CSS を使用した Web ベースのビデオ エディターの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。