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

Switch to English

キャストレシーバーにライブサポートを追加する

1. 概要

Google Cast ロゴ

この Codelab では、Cast Live Breaks API を使用するカスタムウェブレシーバーアプリの作成方法について説明します。

Google Cast とは

Google Cast では、ユーザーはモバイルデバイスからテレビにコンテンツをキャストできます。ユーザーは自分のモバイルデバイスをリモコンとして使い、テレビでのメディア再生を行うことが可能です。

Google Cast SDK を使うと、アプリを拡張してテレビやサウンドシステムを制御できます。Cast SDK を使用すると、Google Cast デザインチェックリストに基づいて必要な UI コンポーネントを追加できます。

Google Cast デザインチェックリストは、サポートされているすべてのプラットフォームにわたって、Cast ユーザーエクスペリエンスをシンプルで予測可能なものにするために使用します。

達成目標

この Codelab を修了すると、新しいライブ機能を活用するキャストレシーバーが完成します。

学習内容

キャストでライブ動画コンテンツを処理する方法
キャストでサポートされているさまざまなライブ配信シナリオの構成方法
ライブ配信に番組データを追加する方法

必要なもの

最新の Google Chrome ブラウザ
HTTPS ホスティングサービス（Firebase Hosting や ngrok など）。
Chromecast や Android TV など、インターネットにアクセスできる Google Cast デバイス。
HDMI 入力対応のテレビまたはモニター、または Google Home Hub

テスト

ウェブ開発に関する経験が必要です。
キャストセンダーとレシーバのアプリケーションを構築した経験

このチュートリアルの利用方法をお選びください。

通読するのみ

通読し、演習を行う

ウェブアプリの構築について評価してください。

初心者

中級

上級

2. サンプルコードを取得する

サンプルコードはすべてパソコンにダウンロードできます。

ダウンロードした ZIP ファイルを解凍します。

3. レシーバをローカルにデプロイする

ウェブデバイスでレシーバーをキャストデバイスで使用するには、キャストデバイスからアクセスできる場所にホストする必要があります。https 対応のサーバーをすでにお持ちの場合は、次のセクションで必要になるため、以下の手順をスキップして URL をメモしてください。

使用できるサーバーがない場合は、Firebase Hosting または ngrok を使用できます。

サーバーを実行する

必要なサービスを設定したら、app-start に移動して、サーバーを起動します。

ホストされているレシーバーの URL をメモします。次のセクションでこれを使用します。

4. Cast Developer Console でアプリを登録する

この Codelab で作成したカスタムレシーバーを Chromecast デバイスで実行するには、アプリを登録する必要があります。アプリケーションを登録すると、アプリケーション ID が返されます。アプリケーション ID は、レシーバアプリケーションを起動するなど、API 呼び出しを行うために使用する必要があります。

[新しいアプリを追加] ボタンがハイライト表示されている Google Cast SDK デベロッパーコンソールの画像

[新しいアプリケーションを追加] をクリックします。

[Custom Receiver] オプションがハイライト表示されている [New Receiver Application] 画面の画像

[Custom Receiver] を選択します。これが構築されます。

[受信者のアプリケーションの URL] 欄に入力している URL が表示されている [新しいカスタム受信者] 画面の画像

新しいレシーバーの詳細を入力します。最終ページ URL を入力してください。

最後のセクション。新しいレシーバーに割り当てられたアプリケーション ID をメモします。

また、公開前にレシーバーアプリにアクセスできるように、Google Cast デバイスを登録する必要があります。レシーバーアプリを公開すると、すべての Google Cast デバイスで使用できるようになります。この Codelab では、非公開レシーバアプリケーションを操作することをおすすめします。

[新しいデバイスを追加] ボタンがハイライトされた Google Cast SDK デベロッパーコンソールの画像

[Add new Device]（新しいデバイスを追加）をクリックします。

[キャストレシーバーデバイスの追加] ダイアログの画像

キャストデバイスの背面に印字されているシリアル番号を入力し、わかりやすい名前を付けます。シリアル番号は、Google Cast SDK Developer Console にアクセスする際に Chrome で画面をキャストして確認することもできます。

レシーバーとデバイスがテストの準備ができるまでに 5 ～ 15 分かかります。5 ～ 15 分待ってから、キャストデバイスを再起動する必要があります。

5. シンプルなライブ配信のキャスト

動画を再生している Android スマートフォンの画像。動画プレーヤーコントロールのセットのすぐ下に「リビングにキャストしています」というメッセージが表示されます。同じ動画を再生しているフルサイズの画面の画像

この Codelab を開始する前に、ライブデベロッパーガイドで新しいライブ機能の概要を確認することをおすすめします。

送信者の場合は、CAF Receiver デバッグツールを使用してキャストセッションを開始します。レシーバーは、ライブストリームの再生を自動的に開始するように設計されています。

レシーバーは、2 つのファイルで構成されます。キャストコンテキストを初期化する receiver.html という基本的な HTML ファイルと、キャストメディアプレーヤーのプレースホルダ。このファイルを変更する必要はありません。また、receiver.js というファイルもあり、これにはレシーバーのロジックがすべて含まれています。

まず、Chrome でウェブ送信者を開きます。Cast SDK Developer Console で指定したレシーバーアプリケーション ID を入力し、[設定] をクリックします。

