ウェブ送信者アプリに高度な機能を追加する

ミッドロール挿入点

Web Sender SDK は、特定のメディア ストリーム内で広告ブレークとコンパニオン広告をサポートします。

ミッドロール挿入点の仕組みについて詳しくは、Web Receiver Ad Breaks の概要をご覧ください。

送信側と受信側の両方でブレークを指定できますが、プラットフォーム間で一貫した動作を維持するには Web ReceiverAndroid TV Receiver でブレークを指定することをおすすめします。

ウェブ上で、読み込みコマンドに BreakClipBreak を使用して広告ブレークを指定します。

let breakClip1 = new BreakClip('bc0');
breakClip1.title = 'Clip title'
breakClip1.posterUrl = 'https://www.some.url';
breakClip1.duration = 60;
breakClip.whenSKippable = 5;

let breakClip2 = ...
let breakClip3 = ...

let break1 = new Break('b0', ['bc0', 'bc1', 'bc2'], 10);

let mediaInfo = new chrome.cast.media.MediaInfo(<contentId>, '<contentType');
...
mediaInfo.breakClips = [breakClip1, breakClip2, breakClip3];
mediaInfo.breaks = [break1];

let request = new chrome.cast.media.LoadRequest(mediaInfo);

cast.framework.CastContext.getInstance().getCurrentSession().loadMedia(request)

Track API の使用

トラックは、テキスト(字幕)オブジェクト、または音声ストリームや動画ストリーム オブジェクトです。Tracks API を使用すると、アプリ内でこれらのオブジェクトを操作できます。

Track オブジェクトは、SDK 内のトラックを表します。次のように、トラックを設定して一意の ID を割り当てることができます。

var englishSubtitle = new chrome.cast.media.Track(1, // track ID
  chrome.cast.media.TrackType.TEXT);
englishSubtitle.trackContentId = 'https://some-url/caption_en.vtt';
englishSubtitle.trackContentType = 'text/vtt';
englishSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
englishSubtitle.name = 'English Subtitles';
englishSubtitle.language = 'en-US';
englishSubtitle.customData = null;

var frenchSubtitle = new chrome.cast.media.Track(2, // track ID
  chrome.cast.media.TrackType.TEXT);
frenchSubtitle.trackContentId = 'https://some-url/caption_fr.vtt';
frenchSubtitle.trackContentType = 'text/vtt';
frenchSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
frenchSubtitle.name = 'French Subtitles';
frenchSubtitle.language = 'fr';
frenchSubtitle.customData = null;

var frenchAudio = new chrome.cast.media.Track(3, // track ID
  chrome.cast.media.TrackType.AUDIO);
frenchAudio.trackContentId = 'trk0001';
frenchAudio.trackContentType = 'audio/mp3';
frenchAudio.subtype = null;
frenchAudio.name = 'French Audio';
frenchAudio.language = 'fr';
frenchAudio.customData = null;

メディア アイテムには複数のトラックを含めることができます。たとえば、複数の字幕(異なる言語用)や複数の代替音声ストリーム(異なる言語用)を用意できます。

MediaInfo は、メディア アイテムをモデル化するクラスです。Track オブジェクトのコレクションをメディア アイテムに関連付けるには、tracks プロパティを更新します。この関連付けは、メディアがレシーバーに読み込む前に行う必要があります。

var tracks = [englishSubtitle, frenchSubtitle, frenchAudio];
var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
mediaInfo.contentType = 'video/mp4';
mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
mediaInfo.customData = null;
mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED;
mediaInfo.textTrackStyle = new chrome.cast.media.TextTrackStyle();
mediaInfo.duration = null;
mediaInfo.tracks = tracks;

アクティブなトラックは、メディア activeTrackIds リクエストで設定できます。

メディアの読み込み後にメディア アイテムに関連付けられた 1 つ以上のトラックを有効にするには、EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) を呼び出して、有効にするトラックの ID を opt_activeTrackIds に渡します。どちらのパラメータも省略可能であり、どのアクティブなトラックまたはスタイルを設定するかは、自身の判断で選択できます。たとえば、フランス語の字幕(2)とフランス語の音声(3)を有効にする方法は次のとおりです。

var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

現在のメディアからすべての音声トラックまたは動画トラックを削除するには、mediaInfo.tracks=null(空の配列)を設定して、メディアを再読み込みします。

現在のメディアからすべてのテキスト トラックを削除するには(字幕をオフにするなど)、次のいずれかを行います。

  • 音声トラックを含むように [3] のみが含まれるように、var activeTrackIds = [2, 3]; を更新します。
  • mediaInfo.tracks=null を設定します。テキスト キャプション(track.hidden)をオフにするには、メディアを再読み込みする必要はありません。以前に有効にした trackId を含まない activeTracksId 配列を送信すると、テキスト トラックが無効になります。

テキスト トラックのスタイル設定

TextTrackStyle は、テキスト トラックのスタイル情報をカプセル化するオブジェクトです。既存の TextTrackStyle オブジェクトを作成または更新した後、次のように editTrackInfo メソッドを呼び出して、現在再生中のメディア アイテムにオブジェクトを適用できます。

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

コールバックの結果(成功またはエラー)を使用してリクエストのステータスを追跡し、それに応じて元の送信者を更新できます。

アプリは、システムやアプリ自体の設定を使用して、ユーザーがテキスト トラックのスタイルを更新できるようにする必要があります。

