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

ウェブセンダーアプリに高度な機能を追加する

ミッドロール挿入点

Web Sender SDK は、Google 広告内での指定することもできます。

詳しくは、詳しくは、ウェブレシーバーのミッドロール挿入点の概要をご覧ください。この動画をご覧ください

挿入点は送信者と受信者のどちらにも指定できますが、通常は Web Receiver および Android TV Receiver: 把握することができます

ウェブでは、読み込みコマンドでミッドロール挿入点を指定します。 BreakClip および Break:

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;

メディアアイテムには複数のトラックを含めることができます。たとえば、1 つのテーブルに複数の字幕（それぞれ異なる言語に対応）または複数の代替音声ストリーム（さまざまな言語の場合）。

MediaInfo メディアアイテムをモデル化するクラスです。グループに 1 つ以上のコレクションを 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) opt_activeTrackIds で有効にするトラックの ID を渡します。注: どちらのパラメータも省略可能で、アクティブなトラックまたはスタイルを選択できます。自由に設定できます。たとえばこれはフランス語の字幕（2）とフランス語の音声（3）を有効にします。

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

現在のメディアから音声トラックや動画トラックをすべて削除するには、 mediaInfo.tracks=null（空の配列）を呼び出して、メディアを再読み込みします。

現在のメディアからすべてのテキストトラックを削除するには（例: 字幕など）を表示するには、次のいずれかを行います。

前述した var activeTrackIds = [2, 3]; を更新して、 [3] のみが含まれています。
mediaInfo.tracks=null を設定します。必ずしもテキストキャプション（track.hidden）をオフにするには、メディアを再読み込みしてください。次の値を含まない activeTracksId 配列を送信する。以前に有効になっていた trackId は、テキストトラックを無効にします。

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

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';

音量調節

こちらの RemotePlayer、 RemotePlayerController レシーバーの音量を設定します。

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

送信側アプリは、音量調節に関する以下のガイドラインに準拠する必要があります。

送信側アプリは受信側と同期して、受信側のアプリケーションが送信側の 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 クリックすると、接続されているすべての送信者に通知されます現在のメディアセッションに対応するプロパティ（の activeTrackIds と textTrackStyle MediaInfo フィールドがコールバックで送信者に送信されます。この場合レシーバー SDK はでは、新しいスタイルが以前のスタイルと異なるかどうかは検証されず、接続されているすべての送信者に通知されます。

進行状況インジケーター

送信側に進行状況インジケーターとともに再生場所を表示すると、要件があります。Cast API は、キャストメディアプロトコルを使用します。このシナリオを含むシナリオで帯域幅の消費が最適化されるため、独自のステータス同期を実装する必要はありません適切な実装のためには API を使用してメディア再生の進行状況インジケーターを表示する方法については、 CastVideos-chrome サンプルアプリ。

CORS の要件

アダプティブメディアストリーミングの場合、Google Cast には CORS ヘッダーが必要です。単純な mp4 メディアストリームでも Tracks が含まれる場合は CORS が必要です。もしすべてのメディアで Tracks を有効にするには、両方のトラックで CORS を有効にする必要がありますストリームとメディアストリームですCORS ヘッダーを利用できない場合はサーバー上のシンプルな mp4 メディア用ファイルを作成し、サーバーをアップデートしないとメディアをストリーミングできません。適切な CORS ヘッダーを含めます。

ヘッダー Content-Type、Accept-Encoding、Range が必要です。最後の 2 つのヘッダー、Accept-Encoding と Range は、使用できます。

ワイルドカード "*"Access-Control-Allow-Origin ヘッダーには使用できません。条件ページに保護されたメディアコンテンツがある場合は、使用できます。

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

既存の CastSession を再開するには、次のコマンドを使用します。 requestSessionById(sessionId) 参加しようとしているセッションの sessionId に置き換えます。

sessionId は、次を使用してアクティブな CastSession で見つけることができます。 getSessionId() 呼び出し後 loadMedia()。

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

発信 loadMedia() セッションを開始する
sessionId をローカルに保存する
次を使用してセッションを再参加します: 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）レシーバーアプリを作成します。

キャストの統合