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

カスタムウェブレシーバーに主要な機能を追加する

このページには、コードスニペットと利用可能な機能の説明が掲載されています。カスタムウェブレシーバーアプリ

組み込みのプレーヤー UI を表す cast-media-player 要素。
cast-media-player 要素にさまざまなスタイルを設定するための、CSS に似たカスタムスタイル設定 UI 要素（background-image、splash-image、 font-family。
Web Receiver フレームワークを読み込むスクリプト要素。
メッセージをインターセプトしてイベントを処理する JavaScript コード。
自動再生のキュー。
再生を構成するオプション。
ウェブレシーバーのコンテキストを設定するオプション。
Web Receiver アプリがサポートするコマンドを設定するオプション。
Web Receiver アプリケーションを起動する JavaScript 呼び出し。

で確認できます。

アプリケーションの構成とオプション

アプリケーションを構成する

「 CastReceiverContext デベロッパーに公開される最も外側のクラスであり、 Web Receiver SDK の初期化を処理します。SDK 用意されている API を使用して、アプリケーションデベロッパーは CastReceiverOptions。これらの構成は、アプリケーションの起動ごとに 1 回評価され、呼び出しでオプションパラメータを設定するときに、SDK が start。

以下の例は、特定の Google Cloud Storage バケットの有無を送信者の接続は、アクティブに接続されたままです。ウェブレシーバーがメッセージを送信する前に、 maxInactivity SENDER_DISCONNECTED イベントがディスパッチされます。以下の構成このタイムアウトをオーバーライドできます。この方法は、問題をデバッグする際に便利です。ウェブレシーバーアプリで Chrome リモートデバッガセッションが終了しないようにする接続されていない IDLE 状態の送信者です。

const context = cast.framework.CastReceiverContext.getInstance();
const options = new cast.framework.CastReceiverOptions();
options.maxInactivity = 3600; // Development only
context.start(options);

プレーヤーを構成する

Web Receiver SDK は、コンテンツを読み込む際に再生を設定する機能を提供しますなどの変数（DRM など）情報構成の再試行、リクエストハンドラの実行を cast.framework.PlaybackConfig。この情報は PlayerManager プレーヤーの作成時に評価されます。プレーヤーが作成される新しい読み込みが Web Receiver SDK に渡されるたびに行われます。プレーヤーの作成後の PlaybackConfig は、表示されます。SDK には、ソースコードを変更するための次のメソッドが PlaybackConfig。

CastReceiverOptions.playbackConfig デフォルトの構成オプションをオーバーライドして、 CastReceiverContext。
PlayerManager.getPlaybackConfig() 現在の構成を取得します。
PlayerManager.setPlaybackConfig() 現在の構成をオーバーライドします。この設定はすべてのオーバーライドされなくなるまで続きます。
PlayerManager.setMediaPlaybackInfoHandler() 読み込まれるメディアアイテムにのみ追加の設定を適用する現在の構成の最上位に置くことができます。プレーヤーの直前にハンドラが呼び出されるあります。ここで行った変更は永続的なものではなく、クエリには含まれません getPlaybackConfig() に送信します。次のメディアアイテムが読み込まれると、このハンドラは再度呼び出されます。

次の例は、初期化時に PlaybackConfig を設定する方法を示しています。 CastReceiverContext。この構成は、マニフェストを取得する方法を学びました。ハンドラでは、CORS アクセスコントロールリクエストが Cookie や認証ヘッダーなどの認証情報を使用して作成する必要があります。

const playbackConfig = new cast.framework.PlaybackConfig();
playbackConfig.manifestRequestHandler = requestInfo => {
  requestInfo.withCredentials = true;
};
context.start({playbackConfig: playbackConfig});

以下の例は、ゲッターを使用して PlaybackConfig をオーバーライドする方法を示しています。 PlayerManager で提供されるセッターとセッター。この設定では、プレーヤーが 1 セグメントが読み込まれた後にコンテンツの再生を再開する。

const playerManager =
    cast.framework.CastReceiverContext.getInstance().getPlayerManager();
const playbackConfig = (Object.assign(
            new cast.framework.PlaybackConfig(), playerManager.getPlaybackConfig()));
