このページは Cloud Translation API によって翻訳されました。

Web Receiver に移行する

このガイドでは、Cast Receiver v2 アプリを最新の Web Receiver アプリに移行する方法について説明します。

新しい Cast Application Framework（CAF）SDK は Web Receiver v3 とも呼ばれ、Receiver v2 SDK からのメジャーアップグレードです。Web Receiver SDK は、メディア Web Receiver アプリを開発するための簡単で効率的な SDK を提供します。

Web Receiver には、新しい CAF 送信者 API との整合性に優れた API が用意されています。プレーヤー（MPL と Shaka）の完全な統合と、Cast メディアと Google アシスタントの音声コマンドの完全な実装とサポートが提供されます。CAF SDK には、CSS を使用して簡単にスタイル設定できるデフォルトの UI と、UI 実装を簡素化するデータバインディングサービスも用意されています。

移行の理由

Receiver v2 アプリケーションを Web Receiver に移行することで、プレーヤーを扱う多くのコードを排除できるため、アプリケーション固有のビジネスロジックの作成に集中できます。

CAF は、MPL と Shaka のプレーヤーをシームレスに統合して、HTTP Live Streaming（TS と CMAF）、MPEG-DASH、Smooth Streaming、メディア要素の参照元プロパティでサポートされているタイプ（MP3、MP4、Icecast など）を含む、さまざまなコンテンツタイプをサポートします。詳細な一覧については、Google Cast 対応メディアをご覧ください。 現在、CAF はユーザー提供のプレーヤーをサポートしていません。

CAF に移行すると、Google アシスタントによる音声操作のサポートが追加されます。CAF を使用すると、新しい Google アシスタントの音声コマンドが自動的にサポートされます。

CAF は、「言語ごとにトラックを変更する」や「再生速度を変更する」などの新しいメディアコマンドのサポートに加えて、優れたキュー、組み込み広告のサポート、優れたライブサポートを提供します。

何が変わったのか？

Web Receiver API は、Android 用と iOS 用の CAF 送信者によって導入された規則に従うようにしていますが、v2 とは大きく異なります。

ウェブレシーバーは、すべての公開 API で cast.receiver 名前空間ではなく、新しい名前空間 cast.framework を使用しています。v2 で使用されていたデータオブジェクトの多くは、CAF でも同じで、cast.framework.messages 名前空間（ほとんどは cast.receiver.media）の下に公開されています。

次の v2 サービスは、対応する CAF サービスに置き換えられます。

CastReceiverManager クラスは CastReceiverContext に置き換えられました。これは、キャストセッション、送信者、カスタムメッセージ、グローバルシステムイベントを管理するシングルトンです。CastReceiverOptions を使用すると、グローバルアプリケーションオプション（キュー、レシーバーバージョン、再生構成など）をコンテキストに提供できます。
MediaManager クラスは、CastReceiverContext シングルトンのプロパティである PlayerManager に置き換えられ、メディアセッション、メディアリクエスト、Google アシスタントの音声リクエスト（v2 では CommandAndControlManager）を管理し、メディアイベントを呼び出します。プレーヤーの構成（MPL の cast.player.api.Host）は PlaybackConfig によって提供され、グローバルまたは読み込みリクエストごとに指定できます。

PlayerManager は、新しいサブマネージャークラスも公開します。

TextTracksManager - メディアテキストトラックを管理します。
AudioTracksManager - 音声トラックを管理します。
QueueManager - キューを管理します。
BreakManager - 広告の管理。

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

// Set global options.
const options = new cast.framework.CastReceiverOptions();
options.versionCode = DEVELOPERS_APP_VERSION;

context.start(options);

受信側のビジネスロジック

