https://d226lax1qjow5r.cloudfront.net/blog/blogposts/why-experience-composer-api-is-great/experience-composer-api.png

エクスペリエンス・コンポーザーAPIが優れている理由

最終更新日 July 12, 2022
#video-api
#experience-composer
#nodejs

所要時間：2 分

Vonageは最近 エクスペリエンス・コンポーザー（EC）API.このオファリングは、Vonage Video APIを使用してWebアプリケーションのエクスペリエンス全体をキャプチャするためのAPI駆動型クラウドサービスを提供します。つまり、Webアプリケーションのルック＆フィールを完全に録画し、HLSまたはRTMP経由でブロードキャストしたり、ビデオセッションに新しいストリームとして公開したりできるようになります。

この投稿では、エクスペリエンス コンポーザーを使用して、ブランド ロゴ、カスタム HTML 要素、および Google カレンダーの iframe を含む既存の Vonage セッションに新しいビデオ ストリームを追加する方法を説明します。動画 ビデオをご覧ください。

Diagram of the host's view of the stream with a calendar to the left and on the right in a column from top to bottom is the host camera feed with a Vonage logo overlay, a data table with columns, number, status and Assignee, and a video guest feedHost View Diagram

プロダクトマネージャーとソフトウェア開発者のプロジェクト計画セッションを想像してください。プロダクトマネージャーはホストとして、期限付きの製品計画カレンダーと、担当者とステータスを含む作業項目を含むHTMLテーブルを公開する。ホストのビデオフィードには、ブランドロゴがオーバーレイ表示される。ホストのビューには、ゲストからのビデオだけでなく、これらすべての項目が含まれます。

ソフトウェア開発者はゲストとして、カレンダー、データテーブル、ブランドオーバーレイを含むホストのビデオを含むホストのストリームの消費者である。

前提条件

  1. Video APIアカウント。アカウントをお持ちでない場合は、以下の方法があります。 サインアップして作成してください。

  2. Node.jsのバージョン >= 14.17.5

  3. アカウントでエクスペリエンス・コンポーザー API を有効にします。この設定は アカウントポータル.

使用するのは ブートストラップを使います。CSSの詳細には触れませんが、GitHubの リポジトリ.

アーキテクチャ図

次の図は、これから構築するアーキテクチャを示しています。始めに、ホストであるストリーム A が、ゲストであるストリーム B と共にセッションにパブリッシュされます。エクスペリエンス コンポーザーはストリーム A をサブスクライブし、ホストからのビデオとブランド オーバーレイ、Google カレンダー、およびデータ テーブルを含む新しいストリーム、ストリーム A（コンポジット）をパブリッシュします。ゲストはこのコンポジット・ストリームを消費する。両方のユーザーが相互に通信できます。

Diagram showing how the video feeds are fed into the Experience Composer and transformed into a composite stream.Architecture Diagram

サーバー

サーバーはルームを作成し、セッションを作成し、トークンを生成し、エクスペリエンス・コンポーザーAPIにリクエストを送信して以下を実行します。 開始および 停止ストリームを開始および停止します。

注：Experience Composer API は現在、Vonage Server SDK ではサポートされていません。エクスペリエンス コンポーザー ストリームの開始と停止は、REST 呼び出しによって行われます。

サーバーの /renderエンドポイントは sessionIdと roomNameを取得します。を受け取ります。 sessionIdに渡されます。 createRenderに渡され、Experience Composerが起動し、Renderに関するデータが返されます。そして idを抽出して sessionsオブジェクトの roomNameに保存されます。 renderId.

app.post('/render', async (req, res) => {
  try {
    const { sessionId, roomName } = req.body;
    if (sessionId && roomName) {
      const data = await createRender(sessionId);
      const { id } = data;
      sessions[roomName].renderId = id;
      res.status(200).send({ id });
    } else {
      res.status(500);
    }
  } catch (e) {
    res.status(500).send({ message: e });
  }
});

同様に、エクスペリエンス・コンポーザーによって発行されたストリームを停止するには /render/stop/:idエンドポイントは、エクスペリエンス・コンポーザーのインスタンスを停止するために必要な Render idエクスペリエンス・コンポーザーのインスタンスを停止するために必要です。

app.get('/render/stop/:id', async (req, res) => {
  try {
    const { id } = req.params;
    if (id) {
      console.log('trying to stop render ' + id);
      const data = await deleteRender(id);
      res.status(200).send(data);
    } else {
      res.status(500);
    }
  } catch (e) {
    res.status(500).send({ message: e });
  }
});

注 createRenderおよび deleteRender関数のコードは ファイル.

APIでリクエストを認証するには、JSON Web Token（JWT）を作成する必要があります。 開発者向けドキュメント.私は jsonwebtokenパッケージを npmのパッケージを使いましたが、他のパッケージを使ってもかまいません。

レンダーを作成するには、JSONボディにいくつかのパラメータを渡す必要があります。 ドキュメント.いくつかのパラメータは必須です。 url, sessionId, tokenおよび projectId.特に urlパラメータに特に注意してください。これは、「見えないユーザー」であるエクスペリエンス・コンポーザーがアクセスするURLだと考えてください。次に JavaScriptコードがロードされ、エクスペリエンス・コンポーザーがホストにサブスクライブするだけで、新しいストリームが sessionId.