playbackConfig.autoResumeNumberOfSegments = 1;
playerManager.setPlaybackConfig(playbackConfig);

次の例は、特定の負荷の PlaybackConfig をオーバーライドする方法を示しています。メディア再生情報ハンドラを使用してリクエストを実行します。ハンドラがアプリケーションメソッド getLicenseUrlForMedia を実装し、licenseUrl を現在のアイテムの contentId。

playerManager.setMediaPlaybackInfoHandler((loadRequestData, playbackConfig) => {
  const mediaInformation = loadRequestData.media;
  playbackConfig.licenseUrl = getLicenseUrlForMedia(mediaInformation.contentId);

  return playbackConfig;
});

イベントリスナー

Web Receiver SDK を使用すると、Web Receiver アプリでプレーヤーイベントを処理できます。「イベントリスナーは cast.framework.events.EventType パラメータ（またはこれらのパラメータの配列）で、リスナーがトリガーされます。次の事前構成された配列デバッグに役立つ cast.framework.events.EventType は次の場所にあります。 cast.framework.events.category。イベントパラメータは、イベントに関する追加情報を提供します。

たとえば、問題が発生したときに mediaStatus 次のロジックを使用して、変更のブロードキャストを event:

const playerManager =
    cast.framework.CastReceiverContext.getInstance().getPlayerManager();
playerManager.addEventListener(
    cast.framework.events.EventType.MEDIA_STATUS, (event) => {
      // Write your own event handling code, for example
      // using the event.mediaStatus value
});

メッセージインターセプト

Web Receiver SDK を使用すると、Web Receiver アプリがメッセージやそれらのメッセージに対してカスタムコードを実行します。メッセージインターセプタは、 cast.framework.messages.MessageType パラメータで、インターセプトするメッセージの種類を指定します。

インターセプタは、変更されたリクエスト、または新しいリクエストの値を返します。null を返すと、使用します。詳しくは、メディアの読み込みをご覧ください。

たとえば、読み込みリクエストデータを変更する場合は、インターセプトして変更します。

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

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      const error = new cast.framework.messages.ErrorData(
                      cast.framework.messages.ErrorType.LOAD_FAILED);
      if (!loadRequestData.media) {
        error.reason = cast.framework.messages.ErrorReason.INVALID_PARAM;
        return error;
      }

      if (!loadRequestData.media.entity) {
        return loadRequestData;
      }

      return thirdparty.fetchAssetAndAuth(loadRequestData.media.entity,
                                          loadRequestData.credentials)
        .then(asset => {
          if (!asset) {
            throw cast.framework.messages.ErrorReason.INVALID_REQUEST;
          }

          loadRequestData.media.contentUrl = asset.url;
          loadRequestData.media.metadata = asset.metadata;
          loadRequestData.media.tracks = asset.tracks;
          return loadRequestData;
        }).catch(reason => {
          error.reason = reason; // cast.framework.messages.ErrorReason
          return error;
        });
    });

context.start();

エラー処理

メッセージインターセプタでエラーが発生した場合、Web Receiver アプリは適切な cast.framework.messages.ErrorType および cast.framework.messages.ErrorReason。

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      const error = new cast.framework.messages.ErrorData(
                      cast.framework.messages.ErrorType.LOAD_CANCELLED);
      if (!loadRequestData.media) {
        error.reason = cast.framework.messages.ErrorReason.INVALID_PARAM;
        return error;
      }

      ...

      return fetchAssetAndAuth(loadRequestData.media.entity,
                               loadRequestData.credentials)
        .then(asset => {
          ...
          return loadRequestData;
        }).catch(reason => {
          error.reason = reason; // cast.framework.messages.ErrorReason
          return error;
        });
    });

メッセージインターセプトとイベントリスナー

メッセージインターセプトとイベントリスナーの主な違いは次のとおりです。次のようになります。

イベントリスナーではリクエストデータを変更できません。
イベントリスナーは、分析またはカスタム関数をトリガーするのに最適です。

で確認できます。

playerManager.addEventListener(cast.framework.events.category.CORE,
    event => {
        console.log(event);
    });

メッセージインターセプトを使用すると、メッセージをリッスンしてインターセプトし、リクエストデータそのものを変更できます。
メッセージインターセプトは、次に関するカスタムロジックを処理するのに最適です。リクエストデータです。