レシーバー v2 でイベントハンドラ（CastReceiverManager.onReady や MediaManager.onLoad など）を公開し、ビジネスロジックを追加する。CAF では、イベントハンドラがイベントリスナー（CastReceiverContext.addEventListener）とメッセージインターセプター（PlayerManager.setMessageInterceptor）に置き換えられます。ウェブレシーバーは、イベントに対して複数のイベントリスナー（リスナーはイベントに影響しません）と、メッセージごとに 1 つのインターセプタを持つことができます。インターセプタは、リクエストを更新または処理できます（変更したリクエスト、成功メッセージ、エラーメッセージを返します）。Promise を返す非同期ハンドラにすることもできます。

読み込みリクエストインターセプタは、アプリケーション固有のロジックを追加する最も一般的な場所です。送信者からの読み込みリクエストの場合、読み込みインターセプタは Content ID をコンテンツ URL に変換できます。プリロードまたはプリキャッシュに明示的なインターセプターが指定されていない場合、読み込みインターセプターはプリロードリクエストとプリキャッシュリクエストに対しても呼び出されます。

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      // Resolve entity to content id
      if (request.media.entity && !request.media.contentId) {
        return getMediaByEntity(request.media.entity).then(
            media => {
              request.media.contentId = media.url;
              return request;
            });
      }
      return request;
    });

v2 のカスタマイズされたメディアステータスハンドラも、メディアステータスメッセージのメッセージインターセプトに置き換えられます。メディア URL でメディアの URL を公開したくないウェブレシーバアプリは、読み込みリクエストのメディア URL を提供する URL リゾルバ（PlayerManager.setMediaUrlResolver）を提供できます。この URL は内部で CAF によって使用され、メディアステータスでは提供されません。

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.MEDIA_STATUS,
    status => {
      // Disable seek.
      status.supportedMediaCommands &=
          ~cast.framework.messages.Command.SEEK
      return status;
    });

イベント

Web Receiver は、CastReceiverContext と PlayerManager の両方から広範なイベントのセットを提供します。Web Receiver アプリには、どのイベントでも複数のリスナーを設定できます。また、複数のイベントに対して 1 つのリスナーを指定することもできます。（一部のイベントについては、cast.framework.events.category をご覧ください）。

イベントには、ユーザーリクエスト、再生の進行状況、プレーヤーの処理、低レベルのメディア要素イベントが含まれます（CAF はメディア要素自体を公開しません）。

Web Receiver アプリでは、操作するイベントリスナー（読み込み完了時のテキストトラック定義の追加など）や分析を追加できます。

// Log all media commands
playerManager.addEventListener(
    cast.framework.events.category.REQUEST,
    event => logEvent(event.type));

カスタムメッセージバス

CAF は API でメッセージバスを公開しませんが、代わりに CastReceiverContext.addCustomMessageListener を使用して特定の名前空間のメッセージリスナー（名前空間ごとに 1 つのみ）を追加し、CastReceiverContext.sendCustomMessage を使用して名前空間でメッセージを送信します。すべての名前空間は、ウェブレシーバを起動する前に（つまり、CastReceiverContext.start を呼び出す前に）宣言する必要があります。名前空間をメッセージリスナーに追加して宣言するか、CastReceiverOptions.customNamespaces で開始オプションとして指定します。

const options = new cast.framework.CastReceiverOptions();
options.customNamespaces = {
    CUSTOM_NS: cast.framework.system.MessageType.JSON
};
context.start(options);

context.sendCustomMessage(CUSTOM_NS, {
  type: 'status'
  message: 'Playing'
});

デフォルトの UI

CAF にはデフォルトの Web Receiver UI があり、必要に応じて再生進行状況バーとメディアメタデータが表示されます。デフォルトの UI は、CSS のようなスタイルでスタイル設定できるカスタム要素（<cast-media-player>）として提供されます。

<style>
   cast-media-player { --splash-image: url("splash.png"); }
</style>
<cast-media-player></cast-media-player>

詳細なカスタマイズを行うために、Web Receiver アプリは独自の UI を実装できます。Web Receiver は、UI オブジェクトを Web Receiver 再生状態にバインドするために役立つ cast.framework.ui.PlayerDataBinder クラスを提供します。