でお気づきかもしれない。 createRender関数には余分なオブジェクト propertiesを含んでいることにお気づきでしょう。 nameパラメーターが含まれていることにお気づきだろう。この名前は streamCreatedイベントをクライアント側でリッスンするときに役立つ。これについてはまた後で説明しますが、今のところ知っておく必要があるのは、これがセッションに発行するストリームの名前だということだけです。

サーバーは、静的なHTMLコンテンツをクライアントに提供する役割も担います。アプリケーションのさまざまなビューに対して、いくつかのルートを設定します。ホスト（カレンダーやテーブルなどを公開するプレゼンター）用のルート、ゲストまたはホストストリームのコンシューマー用のルート、そしてエクスペリエンス・コンポーザー用のルートです。 urlパラメータを送信します）。

app.get('/host', (req, res) => {
  res.sendFile(__dirname + '/src/host.html');
});

app.get('/ec', (req, res) => {
  res.sendFile(__dirname + '/src/ec.html');
});

app.get('/user', (req, res) => {
  res.sendFile(__dirname + '/src/user.html');
});

クライアント側

ここではバニラJSのサンプルアプリを作成するが、エクスペリエンス・コンポーザーを任意のフレームワークと組み合わせて使用することもできる。クライアント側のコードは srcフォルダ.

ゲストビュー

ゲストはホストの合成ストリームの視聴者であると同時に、ホストとコミュニケーションするためにビデオやオーディオを送信すると考えてください。

ゲストビューのコードは、JavaScriptとCSSを含むHTMLファイル user.htmlにあります。ゲストは自分の Video ストリームを公開し、エクスペリエンス・コンポーザーによって公開されたストリームのみを購読する。ストリームの名前を設定したため、エクスペリエンス コンポーザーが公開したストリームを選択的に購読できます。

イベント・リスナーを設定すると streamCreatedイベントリスナーを設定する際、ストリーム名が EC の場合のみストリームを購読します。これは、ゲストがホストの通常の Video ストリーム（テーブル、オーバーレイ、iframe を含まない）をサブスクライブするのを防ぐためです。

session.on('streamCreated', function streamCreated(event) {
  if (event.stream.name === 'EC') {
    const subscriberOptions = {
      width: '800px',
      height: '500px',
    };
    session.subscribe(
      event.stream,
      'subscriber',
      subscriberOptions,
      handleError
    );
  }
});

ゲストビューはこんな感じ。2 つの異なるストリームが表示されます。左側では、ゲストがビデオ ストリームを公開しており、右側では、ホストからのビデオ フィード、カレンダー、オーバーレイ、およびデータ テーブルを含む、エクスペリエンス コンポーザーによって公開される合成ストリームを購読しています。

Diagram of the Guest View with the guest's video feed on the left and in a box on the right that contains a calendar to the left and on the right in a column from top to bottom is the host camera feed with a Vonage logo overlay, a data table with columns, number, status and AssigneeGuest View Diagram

ホスト・ビュー

この場合のホストは、アプリケーション固有のカスタム要素とともにビデオフィードを公開する人です。このビューでは、ホストは自分の動画フィードを持ち、ゲストからの動画フィードを購読します。ホスト ビューのレイアウトには、エクスペリエンス コンポーザーによってセッションにパブリッシュされるカスタム要素（Google カレンダー、データ テーブル、ブランド オーバーレイ）も表示されます。

ホスト・ビューは /hostルートにロードされます。また、ホストとエクスペリエンス・コンポーザーを識別するクエリ・パラメータを追加することにしました。したがって、ホストの完全なルートは ${applicationUrl}/host?role=host.

繰り返しますが、これがホスト・ビューの様子です。

Diagram of the host's view of the stream with a calendar to the left and on the right in a column from top to bottom is the host camera feed with a Vonage logo overlay, a data table with columns, number, status and Assignee, and a video guest feedHost View Diagram

ホストとエクスペリエンス・コンポーザーは、同じ JavaScriptファイルを共有しますが、HTML ファイルは別々になります。ホスト用のマークアップ ファイルは次のとおりです。 ここで.ホストかECかを判断するために、2つの関数を作りました、 isHostと isExperienceComposer.

function isHost() {
  return queryString === '?role=host' && window.location.pathname === '/host';
}

function isExperienceComposer() {
  return (
    queryString === '?role=experience_composer' &&
    window.location.pathname === '/ec'
  );
}

これにより、必要なストリームを選択的にサブスクライブできるようになる。ホストは、エクスペリエンス・コンポーザーが作成したストリームをサブスクライブする必要はない。したがって、ECとは異なる名前のストリームを選択的にサブスクライブできる。

session.on('streamCreated', function (event) {
  if (isHost() && event.stream.name !== 'EC') {
    subscribe(event.stream);
  }
});