メディアの読み込み

MediaInformation イベントでメディアを読み込むための多数のプロパティが entity を含む cast.framework.messages.MessageType.LOAD 件のメッセージ、 contentUrl、contentId。

entity は、実装で使用することが推奨されるプロパティです。受信できます。このプロパティはディープリンク URL で、再生リストか、コンテンツを配信していますアプリケーションでこの URL を解析し、残りの 2 つのフィールドの少なくとも 1 つは必ず入力してください
contentUrl が、コンテンツの読み込みに使用する再生可能 URL に対応します。たとえば、この URL が DASH マニフェストを指します。
contentId 再生可能なコンテンツの URL（contentUrl のものと同様のもの）を指定できます。プロパティ）か、読み込まれるコンテンツまたは再生リストの一意の識別子です。このプロパティを識別子として使用する場合は、アプリケーションで contentUrl 内のプレイアブル URL。

entity を使用して実際の ID またはキーパラメータを保存することをおすすめします。メディアの URL には contentUrl を使用します。この例を次のスニペットでは、LOAD リクエストに entity が存在し、プレイアブル contentUrl を取得します。

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      ...

      if (!loadRequestData.media.entity) {
        // Copy the value from contentId for legacy reasons if needed
        loadRequestData.media.entity = loadRequestData.media.contentId;
      }

      return thirdparty.fetchAssetAndAuth(loadRequestData.media.entity,
                                          loadRequestData.credentials)
        .then(asset => {
          loadRequestData.media.contentUrl = asset.url;
          ...
          return loadRequestData;
        });
    });

デバイスの機能

「 getDeviceCapabilities メソッドを使用すると、接続されているキャストデバイスに関するデバイス情報や、接続されています。getDeviceCapabilities メソッドは Google アシスタント、Bluetooth、接続されたディスプレイやオーディオに関する情報できます。

このメソッドはオブジェクトを返します。このオブジェクトは、その列挙型のデバイス機能を取得するため。列挙型は定義 cast.framework.system.DeviceCapabilities。

この例では、ウェブレシーバーデバイスが HDR を再生できるかどうかを確認します。 IS_HDR_SUPPORTED キーと IS_DV_SUPPORTED キーを備えた DolbyVision（DV）できます。

const context = cast.framework.CastReceiverContext.getInstance();
context.addEventListener(cast.framework.system.EventType.READY, () => {
  const deviceCapabilities = context.getDeviceCapabilities();
  if (deviceCapabilities &&
      deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_HDR_SUPPORTED]) {
    // Write your own event handling code, for example
    // using the deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_HDR_SUPPORTED] value
  }
  if (deviceCapabilities &&
      deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_DV_SUPPORTED]) {
    // Write your own event handling code, for example
    // using the deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_DV_SUPPORTED] value
  }
});
context.start();

ユーザー操作の処理

ユーザーは、送信者を介して Web Receiver アプリケーションを操作できますアプリ（ウェブ、Android、iOS）、アシスタント搭載の音声コマンドデバイス、スマートディスプレイのタップ操作、Android TV のリモコンできます。Cast SDK には、ウェブレシーバーアプリで以下を可能にするさまざまな API が用意されています。更新するには、API を介してアプリケーション UI をユーザー行動の状態必要に応じて変更を送信してバックエンドサービスを更新します。

サポートされているメディアコマンド

UI コントロールの状態は、 MediaStatus.supportedMediaCommands 送信側拡張コントローラ、受信機、リモコン（iOS および Android 向け）タッチデバイスで動作するアプリ、Android TV デバイスのレシーバアプリなどがあります。特定の特定のビット単位の Command がプロパティで有効になっている場合、そのアクションに関連するものが有効になりますこの値が設定されていない場合、ボタンは無効です。これらの値は、Web Receiver で次の方法で変更できます。

使用 PlayerManager.setSupportedMediaCommands アラートの取り込み時に Commands
を使用した新しいコマンドの追加 addSupportedMediaCommands
以下を使用して既存のコマンドを削除する removeSupportedMediaCommands。

playerManager.setSupportedMediaCommands(cast.framework.messages.Command.SEEK |
  cast.framework.messages.Command.PAUSE);