レシーバーには、ストリームがライブであることを Cast Application Framework（CAF）に伝えるためのロジックを追加する必要があります。たいていの場合、必要なのは 1 行のコードだけです。receiver.js の負荷インターセプタに次のコード行を追加します。

request.media.streamType = cast.framework.messages.StreamType.LIVE;

ストリームの種類を LIVE に設定すると、CAF のライブ UI が有効になります。このシナリオでは、ストリームが結合されると、CAF は自動的にストリームのライブエッジにジャンプします。番組ガイドデータはまだ設定されていないため、シークバーはストリームのシーク可能な範囲の全編を表します。

変更を receiver.js に保存し、ページの任意の場所を右クリックして [キャスト] を選択して、ウェブの送信者でキャストセッションを開始します。ライブ配信がすぐに開始されます。

6. 番組ガイドデータの追加

CAF の新しいライブコンテンツサポートに、受信者と送信者のアプリケーションの画面に番組ガイドデータを表示するためのサポートが追加されました。コンテンツプロバイダは、エンドユーザーエクスペリエンスを向上させるため、特にテレビチャンネルのような長時間のライブ配信において、受信アプリに番組のメタデータを含めることを強くおすすめします。

単一のストリームに複数のプログラムのメタデータを CAF に提供できるようになりました。MediaMetadata オブジェクトで開始のタイムスタンプと期間を設定することで、レシーバーは、ストリーム内でのプレーヤーの現在位置に基づいて、送信者とレシーバーに表示されるメタデータを自動的に更新します。

// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;

この Codelab では、サンプルメタデータサービスを使用して、ライブ配信のメタデータを提供します。プログラムメタデータのリストを作成するには、まずコンテナを作成する必要があります。コンテナは、1 つのメディアストリームの MediaMetadata オブジェクトのリストを保持します。各 MediaMetadata オブジェクトは、コンテナ内の 1 つのセクションを表します。プレイヘッドが所定のセクションの境界内にあれば、そのメタデータは自動的にメディアステータスにコピーされます。次のコードを receiver.js ファイルに追加して、サービスからサンプルメタデータをダウンロードし、CAF にコンテナを提供します。

/**
 * Gets the current program guide data from our Google Cloud Function
 * @return {cast.framework.messages.MediaMetadata[]} Latest program guide data
 */
function loadGuideData() {
  return fetch(LIVE_MEDIA_METADATA_SERVICE_URI)
      .then((response) => response.json())
      .then(function(data) {
        const containerMetadata =
          new cast.framework.messages.ContainerMetadata();
        containerMetadata.sections = data;

        playerManager.getQueueManager().setContainerMetadata(containerMetadata);
      });
}

さらに、ロードインターセプタにガイドデータを読み込む関数の呼び出しを追加します。

loadGuideData();

receiver.js ファイルを保存し、キャストセッションを開始します。プログラムの開始時間、終了時間、タイトルがすべて画面に表示されます。

プレイヘッドがコンテナの新しいセクションに移動すると、レシーバーからすべての送信者に新しいメディアステータスメッセージが送信されます。そのため、常に最新のプログラム情報を取得できるように、メディアステータスインターセプタのコンテナメタデータを更新することをおすすめします。サンプルサービスでは、現在のプログラムのメタデータと次の 2 つのプログラムのメタデータを返します。ストリームのメタデータを更新するには、上記の例のように、新しいコンテナを作成して setContainerMetadata を呼び出します。

7. シークの無効化

ほとんどの動画ストリームは、複数の動画フレームを保持するセグメントで構成されます。特に指定のない限り、CAF では、ユーザーはこれらのセグメント内を移動することができます。シークを無効にするには、レシーバに 2 つのコードスニペットを追加します。

ロードインターセプターで、SEEK でサポートされているメディアコマンドを削除します。これにより、すべてのモバイル送信者インターフェースとタップインターフェースでシークが無効になります。

playerManager.removeSupportedMediaCommands(cast.framework.messages.Command.SEEK, true);

次に、音声コマンド内のストリームのスキップを視聴者に無効にする必要があります（例: 「OK Google, 60 秒戻って」）。音声によるシークを無効にするには、シークインターセプターを追加します。このインターセプタは、シークリクエストが行われるたびに呼び出されます。SEEK でサポートされているメディアコマンドが無効になっている場合、インターセプターはシークリクエストを拒否します。次のコードスニペットを receiver.js ファイルに追加します。

/**
 * Seek a seek interceptor is called whenever CAF receives a request to seek to
 * a different location in media. This interceptor can be used to modify that
 * seek request or disable seeking completely.
 * @param {cast.framework.messages.MessageType.SEEK} The message to intercept.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK,
    (seekData) => {
      // if the SEEK supported media command is disabled, block seeking
      if (!(playerManager.getSupportedMediaCommands() &
      cast.framework.messages.Command.SEEK)) {
        castDebugLogger.info(TAG, 'Seek blocked.');
        return null;
      }

      return seekData;
    }
);

receiver.js ファイルを保存し、キャストセッションを開始します。ライブ配信内でシークできなくなります。

8. 完了

最新の Cast Receiver SDK を使用してカスタムレシーバアプリケーションを作成する方法を学習しました。

詳しくは、ライブストリーミングのデベロッパーガイドをご覧ください。