この subscribe関数は、ストリームを購読しているのがホストかエクスペリエンス コンポーザーかによって、パブリッシャーをどこに追加するかを決定します。ホストがストリームを購読しようとしている場合、他のユーザー（ゲスト）の Video を id が subscriberつまり、Host ビューの右下にあります。

function subscribe(stream) {
  session.subscribe(
    stream,
    isExperienceComposer() ? 'publisher' : 'subscriber',
    {
      width: '100%',
      height: '100%',
    },
    handleError
  );
}

これはサンプル・アプリケーションなので、便宜上、エクスペリエンス・コンポーザー・ストリームを開始および停止するための2つのボタンも追加した。これらのボタンはホストにのみ表示されますが、ホスト用のイベントが起動したら、プログラムでエクスペリエンス・コンポーザー・ストリームを公開できます。 streamCreatedイベントが起動したら、プログラムによってエクスペリエンス・コンポーザー・ストリームを公開できます。

エクスペリエンス・コンポーザ・ストリームを開始および停止するフェッチ呼び出しは src/index.jsで実装され、関数は host.htmlファイル.

ホストとエクスペリエンス・コンポーザーのもう1つの重要な違いは、パブリッシュするようにホストに明示的に指示する必要があることだ。そのため、セッションに接続したら、ホストである場合のみパブリッシュする。

session.connect(token, function (error) {
  if (error) {
    handleError(error);
  } else {
    if (isHost()) {
      const publisher = OT.initPublisher(
        'publisher',
        {
          width: '100%',
          height: '100%',
          name: 'host',
        },
        handleError
      );
      publish(publisher);
    }
  }
 });

エクスペリエンス・コンポーザーは自動的にセッションにパブリッシュするので、JavaScriptコードはエクスペリエンス・コンポーザーにパブリッシュを指示する必要はない。

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

エクスペリエンス コンポーザーは、API 呼び出し時にサーバー側に渡した URL を読み込みます。JavaScriptコードがロードされ、セッションにパブリッシュされます（これもパラメータとして渡されます）。エクスペリエンス・コンポーザーは、URLに参加し、画面をキャプチャし、結果を新しいストリームとしてセッションにパブリッシュする、目に見えないユーザーだと考えてください。

エクスペリエンス・コンポーザーが参加しているのか、ホストが参加しているのかを知るためのヘルパー関数をいくつか作成したので、次のコードを通してエクスペリエンス・コンポーザーのパブリッシュを防ぐことができる。 JavaScriptコードを使用して、エクスペリエンス・コンポーザーのパブリッシュを防ぐことができます。前のセクションを参照してください。

また、公開するストリームにはホストのコンポジット・ビデオ・フィードのみを含めるため、エクスペリエンス・コンポーザーはホストからのストリームのみをサブスクライブする必要があることを考慮することも重要です。

session.on('streamCreated', function (event) {
  if (isExperienceComposer() && event.stream.name === 'host') {
    subscribe(event.stream);
  }
});

エクスペリエンス・コンポーザーのビューから目的のレイアウトを見ると、ページの右上隅にサブスクライバーを追加する必要があります。 publisherDOM要素

function subscribe(stream) {
  session.subscribe(
    stream,
    isExperienceComposer() ? 'publisher' : 'subscriber',
    {
      width: '100%',
      height: '100%',
    },
    handleError
  );
}

これは、右上にホストからサブスクライブされたストリームが表示されたエクスペリエンス・コンポーザーのビューです。

Diagram of the Experience Composer's view of the stream with a calendar to the left and on the right in a column from top to bottom is the host camera feed with a Vonage logo overlay, a data table with columns, number, status and AssigneeExperience Composer View Diagram

##ビデオデモ

次のビデオでは、ホスト・ビューとゲスト・ビューをお見せします。

レコーディングと放送

このアプリケーションはアーカイブ/レコーディングを実装していません。しかし streamModeを "manual "モードに設定することで可能です。 アーカイブを開始するアーカイブを開始するときに "manual "モードに設定し、録画に含めたいストリームを 録画.

この場合、エクスペリエンス・コンポーザーからのストリームとゲストからのストリームのみをアーカイブしたい。そうでない場合、3 つのストリームを追加するか、または streamModeを自動に設定した場合、記録には 3 つのストリームがあり、そのうちの 2 つはホストになります。

エクスペリエンス・コンポーザーが公開したストリームは、HLSやRTMPを介して、より多くの視聴者に向けて放送することもできる。

結論

エクスペリエンス・コンポーザーは、ウェブページ上でレンダリングされるものであれば、思いつく限りのものをストリームとして公開することで、ビデオ通話にリッチなエクスペリエンスを提供できる非常に強力なサービスです。

新しいエクスペリエンス・コンポーザーを試してみませんか？へのフィードバックをお待ちしています。 VonageコミュニティSlack.

シェア:

https://a.storyblok.com/f/270183/384x384/6007824739/javier-molina-sanz.png
Javier Molina Sanz

Javier studied Industrial Engineering back in Madrid where he's from. He is now one of our Solution Engineers, so if you get into trouble using our APIs he may be the one that gives you a hand. Out of work he loves playing football and travelling as much as he can.