レシーバーは、更新された MediaStatus を準備するときに、 supportedMediaCommands プロパティの変更を見つけます。ステータスが接続されている送信アプリは UI 内のボタンを更新します。必要があります。

サポートされているメディアコマンドとタッチデバイスについて詳しくは、以下をご覧ください。 Accessing UI controls ご覧ください

ユーザーの操作の状態を管理する

ユーザーは、UI を操作したり、音声コマンドを送信したりする際に、コンテンツの再生と、再生中のアイテムに関連するプロパティ。リクエスト数 SDK によって自動的に処理されます。次のリクエスト現在再生中のアイテムのプロパティの変更（LIKE コマンドなど）受信側のアプリで処理する必要があります。この SDK にはこれらのタイプのリクエストを処理できます。これらのリクエストをサポートするため、必要があります。

MediaInformation を設定する userActionStates ユーザー設定と関連付けられます。
USER_ACTION メッセージをインターセプトし、リクエストされたアクションを特定します。
MediaInformation UserActionState を更新して UI を更新します。

で確認できます。

次のスニペットは、LOAD リクエストをインターセプトして、 LoadRequestData さんの MediaInformation。この場合、ユーザーは表示されます。

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, (loadRequestData) => {
      const userActionLike = new cast.framework.messages.UserActionState(
          cast.framework.messages.UserAction.LIKE);
      loadRequestData.media.userActionStates = [userActionLike];

      return loadRequestData;
    });

次のスニペットは、USER_ACTION メッセージをインターセプトして、バックエンドに送信されます。その後、更新するために呼び出しを行い、レシーバーに対する UserActionState。

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.USER_ACTION,
  (userActionRequestData) => {
    // Obtain the media information of the current content to associate the action to.
    let mediaInfo = playerManager.getMediaInformation();

    // If there is no media info return an error and ignore the request.
    if (!mediaInfo) {
        console.error('Not playing media, user action is not supported');
        return new cast.framework.messages.ErrorData(messages.ErrorType.BAD_REQUEST);
    }

    // Reach out to backend services to store user action modifications. See sample below.
    return sendUserAction(userActionRequestData, mediaInfo)

    // Upon response from the backend, update the client's UserActionState.
    .then(backendResponse => updateUserActionStates(backendResponse))

    // If any errors occurred in the backend return them to the cast receiver.
    .catch((error) => {
      console.error(error);
      return error;
    });
});

次のスニペットは、バックエンドサービスへの呼び出しをシミュレートします。この関数は UserActionRequestData: ユーザーがリクエストした変更のタイプを確認するアクションがバックエンドでサポートされている場合にのみ、ネットワーク呼び出しを行います。

function sendUserAction(userActionRequestData, mediaInfo) {
  return new Promise((resolve, reject) => {
    switch (userActionRequestData.userAction) {
      // Handle user action changes supported by the backend.
      case cast.framework.messages.UserAction.LIKE:
      case cast.framework.messages.UserAction.DISLIKE:
      case cast.framework.messages.UserAction.FOLLOW:
      case cast.framework.messages.UserAction.UNFOLLOW:
      case cast.framework.messages.UserAction.FLAG:
      case cast.framework.messages.UserAction.SKIP_AD:
        let backendResponse = {userActionRequestData: userActionRequestData, mediaInfo: mediaInfo};
        setTimeout(() => {resolve(backendResponse)}, 1000);
        break;
      // Reject all other user action changes.
      default:
        reject(
          new cast.framework.messages.ErrorData(cast.framework.messages.ErrorType.INVALID_REQUEST));
    }
  });
}

次のスニペットは、UserActionRequestData を受け取って、 MediaInformation から UserActionState を削除します。更新 MediaInformation の UserActionState は、がリクエストされたアクションに関連付けられています。この変更はスマートディスプレイコントロール UI、リモコンアプリ、Android TV UI。また、送信 MediaStatus メッセージを介してブロードキャストされ、 iOS と Android の送信者向けの拡張コントローラ。

