1. 概要
この 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 呼び出しを行うために使用する必要があります。
[新しいアプリケーションを追加] をクリックします。
[Custom Receiver] を選択します。これが構築されます。
新しいレシーバーの詳細を入力します。最終ページ URL を入力してください。
最後のセクション。新しいレシーバーに割り当てられたアプリケーション ID をメモします。
また、公開前にレシーバー アプリにアクセスできるように、Google Cast デバイスを登録する必要があります。レシーバー アプリを公開すると、すべての Google Cast デバイスで使用できるようになります。この Codelab では、非公開レシーバ アプリケーションを操作することをおすすめします。
[Add new Device](新しいデバイスを追加)をクリックします。
キャスト デバイスの背面に印字されているシリアル番号を入力し、わかりやすい名前を付けます。シリアル番号は、Google Cast SDK Developer Console にアクセスする際に Chrome で画面をキャストして確認することもできます。
レシーバーとデバイスがテストの準備ができるまでに 5 ~ 15 分かかります。5 ~ 15 分待ってから、キャスト デバイスを再起動する必要があります。
5. シンプルなライブ配信のキャスト
この 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 を使用してカスタム レシーバ アプリケーションを作成する方法を学習しました。
詳しくは、ライブ ストリーミングのデベロッパー ガイドをご覧ください。