Vonage Video APIとReactによるビデオアーカイブ

はじめに

ビデオを録画するのは、録画ボタンを押すほど簡単なことではありません。 録画プロジェクトによって必要な出力は異なります。このプロジェクト・スポットライトでは、Vonageソリューション・エンジニアの ミーシャ・ベヘイがビデオセッションをアーカイブする4つの主な方法を扱うデモアプリを紹介します。

TL;DR レポ.

複数の録画モード、簡素化された実装

Vonage Video APIは、音声のみのアーカイブ、コンポジットアーカイブ、個別ストリームアーカイブなど、ビデオセッションを録画する複数の方法を提供します。 アーカイブのさまざまな方法を紹介します。 また エクスペリエンス・コンポーザー.

前提条件

始める前に、あなたが持っていることを確認してください：

• Node.jsのインストール

• Vonage Video APIアカウント

• ReactとTypeScriptの基本的な理解

• ギットローカルにインストール

アプリケーションのフロントエンドには以下のものを使用している：

• リアクトUI(UIフレームワーク）をTypeScriptで記述

• ヴァイト(ビルドツールおよび開発サーバー）

• マテリアルUI(UIコンポーネントライブラリ）

• Video API JavaScript SDK

バックエンドには、Node.jsとTypeScript（サーバー）で書かれたExpressを使用した。

仕組み

このアプリケーションは、Vonage Video API を使用してビデオセッションを録画するさまざまな方法を示します。簡単に言うと、ユーザーは以下のいずれかを選択することができます：

• 音声のみ録音

• 参加者全員を1つのVideoにまとめる

• 各参加者のビデオを別々に保管する

• インタラクティブな要素でカスタムブランドの録音を作成。

アーカイブ・モード

この単一ページのウェブ・アプリケーションでは、エクスペリエンス・コンポーザーの機能とともに、3つの異なるアーカイブ・モードを示します。

音声のみのアーカイブ

Audio-Only Archiveは、Videoを合成せずにオーディオストリームをキャプチャします。ユーザーが 音声のみのアーカイブを開始をクリックすると、アプリケーションは1つの Video Publisher を初期化します。Video がパブリッシュされているにもかかわらず、Audio Only Archive の設定により音声のみが記録されます。

コンポーズド・アーカイブ

コンポーズド・アーカイブは、すべての参加者を1つのビデオファイルにまとめて録画します。ユーザーが コンポーズド・アーカイブの開始アプリケーションはビデオパブリッシャーを初期化し、画面共有の許可を要求します。その結果、ウェブカメラとスクリーンキャプチャの映像が1つのファイルに統合されます。

個人アーカイブ

個別アーカイブでは、参加者ごとにビデオストリームを分離します。をクリックします。 個別アーカイブの開始をクリックすると、背景ぼかしが有効なビデオと無効なビデオの2つのビデオパブリッシャーが初期化されます。デフォルトでは、Vonage Video API クラウドは、すべての録画を含む単一の ZIP ファイルとしてダウンロードを配信します。このプロジェクトには、ZIP ファイルを自動的に抽出し、ユーザーが個々の Video ファイルを個別に再生できるようにする追加処理が含まれています。

エクスペリエンス・コンポーザー

エクスペリエンス・コンポーザーは、インタラクティブな要素とブランディングを備えたカスタムレンダリングVideoを生成します。エクスペリエンス・コンポーザーにアクセスして録画するには、一般に公開されているURLが必要です。このプロジェクトでは、ホームチームかアウェイチームにランダムにゴールを割り当てるシンプルなサッカーゲームをコンパニオン・アプリケーションとして作成し、デプロイしました。ユーザーが エクスペリエンス・コンポーザを開始します、エクスペリエンス・コンポーザーがゲームのURLにアクセスして録画し、同時にアプリケーションがビデオ・パブリッシャーを初期化します。エクスペリエンス コンポーザーは技術的にはアーカイブ機能ではありませんが、セッションにパブリッシュする新しいストリームを作成し、ビデオ パブリッシャーと一緒にアーカイブ機能によって記録されます。

ページの下部には、最近のアーカイブのリストがあり、アーカイブのステータス（利用可能/期限切れ/停止）、アーカイブ名（興味深いランダムな事実を含む）、アーカイブIDが表示され、Vonage Archive Inspectorへのリンクがあります。このリストから直接、録音を再生したりダウンロードすることもできます。

Vonage Video API アーカイブは、以下の場合を除き、72 時間のみ利用可能です。 S3 ストレージバケットが設定されていない限り.この期間を過ぎると、アーカイブのステータスは 利用可能から 期限切れになり、録画にアクセスできなくなります。

プロジェクトの運営

これを自分で試したい場合は、クローンして レポ.

つの .envファイル

ファイルを .envファイルを backend/ディレクトリにファイルを作成し、以下の値を追加する：

OPENTOK_API_KEY=your_api_key_here

OPENTOK_API_SECRET=your_api_secret_here

PORT=3345

ファイルを .envファイルを frontend/ディレクトリにファイルを作成し VITE_OPENTOK_API_KEY値を追加する。

フロントエンドとバックエンドの依存関係をインストールする：

npm install

コマンドラインからデモをスタンドアロンで実行するには、以下を実行する。:

npm run dev

でバックエンドサーバーを起動する。 localhost:3345,フロントエンドは localhost:5173.

結論

以上です！このプロジェクトは、Vonage Video API のアーカイブ機能を示し、音声のみのセッションのキャプチャ、統一された録画の作成、または個々のストリームの分離など、開発者が特定のニーズに合わせて録画ソリューションを調整する方法を示しています。Experience Composerの統合では、録画にカスタムブランディングやインタラクティブ要素を追加する方法を示しています。デモを実際に試して、これらの機能を自分のプロジェクトにどのように組み込むことができるか、理解を深めてください。