function updateUserActionStates(backendResponse) {
  // Unwrap the backend response.
  let mediaInfo = backendResponse.mediaInfo;
  let userActionRequestData = backendResponse.userActionRequestData;

  // If the current item playing has changed, don't update the UserActionState for the current item.
  if (playerManager.getMediaInformation().entity !== mediaInfo.entity) {
    return;
  }

  // Check for existing userActionStates in the MediaInformation.
  // If none, initialize a new array to populate states with.
  let userActionStates = mediaInfo.userActionStates || [];

  // Locate the index of the UserActionState that will be updated in the userActionStates array.
  let index = userActionStates.findIndex((currUserActionState) => {
    return currUserActionState.userAction == userActionRequestData.userAction;
  });

  if (userActionRequestData.clear) {
    // Remove the user action state from the array if cleared.
    if (index >= 0) {
      userActionStates.splice(index, 1);
    }
    else {
      console.warn("Could not find UserActionState to remove in MediaInformation");
    }
  } else {
    // Add the UserActionState to the array if enabled.
    userActionStates.push(
      new cast.framework.messages.UserActionState(userActionRequestData.userAction));
  }

  // Update the UserActionState array and set the new MediaInformation
  mediaInfo.userActionStates = userActionStates;
  playerManager.setMediaInformation(mediaInfo, true);
  return;
}

音声コマンド

現在、Web Receiver SDK for アシスタント搭載デバイスこれらのコマンドのデフォルトの実装は次のとおりです。検出 cast.framework.PlayerManager。

コマンド	説明
再生	一時停止状態から再生または再開します。
一時停止	再生中のコンテンツを一時停止します。
前へ	メディアキュー内の前のメディアアイテムにスキップします。
次へ	メディアキュー内の次のメディアアイテムにスキップします。
停止	現在再生中のメディアを停止します。
繰り返しなし	キューの最後のアイテムの再生が完了したら、キュー内のメディアアイテムの繰り返しを無効にします。
シングルを繰り返す	現在再生中のメディアを無限に繰り返します。
全曲リピート	キューの最後のアイテムが再生されたら、キュー内のすべてのアイテムを繰り返します。
全曲リピートとシャッフル	キューの最後のアイテムの再生が終わったら、キューをシャッフルして、キュー内のすべてのアイテムを繰り返します。
シャッフル	メディアキュー内のメディアアイテムをシャッフルします。注: `LOAD` メッセージの `loadRequestData` で `shuffle` フラグが設定されている場合は、再生前にメディアをシャッフルすることもできます。
字幕のオン / オフ	メディアの字幕を有効または無効にします。有効化 / 無効化は言語別に設定することもできます。
絶対時間までシークする	指定された絶対時間にジャンプします。
現在の時刻を基準とした時刻にシークする	現在の再生時間を基準として、指定された時間だけ前または後に移動します。
もう一度プレイ	現在再生中のメディアを再起動するか、現在何も再生中でない場合は、最後に再生したメディアアイテムを再生します。
再生速度を設定する	メディアの再生速度を変える。これはデフォルトで処理されます。`SET_PLAYBACK_RATE` メッセージインターセプタを使用して、受信レートのリクエストをオーバーライドできます。

音声でサポートされているメディアコマンド

音声コマンドでアシスタントのメディアコマンドをトリガーできないようにするには: 設定するには、まずサポートされているメディアコマンド確認する必要があります次に、これらのコマンドを強制的に適用するために、 CastReceiverOptions.enforceSupportedCommands プロパティです。Cast SDK センダーとタップ対応デバイスの UI が自動的に適用されます。フラグが有効になっていない場合、着信音声は実行されます。

たとえば、送信者のアプリから PAUSE を許可すると、設定が反映されるようにレシーバーも構成する必要があります。設定。構成すると、受信する音声コマンドはすべて破棄されます使用できます。

以下の例では、起動時に CastReceiverOptions を指定しています。 CastReceiverContext。PAUSE コマンドのサポートが追加され、そのコマンドのみをサポートするようプレーヤーに強制されます。これで、音声コマンドが SEEK などの別のオペレーションをリクエストした場合は、拒否されます。ユーザーはコマンドがまだサポートされていないことが通知されます。

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

context.start({
  enforceSupportedCommands: true,
  supportedCommands: cast.framework.messages.Command.PAUSE
});