以下のテキスト トラックのスタイル要素のスタイルを設定できます。

  • 前景(テキスト)の色と不透明度
  • 背景の色と透明度
  • エッジの種類
  • エッジの色
  • フォント スケール
  • フォントファミリー
  • フォント スタイル

たとえば、次のように、テキストの色を不透明度 75% で赤色に設定します。

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
textTrackStyle.foregroundColor = '#80FF0000';

音量調節

レシーバの音量を設定するには、RemotePlayerRemotePlayerController を使用します。

function changeVolume(newVolume) {
  player.volumeLevel = newVolume;
  playerController.setVolume();
  // Update sender UI to reflect change
}

送信アプリは、音量調整について以下のガイドラインに従う必要があります。

  • 送信者の UI で必ずレシーバーとの同期が行われ、送信者の UI でレシーバーごとのボリュームが報告されるようになります。送信者のボリュームを維持するには、RemotePlayerEventType.VOLUME_LEVEL_CHANGED コールバックと RemotePlayerEventType.IS_MUTED_CHANGED コールバックを使用します。詳しくは、ステータスの更新をご覧ください。
  • 送信アプリは、アプリが特定の読み込み時に音量を設定することも、受信側のデバイスに着信音またはメディアの音量を設定することもできません。

設計チェックリスト送信者の音量コントロールをご覧ください。

受信者へのメディア メッセージの送信

Media Messages は、送信者から受信者に送信できます。たとえば、SKIP_AD メッセージをレシーバに送信するには、次のようにします。

// Get a handle to the skip button element
const skipButton = document.getElementById('skip');
skipButton.addEventListener("click", function() {
  if (castSession) {
    const media = castSession.getMediaSession();
    castSession.sendMessage('urn:x-cast:com.google.cast.media', {
      type: 'SKIP_AD',
      requestId: 1,
      mediaSessionId: media.mediaSessionId
    });
  }
});

最新状況

複数の送信者が同じ受信者に接続されている場合、他の送信者から変更が開始されても、各送信者は受信者の変更を認識することが重要です。

そのため、アプリは必要なリスナーをすべて RemotePlayerController に登録する必要があります。現在のメディアの TextTrackStyle が変更されると、接続されているすべての送信者が通知され、現在のメディア セッションの対応するプロパティ(MediaInfo フィールドの activeTrackIdstextTrackStyle など)がコールバックで送信者に送信されます。この場合、レシーバー SDK は、新しいスタイルが前のスタイルと異なるかどうかを検証せず、接続されているすべての送信者を通知します。

進行状況インジケーター

ほとんどのアプリでは、再生位置を送信者に進行状況インジケーターを表示する必要があります。Cast API は Cast メディア プロトコルを使用するため、このシナリオやその他のシナリオで帯域幅の使用量が最適化されるため、独自のステータス同期を実装する必要はありません。API を使用したメディア再生の進行状況インジケーターを適切に実装するには、CastVideos-chrome サンプルアプリをご覧ください。

CORS の要件

アダプティブ メディア ストリーミングの場合、Google Cast には CORS ヘッダーが必要ですが、Track が含まれている場合、単純な mp4 メディア ストリームでも CORS が必要です。任意のメディアでトラックを有効にする場合は、トラック ストリームとメディア ストリームの両方で CORS を有効にする必要があります。したがって、サーバー上のシンプルな mp4 メディアに CORS ヘッダーがなく、単純なサブタイトル トラックを追加した場合、適切な CORS ヘッダーを含めるようにサーバーを更新するまで、メディアをストリーミングできません。

ヘッダー Content-TypeAccept-EncodingRange が必要です。最後の 2 つのヘッダー、Accept-EncodingRange は、以前は使われなかった可能性のある追加のヘッダーです。

Access-Control-Allow-Origin ヘッダーにワイルドカード「*」を使用することはできません。ページに保護されたメディア コンテンツがある場合は、ワイルドカードではなくドメインを使用する必要があります。

ウェブページを再読み込みせずにセッションを再開する

既存の CastSession を再開するには、参加しようとしているセッションの sessionId を指定して requestSessionById(sessionId) を使用します。

sessionId は、loadMedia() を呼び出した後、getSessionId() を使用してアクティブな CastSession で確認できます。

おすすめの方法は次のとおりです。

  1. loadMedia() を呼び出してセッションを開始します。
  2. sessionId をローカルに保存する
  3. 必要に応じて requestSessionById(sessionId) を使用してセッションに再参加します。
let sessionId;

function rejoinCastSession() {
  chrome.cast.requestSessionById(sessionId);

  // Add any business logic to load new content or only resume the session
}

document.getElementById('play-button').addEventListener(("click"), function() {
  if (sessionId == null) {
    let castSession = cast.framework.CastContext.getInstance().getCurrentSession();
    if (castSession) {
      let mediaInfo = createMediaInfo();
      let request = new chrome.cast.media.LoadRequest(mediaInfo);
      castSession.loadMedia(request)

      sessionId = CastSession.getSessionId();
    } else {
      console.log("Error: Attempting to play media without a Cast Session");
    }
  } else {
    rejoinCastSession();
  }
});

次のステップ

これで、ウェブ送信者アプリに追加できる機能の説明は終わりです。別のプラットフォーム(Android または iOS)用の送信者アプリをビルドしたり、受信者アプリを構築したりできるようになりました。