ウェブ・レファレンス・アプリを始めよう

Web Reference App は、React と Vonage Video API で構築されたオープンソースのビデオ会議アプリケーションです。モジュール式のフロントエンド、軽量なバックエンド、さまざまな会議シナリオに適応する設定可能な機能を使用して、Web 上で最新のマルチパーティセッションを実装する方法を示しています。

Web Landing Page

内容

Webリファレンスアプリは、完全な会議フローと共通の会議ビルディングブロックを提供します：

  • A ランディングページ ユーザーがルームを作成したり、ルームに参加することができます。
  • A 控室 オーディオ・ビデオ・デバイスのプレビューと表示名の設定。
  • A ビデオルーム をサポートする。 参加者25名.
  • A ポストコールページ をクリックしてランディングページに戻り、利用可能なアーカイブをご覧ください。
  • 入出力デバイスセレクター カメラ、マイク、スピーカー用。
  • 背景効果 ぼかし、プリセット画像、カスタムアップロードを含む（ブラウザのサポートは異なります）。
  • ノイズ抑制 をコントロールする。
  • 設定可能な機能 によって駆動される。 config.json ファイルを public ディレクトリにある。
  • インコールツール チャット、リアクション、画面共有、アーカイブを含む。
  • アクティブ・スピーカー検出 そして ダイナミックレイアウト ネットワークや参加者の変化に適応する。
  • [詳細設定] パネル: 配信の画質とパフォーマンスを最適化するために、パブリッシャーの動画および音声設定を構成します。 解像度、ビットレート、フレームレート、オーディオコーデック、オーディオレベルなどのパラメータを、ストリーミング要件に合わせて調整します。リアルタイム可観測性パネルを使用して、ストリームの状態を監視します。この機能により、ストリームのパフォーマンスを即座に把握できるため、問題を迅速に特定し、配信者と視聴者の双方に対して、安定的で高品質なストリーミング体験を維持することができます。

建築

ウェブ・レファレンス・アプリは、フロントエンドとバックエンドで構成されている：

  • フロントエンド（React + Vite）：
    ランディングフロー、待合室、ミーティングUI、レイアウトマネージャー、チャット、リアクション、背景エフェクト、詳細設定、レポートツール、および通話終了後の画面を実装します。

  • バックエンド（エクスプレス）：
    Vonage Video API で必要なセッション ID とトークンを生成します。

  • テストとツール：
    Playwrightは、スクリーンショットの比較を含む統合テストに使用される。
    リンティングやドキュメント生成などの一般的なワークフローは、ヤーンスクリプトで管理される。

主な特徴

ミーティング体験には以下が含まれる：

  • ランディング・ルームとウェイティング・ルーム フルデバイスのセットアップが可能です。
  • 画面共有加入者ズームを含む（メディアプロセッサー対応時）。
  • グループチャット そして 絵文字リアクション.
  • ノイズ抑制 を設定した。
  • 背景効果 (JPG、PNG、GIF、BMPファイル形式をサポートします。
  • アクティブ・スピーカー検出.
  • レイアウト・マネージャー グリッドモード、アクティブスピーカーモード、スクリーンシェアモードを搭載。
  • ダイナミックなタイル管理 帯域幅を節約し、参加者の変化に対応する。
  • 参加者リスト オーディオオン/オフインジケーター付き。
  • コンポジット・アーカイビング 会議の記録用。
  • 会議案内パネル を、共有可能な部屋のURLと一緒に送信する。
  • レポートツール インコールの問題を提出する。
  • 詳細設定 映像や音声の設定を行い、可観測性を確認する。

カスタマイズ

Webリファレンスアプリは、ソースコードを変更することなく、機能やUIのコンフィギュレーションをサポートします。

機能構成

フィーチャーフラグは、シェルスクリプト内で環境変数として定義されます vcrBuild.env.sh、ビルド時に埋め込まれます。以下をカスタマイズできます：

  • デフォルトのレイアウトと解像度
  • 参加時の音声・映像の動作
  • 対応言語およびロケール
  • 通話中の機能（アーカイブ、字幕、チャット、画面共有、絵文字）の利用可否
  • 詳細設定（ビットレート、フレームレート、ノイズ抑制、コーデックの優先順位）
  • デバイスの選択とマイク・カメラの設定
  • 通知期間

テーマとUIのカスタマイズ

アプリのビジュアルテーマをカスタマイズするには、以下を編集してください。 designTokens.json そして走れ：

yarn sync:theme-tokens

これにより、デザイントークンがアプリケーションのテーマシステムに同期されます。

Web Main Room

次のステップ

Web Reference App をインストール、設定、実行するには、リポジトリの README の指示に従ってください：