制限するコマンドごとに個別のロジックを適用できます。削除 enforceSupportedCommands フラグと、使用するコマンドごとに制限を設定すると、着信メッセージをインターセプトできます。ここでは、リクエストをインターセプトして、これにより、アシスタント搭載デバイスに対して SEEK コマンドを発行できるようになります。 Web Receiver アプリケーションでシークをトリガーしません。

アプリケーションがサポートしていないメディアコマンドについては、エラーの原因（例: NOT_SUPPORTED。

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.SEEK,
  seekData => {
    // Block seeking if the SEEK supported media command is disabled
    if (!(playerManager.getSupportedMediaCommands() & cast.framework.messages.Command.SEEK)) {
      let e = new cast.framework.messages.ErrorData(cast.framework.messages.ErrorType
      .INVALID_REQUEST);
      e.reason = cast.framework.messages.ErrorReason.NOT_SUPPORTED;
      return e;
    }

    return seekData;
  });

音声アクティビティによるバックグラウンド処理

アシスタントによってキャストプラットフォームがアプリの音声をバックグラウンドにしている場合ユーザーの会話を聴いたり、返事をもらったりするといったアクティビティは、 FocusState メッセージ NOT_IN_FOCUS が、ウェブレシーバーアプリケーションに送信されると、アクティビティが開始されます。アクティビティが終了すると、IN_FOCUS を含む別のメッセージが送信されます。アプリケーションや再生中のメディアに応じて、 FocusState が NOT_IN_FOCUS のときにメッセージをインターセプトしてメディアを一時停止するタイプ FOCUS_STATE。

たとえば、オーディオブックの再生を一時停止しておくと、ユーザーエクスペリエンスに優れています。アシスタントがユーザーのクエリに応答しています。

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.FOCUS_STATE,
  focusStateRequestData => {
    // Pause content when the app is out of focus. Resume when focus is restored.
    if (focusStateRequestData.state == cast.framework.messages.FocusState.NOT_IN_FOCUS) {
      playerManager.pause();
    } else {
      playerManager.play();
    }

    return focusStateRequestData;
  });

音声指定の字幕言語

ユーザーが字幕の言語を明示的に指定しなかった場合、字幕に使用される言語は、コマンドを話しかけた言語と同じ言語です。このような場合、 isSuggestedLanguage 受信メッセージのパラメータは、関連付けられた言語がユーザーが明示的に要求した場合は

たとえば、「OK Google,isSuggestedLanguagetrue 字幕をオンにして」言語から推測されたため、コマンドが話されました。言語が明示的にリクエストされている場合は、英語の字幕をオンにして」isSuggestedLanguage は false に設定されています。

メタデータと音声のキャスト

音声コマンドはデフォルトで Web Receiver で処理されますが、コンテンツのメタデータが完全かつ正確であることを確認できます。これにより音声コマンドがアシスタントによって適切に処理されていること、メタデータが Google Home アプリのような新しいタイプのインターフェースで適切に表示されるスマートディスプレイのように使用しています。

ストリーミング転送

セッション状態の保持はストリーム転送の基礎であり、音声コマンドや Google Home を使って、既存の音声ストリームや動画ストリームをデバイス間で移動できます。アプリ、スマートディスプレイ。メディアの再生を別のデバイス（ソース）で停止し、別のデバイス（ソース）で続行するあります。最新のファームウェアを搭載したキャストデバイスは、デバイスのソースまたは宛先として機能できます。ストリーム転送

ストリーム転送のイベントフローは次のとおりです。

ソースデバイスで次の操作を行います。 <ph type="x-smartling-placeholder">
1. メディアの再生が停止します。
2. Web Receiver アプリケーションが現在のメディアを保存するコマンドを受信するあります。
3. Web Receiver アプリケーションがシャットダウンされます。
移行先デバイスで次の操作を行います。 <ph type="x-smartling-placeholder">
1. Web Receiver アプリケーションが読み込まれます。
2. Web Receiver アプリケーションが、保存済みメディアを復元するコマンドを受信するあります。
3. メディアの再生を再開します。

メディア状態の要素には次のものがあります。

曲、動画、メディアアイテムの特定の位置またはタイムスタンプ。
より幅広いキュー（プレイリストやアーティストラジオなど）に入れられます。
認証されたユーザー。
再生状態（再生、一時停止など）。

