ビデオエクスプレスの登場とその素晴らしさ

エクスプレス解説

Vonageは、10年にわたるVideo開発の専門知識を生かし、Video Expressと呼ばれるシンプルな高レベルAPIを作成し、Webアプリケーションへのマルチパーティビデオの開発と統合を加速しました。

複数政党？

まず、マルチパーティーの定義から始めましょう。これは、ビデオ通話に複数の参加者がいて、自分の音声ストリームとビデオストリームを公開すると同時に、他の参加者のストリームを購読することを意味します。

以前は、同じ部屋に何人かのチームがいて、別の部屋にいるチームとビデオ通話をするのが一般的だった。

2 teams 2 streams

最近、あなたも経験したことがあるかもしれないが、状況はさまざまな場所から電話をかけてくるように変化している。

6 people 36 streams

上の画像からわかるように、参加者からのすべての接続を維持するのは、すぐに複雑な課題となる。

ここで Video Expressの出番です。Videoを統合したアプリケーションを開発するのは初めてという方も、他のことに集中したいというベテランの方も、Video Expressがあれば安心です。Video Expressは、複雑さを取り除き、品質、CPU使用率、レイアウトを最適化します！だからすごいのです！

以下は、Video Expressを使用したプロジェクトです。 バニラJavaScriptプロジェクトをご覧ください。クイックデプロイボタンがあるので、.env ファイルに API キーとシークレットを入力するだけで、独自の動作例が完成します。これは Video Express を強調するための素朴な実装です。

複雑さを取り除く

ビデオチャットを作成するために必要なスターターコードの比較を以下に示します。

Vonage Video API JavaScript Client SDK

const session = OT.initSession(this.apiKey, this.roomId); // Init session
session.on('sessionConnected', ...); // Handle session connected events
session.on('sessionDisconnected', ...); // Handle session end
session.on('streamCreated', ...); // Subscribe to newly published streams
session.on('streamDestroyed', ...); // Clean up on stream end
session.on('connectionCreated', ...); // Handle connection events (join)
session.on('connectionDestroyed', ...); // Handle disconnect events (leave)

// Build your own UI / Layout
// Active Speaker Detection
// Video / Audio Optimizations
const pub = OT.initPublisher(targetElement, options, (err) => console.error(err)); // Create a publisher
session.publish(pub, undefined, err => { // Try to publish media
 if (err) {
   reject(err);
 } else {
   resolve();
 }
});

ビデオ・エクスプレス

const room = new VideoExpress.Room({ apiKey, sessionId, token, roomContainer: 'roomContainer’ });

room.join();

Video Express は、ビデオ通話のすべての参加者の公開と購読を処理します。Room" を配置する HTML 要素の ID（この例では "roomContainer"）を指定し、参加するだけです。私たちの ドキュメントをご覧ください。

クオリティ・マネージャー

Quality Manager diagram

Video Expressは、最高品質のビデオ通話を実現するために、さまざまな方法を自動的に適用します。例えば、見えるビデオストリームのタイルサイズを最大化し、見えないビデオストリームを一時停止します。また、ネットワーク状況やCPUに応じて解像度やフレームレートを調整します。スピーカーや画面共有の優先順位を動的に高く設定することで、フォーカスを必要とするものが最高の品質を実現できます。

エクスペリエンス・マネージャー

Video Expressは、優れたユーザー・エクスペリエンスを実現するために、クライアント側で最適化を行います。たとえば、騒がしい部屋を避けるために、10人目以降の参加者は自動的にミュートされます。表示されるビデオのサイズが小さくなると、スムーズな再生に必要な帯域幅を減らすために、より小さなストリームが要求されます。

最適化されていない生のビデオセッションの例

Table with data of an unoptimized multiparty video session

最適化されたビデオセッションの例

Table with data of an optimized multiparty video session

レイアウト・マネージャー

Layout Manager diagram

Video Expressは、画面のサイズと参加者の数に基づいて、ストリームのレイアウトを自動的に調整します。画面共有とアクティブなスピーカーは、より高い優先順位が与えられ、より多くのスペースを占有します。

プレビュー出版社

Video Express が提供するもう一つの機能は、ユーザーがルームに参加する前にビデオとオーディオをプレビューできるようにすることです。以下にサンプルコードを示します：

const previewPublisher = new VideoExpress.PreviewPublisher('previewContainer');
await previewPublisher.previewMedia({
  targetElement: 'previewContainer',
  publisherProperties: {
    resolution: '1280x720',
    audioBitrate: 15,
  },
});

スクリーンシェア

Video Expressの最後の特徴は、画面共有の処理方法だ。

const startScreensharing = () => {
  room.startScreensharing("myScreenshare");
}

const stopScreensharing = () => {
  room.stopScreensharing();
}

screenshareStartBtn.addEventListener("click", startScreensharing, false);

screenshareStopBtn.addEventListener("click", stopScreensharing, false);

これだけです！この数行のコードで、スクリーンを共有することができ、Video Expressはそれを優先するように部屋のレイアウトを再構成します。

まあ...

素晴らしいものを作る準備はできているか？

をご覧ください。 Video Express ドキュメントをご覧ください。

基本的な 基本的なスターター・プロジェクト.

あなたが取り組んでいることを見せてください。 コミュニティスラックチャンネル.