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

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のコンフィギュレーションをサポートします。

機能構成

フィーチャー・フラグは config.json.
設定ファイルの例 (config.example.json).
このファイルでカスタマイズできる：

  • デフォルトのレイアウト、
  • オーディオ・オン・ジョインの動作、
  • 背景効果の有無、
  • ロールベースのミーティング機能。

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

UI のカスタマイズは config.json そして、編集可能なフロントエンド・コンポーネントを通して。

サポートされているフィールドの全リストはリポジトリのREADMEを参照してください。

Web Main Room

次のステップ

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