ストリーム転送を有効にする

Web Receiver にストリーム転送を実装するには:

更新 supportedMediaCommands STREAM_TRANSFER コマンドに置き換えます。

playerManager.addSupportedMediaCommands(
cast.framework.messages.Command.STREAM_TRANSFER, true);

必要に応じて、SESSION_STATE メッセージと RESUME_SESSION メッセージをオーバーライドするインターセプタ（セッションの保持確認します。これらをオーバーライドするのは、カスタムデータが必要な場合にのみセッションスナップショットの一部として保存されますそれ以外の場合は、デフォルトのセッション状態を保持するための実装が、ストリーム転送をサポートします。

セッション状態の保持

Web Receiver SDK には、Web Receiver アプリのデフォルト実装が現在のメディアステータスのスナップショットを取得して、読み込みリクエストにステータスを変換し、読み込みリクエストでセッションを再開します。

Web Receiver によって生成された読み込みリクエストは、 SESSION_STATE メッセージインターセプタ（必要な場合）。カスタムデータを追加する場合は読み込む場合は、それらを loadRequestData.customData。

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SESSION_STATE,
    function (sessionState) {
        // Override sessionState.loadRequestData if needed.
        const newCredentials = updateCredentials_(sessionState.loadRequestData.credentials);
        sessionState.loadRequestData.credentials = newCredentials;

        // Add custom data if needed.
        sessionState.loadRequestData.customData = {
            'membership': 'PREMIUM'
        };

        return sessionState;
    });

カスタムデータは loadRequestData.customData RESUME_SESSION メッセージインターセプタで。

let cred_ = null;
let membership_ = null;

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.RESUME_SESSION,
    function (resumeSessionRequest) {
        let sessionState = resumeSessionRequest.sessionState;

        // Modify sessionState.loadRequestData if needed.
        cred_ = sessionState.loadRequestData.credentials;

        // Retrieve custom data.
        membership_ = sessionState.loadRequestData.customData.membership;

        return resumeSessionRequest;
    });

コンテンツのプリロード

ウェブレシーバーは、現在の再生後のメディアアイテムのプリロードをサポートします。キュー内のアイテムが表示されます。

プリロードオペレーションにより、いくつかのセグメントがあらかじめダウンロードされます。近日公開予定。仕様は preloadTime の値 QueueItem オブジェクト（指定しない場合のデフォルトは 20 秒）。時間は秒単位で表され、。正の値のみ有効です。たとえば、値が 10 秒の場合、このアイテムは 10 にプリロードされます。前のアイテムが終わる数秒前に表示されます。プリロード時間が長い場合 currentItem の残り時間よりも短いと、プリロードは考えていますそのため、queueItem でプリロードに非常に大きな値を指定した場合、現在のアイテムを再生しているときはいつでも、次のアイテムをプリロードできます。設定と選択はそのままにします帯域幅やストリーミングパフォーマンスに影響する可能性があるため、現在再生中のアイテムの現在の再生アイテムの

プリロードは、HLS、DASH、スムーズストリーミングコンテンツでデフォルトで機能します。

通常の MP4 動画や音声ファイル（MP3 など）は、キャストとしてプリロードされません。デバイスは 1 つのメディア要素のみをサポートします。既存のコンテンツアイテムがまだ再生中である。

カスタムメッセージ

メッセージ交換は、Web Receiver アプリケーションの重要なインタラクション方法です。

送信者は、Web Receiver に送信元 API を使用してメッセージを送ります。プラットフォーム（Android、iOS、ウェブ）。イベントオブジェクト（（メッセージのマニフェスト）がイベントリスナーに渡され、データが次のプロパティを受け取るデータ要素（event.data）イベントタイプを指定します。

Web Receiver アプリケーションでは、指定したインターネット経由のメッセージをリッスンすることも使用します。これにより、Web Receiver アプリケーションの Namespace プロトコルがサポートされているからです。その後は、接続している送信者がその名前空間で通信し、適切なプロトコルを使用します。

すべての名前空間は文字列で定義され、「urn:x-cast:」で始まる必要がありますその後に任意の文字列を続けます。たとえば「urn:x-cast:com.example.cast.mynamespace」

以下は、Web Receiver が送信元のカスタムメッセージをリッスンするコードスニペットです。接続されている送信者:

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

const CUSTOM_CHANNEL = 'urn:x-cast:com.example.cast.mynamespace';
context.addCustomMessageListener(CUSTOM_CHANNEL, function(customEvent) {
  // handle customEvent.
});

context.start();

同様に、Web Receiver アプリケーションは送信者に状態を通知できます。接続されている送信者にメッセージを送信できます。ウェブ受信機使用してメッセージを送信できます。 sendCustomMessage(namespace, senderId, message) オン CastReceiverContext。 Web Receiver は、特定のメッセージへの応答または返信として、アプリケーションの状態変化が原因です。ポイントツーポイントを超えて最大 64 KB までアップロードできるため、ウェブレシーバーはメッセージを接続されているすべての送信者。

オーディオ機器のキャスト

音声のサポートについては、オーディオ機器用 Google Cast ガイドをご覧ください。できます。

Android TV

このセクションでは、Google Web Receiver が入力を再生として使用し、 Android TV との互換性。

アプリケーションとリモコンの統合

Android TV デバイスで動作している Google Web Receiver が、テキスト入力からメディア再生としてのデバイスのコントロール入力（ハンドヘルドリモコン） urn:x-cast:com.google.cast.media Namespace に定義されたメッセージ（詳しくは、メディア再生メッセージをご覧ください。お客様のアプリケーションは、メディアアプリケーションを制御するために、 Android TV のコントロールから基本的な再生操作を行えるようにします。できます。

Android TV の互換性に関するガイドライン

おすすめの方法と一般的な注意点を以下にまとめました。アプリが Android TV に対応している場合:

user-agent 文字列には「Android」の両方が含まれることに注意してください。および「CrKey」モバイル専用サイトにリダイレクトされる場合もあります。これは、 Android指定します。「Android」はユーザーエージェント文字列の中身は常にはモバイルユーザーを示します。
Android のメディアスタックは、データの取得に透明な GZIP を使用することがあります。確認事項メディアデータは Accept-Encoding: gzip に応答できます。
Android TV の HTML5 メディアイベントは、これにより、Chromecast で隠れていた問題が明らかになる場合があります。
メディアを更新するときに、<audio>/<video> によって呼び出されたメディア関連イベントを使用する timeupdate、pause、waiting などの要素。ネットワークを使用しない progress、suspend、stalled などの関連イベント。プラットフォームに依存します。メディアイベントをご覧ください。をご覧ください。
受信側のサイトの HTTPS 証明書を設定するときは、中間 CA 証明書を使用できます。詳しくは、 Qualsys SSL テストページ検証: サイトの信頼できる認証パスに CA が含まれているかどうか「追加ダウンロード」のラベルが付いた証明書が Android ベースのデバイスで読み込まれないことがあります。説明します。
Chromecast の 720p グラフィックスプレーンにレシーバーページが表示されている間に、 Android TV などのキャストプラットフォームでは、最大 1080p でページを表示できます。必ず受信ページがさまざまな解像度で適切にスケーリングされるようにします。

カスタムのウェブレシーバー

Shaka プレーヤーの移行における HLS

カスタム ウェブ レシーバーに主要な機能を追加する

アプリケーションの構成とオプション

アプリケーションを構成する

プレーヤーを構成する

イベント リスナー

メッセージ インターセプト

エラー処理

メッセージ インターセプトとイベント リスナー

メディアの読み込み

デバイスの機能

ユーザー操作の処理

サポートされているメディア コマンド

ユーザーの操作の状態を管理する

音声コマンド

音声でサポートされているメディア コマンド

音声アクティビティによるバックグラウンド処理

音声指定の字幕言語

メタデータと音声のキャスト

ストリーミング転送

ストリーム転送を有効にする

セッション状態の保持

コンテンツのプリロード

カスタム メッセージ

オーディオ機器のキャスト

Android TV

アプリケーションとリモコンの統合

Android TV の互換性に関するガイドライン

カスタムウェブレシーバーに主要な機能を追加する

イベントリスナー

メッセージインターセプト

メッセージインターセプトとイベントリスナー

サポートされているメディアコマンド

音声でサポートされているメディアコマンド

カスタムメッセージ