このプロジェクトは、ユーザーがリアルタイムでビデオおよびオーディオストリームを対話的に操作できる Web ベースの VJ（ビデオジョッキー）ツールを開発することを目指しています。アプリケーションは、ユーザーの入力とオーディオ解析によって駆動されるさまざまなマルチメディア要素とエフェクトを統合します。
- サウンドリアクティブ: オーディオ入力に動的に反応するビジュアル。
- 3D ビジュアライゼーション: 視覚的なアウトプットを高めるための 3D グラフィックスの統合。
- フィルターとエフェクト: ビデオストリームを変更するためのグリッチなどの視覚効果を含む。
- パーティクルシステム: 視覚的な複雑さを追加するためのパーティクルアニメーションの実装。
- ウェブカメラ統合: ユーザーのウェブカメラからのライブビデオ入力のキャプチャ。
- レイヤリング: ユーザーがビデオとエフェクトの複数のレイヤーを管理できるようにする。
- プラットフォーム: デスクトップおよびモバイルデバイスを通じてアクセス可能なブラウザベース。
- Next.js: フロントエンドフレームワークとして利用し、サーバーサイドレンダリングと静的サイト生成を促進。
- React: コンポーネントベースのアーキテクチャでユーザーインターフェイスを構築。
- Three.js: 3D ビジュアライゼーションの作成と操作。
- Web オーディオ API: リアルタイムのオーディオ処理用。
- GitHub Pages: Next.js によって生成された静的サイトをホスト。
- GitHub Actions: 継続的インテグレーションとデプロイメントのために使用。
- リポジトリをクローンします。
git clone- プロジェクトディレクトリに移動します。
cd vj-tool- 依存関係をインストールします。
npm install- 開発サーバーを起動します。
npm run dev- ブラウザでアプリケーションにアクセスします。
http://localhost:3000vj-tool
├── .github
│ └── workflows
│ └── deploy.yml
├── components
│ ├── AudioVisualizer.js
│ ├── Controls.js
│ ├── Layer.js
│ ├── ParticleSystem.js
│ ├── VideoLayer.js
│ └── WebcamCapture.js
├── pages
│ ├── _app.js
│ ├── _document.js
│ ├── index.js
│ └── styles.css
├── public
│ ├── favicon.ico
│ └── manifest.json
├── styles
│ └── globals.css
├── .gitignore
├── next.config.js
├── package.json
└── README.mdオーディオ入力に基づいてビジュアルエフェクトを生成するコンポーネント。
アプリケーションのコントロールパネルを提供するコンポーネント。
ビデオレイヤーを管理するコンポーネント。
パーティクルアニメーションを生成するコンポーネント。
ビデオストリームを表示するコンポーネント。
ウェブカメラからのビデオ入力をキャプチャするコンポーネント。
アプリケーションのメインページ。
アプリケーション全体のスタイルを定義する CSS ファイル。
アプリケーションの HTML ドキュメントのカスタム設定を提供するファイル。
アプリケーションのルートコンポーネントをカスタマイズするファイル。
Next.js は、React アプリケーションの開発を簡素化し、サーバーサイドレンダリングと静的サイト生成をサポートします。これにより、パフォーマンスの向上と SEO の最適化が可能になります。
Three.js は、WebGL を使用して 3D グラフィックスを描画するための JavaScript ライブラリです。これにより、アプリケーションにリッチなビジュアライゼーションを統合できます。
Web オーディオ API は、ブラウザでリアルタイムのオーディオ処理を実行するための API です。これにより、オーディオ入力に基づいてビジュアルエフェクトを生成できます。
GitHub Pages は、GitHub リポジトリから静的サイトをホストするための無料のサービスです。これにより、アプリケーションを簡単に公開し、共有できます。
GitHub Actions は、GitHub リポジトリ内で継続的インテグレーションとデプロイメントを自動化するためのツールです。これにより、品質の高いコードを保証し、効率的な開発プロセスを実現できます。
このワークフローは、Next.js プロジェクトのビルド、テストの実行、および成功したビルドを GitHub Pages にデプロイするプロセスを自動化します。これにより、品質の高いコードのみが本番環境にデプロイされることを保証します。
- Push:
mainブランチへのプッシュがトリガー。 - Workflow Dispatch: GitHub Actions タブから手動でワークフローを実行可能。
- Contents: 読み取り専用アクセス。
- Pages: GitHub Pages へのデプロイのための書き込み権限。
- ID-Token: ID トークン生成のための書き込み権限。
同時に一つのデプロイメントのみを実行し、進行中のデプロイメントはキャンセルせずに、最新のキューのみを実行します。
- コードのチェックアウト
- パッケージマネージャの検出（npm または yarn）
- Node.js 環境のセットアップ
- 依存関係のインストール
- Next.js アプリケーションのビルド
- 単体および統合テストの実行
- ビルドアーティファクトのアップロード
ビルドジョブが成功した場合のみ実行されるデプロイメントステップです。GitHub Pages へのデプロイを行います。
このドキュメントは VJ ツールプロジェクトの包括的なガイドとして機能し、アプリケーションの目的、仕様、自動デプロイメントプロセスの詳細を説明しています。開発者やユーザーが効果的にツールを理解し、利用するための支援を目的としています。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent