Wenn Sie die Video Stitcher API für Ihr Projekt aktivieren möchten, wenden Sie sich an Ihren Kundenbetreuer oder an den Vertrieb, um weitere Informationen zu erhalten.

Diese Seite wurde von der Cloud Translation API übersetzt.

IMA DAI SDK für Chromecast verwenden

VOD-Streams wiedergeben, die bei der Google Cloud Video Stitcher API registriert sind

In diesem Leitfaden erfahren Sie, wie Sie mit dem IMA DAI SDK für CAF-Webempfänger eine Google Cloud-VOD-Stream-Sitzung anfordern und abspielen

Dieser Leitfaden erweitert das grundlegende Beispiel aus der dynamischen Anzeigenbereitstellung mit umfassendem für Streams, die bei der Google Cloud Video Stitcher API registriert sind.

Prüfen Sie, bevor Sie fortfahren, ob Ihr Streamingformat von CAF-Webempfängern unterstützt wird.

Informationen zur Einbindung in andere Plattformen oder zur Verwendung der clientseitigen IMA SDKs finden Sie unter Interactive Media Ads SDKs.

Hintergrund

Bevor Sie diesen Leitfaden verwenden, machen Sie sich mit der Webempfänger des Chromecast Application Framework Protokoll.

In diesem Leitfaden werden grundlegende Kenntnisse der CAF-Empfängerkonzepte vorausgesetzt, z. B. Nachrichten-Interceptors, MediaInformation-Objekte und die Verwendung des Cast Command and Control-Tools zum Emulieren eines CAF-Senders.

App-Komponenten und -Architektur

Die Implementierung der VOD-Streamswiedergabe mit der Google Cloud Video Stitcher API und dem IMA CAF Media Delivery SDK umfasst zwei Hauptkomponenten, wie in dieser Anleitung gezeigt:

VideoStitcherVodStreamRequest: Ein Objekt, das eine Streamanfrage für auf den Google-Servern.
StreamManager: Ein Objekt, das die Kommunikation zwischen dem Videostream und dem IMA DAI SDK verwaltet, z. B. das Auslösen von Tracking-Pings und das Weiterleiten von Stream-Ereignissen an den Publisher.

Google Cloud-Projekt einrichten

Gib die folgenden Variablen für die Verwendung im IMA SDK ein:

Ort: Die Google Cloud-Region, in der die VOD-Konfiguration erstellt wurde.

LOCATION
Projektnummer: Die Google Cloud-Projektnummer, für die Video Stitcher verwendet wird der API erstellen.

PROJECT_NUMBER
OAuth-Token: Das kurzlebige OAuth-Token eines Dienstkontos mit der Nutzerrolle „Video Stitcher“. Weitere Informationen zum Erstellen kurzlebiger Anmeldedaten für Dienstkonten

OAUTH_TOKEN
Network Code: Google Ad Manager-Netzwerkcode zum Anfordern von Anzeigen.

NETWORK_CODE

Anzeigen-Tag-URL: Ad Manager-URL des Anzeigen-Tags. Du kannst zum Testen das IMA-VMAP-Pre-Roll-Beispiel verwenden.

AD_TAG_URI
URL der Inhaltsquelle: Der URL-String des Stream-Manifests für deine VOD-Inhalte.

VOD_URI

Benutzerdefinierten Streamingempfänger einrichten

Zum Entwickeln eines benutzerdefinierten Streamingempfängers benötigen Sie Folgendes:

Ein Cast Developer Console-Konto mit Testgeräten auf einer Zulassungsliste.
Gehosteter Webempfänger App, die in Ihrer Cast Developer Console registriert ist und geändert werden kann, des Handbuchs gehostet werden.
Eine sendende App, die für die Verwendung deiner Webempfänger-App konfiguriert ist. Zum Zweck der In diesem Beispiel wird für das Handbuch die Funktion Cast-Befehl und -Steuerung als Absender festlegen.

Absender vorbereiten, Streamdaten an den Empfänger zu übergeben

Konfigurieren Sie zunächst Ihre Absender-App so, dass eine Ladeanfrage an Ihren Webempfänger gesendet wird. die die folgenden Felder im MediaInformation -Objekt enthält.

Feld Inhalt

contentId

Eine eindeutige Kennung für dieses Medienelement, wie in der Cast-Referenzdokumentation definiert. Diese ID darf nicht für mehrere Artikel in in derselben Medienwarteschlange.

CONTENT_ID

contentUrl

Optionale Sicherungsstream-URL, die wiedergegeben wird, wenn der Stream für die dynamische Anzeigenbereitstellung nicht geladen werden kann.

BACKUP_STREAM_URL

contentType

Optionaler Mime-Typ der URL des Back-up-Streams, der wiedergegeben werden soll, wenn der DAI-Stream nicht geladen werden kann.

BACKUP_STREAM_MIMETYPE

streamType

Das für diesen Wert verwendete Stringliteral oder die Konstante variiert je nach Absenderplattform.

VOD

customData

Das Feld customData enthält einen Schlüssel/Wert-Speicher mit zusätzlichen Pflichtfeldern. In diesem Fall enthält customData den Stream für die dynamische Anzeigenbereitstellung. die Sie erhoben haben.

Feld	Inhalt
`region`	`LOCATION`
`projectNumber`	`PROJECT_NUMBER`
`oAuthToken`	`OAUTH_TOKEN`
`networkCode`	`NETWORK_CODE`
`adTagUrl`	`AD_TAG_URI`
`contentSourceUrl`	`VOD_URI`

Hier sind einige Codebeispiele, die Ihnen den Einstieg erleichtern:

Web

Wenn du diese Werte für einen Cast-Websender konfigurieren möchtest, musst du zuerst einen MediaInfo mit den erforderlichen Daten ein und laden Sie Anfrage an den Webempfänger.

// Create mediaInfo object
const mediaInfo = new chrome.cast.media.MediaInfo("CONTENT_ID");
mediaInfo.contentUrl = "BACKUP_STREAM_URL";
mediaInfo.contentType = "BACKUP_STREAM_MIMETYPE";
mediaInfo.streamType = chrome.cast.media.StreamType.VOD;
mediaInfo.customData = {
region: "LOCATION",
projectNumber: "PROJECT_NUMBER",
oAuthToken: "OAUTH_TOKEN",
networkCode: "NETWORK_CODE",
adTagUrl: "AD_TAG_URI"
contentSourceUrl: "VOD_URI"
};

// Make load request to cast web receiver
const castSession = cast.framework.CastContext.getInstance().getCurrentSession();
const request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  () => { console.log('Load succeed'); },
  (errorCode) => { console.log('Error code: ' + errorCode); });

Android

Wenn du diese Werte für einen Cast-Websender konfigurieren möchtest, musst du zuerst einen Objekt MediaInfo mit den erforderlichen Daten ein und laden Sie Anfrage an den Webempfänger.

JSONObject customData = new JSONObject()
  .put("region", "LOCATION")
  .put("projectNumber", "PROJECT_NUMBER")
  .put("oAuthToken", "OAUTH_TOKEN")
  .put("networkCode", "NETWORK_CODE")
  .put("adTagUrl", "AD_TAG_URI")
  .put("contentSourceUrl", "VOD_URI");

MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
  .setContentUrl("BACKUP_STREAM_URL")
  .setContentType("BACKUP_STREAM_MIMETYPE")
  .setStreamType(MediaInfo.STREAM_TYPE_VOD)
  .setCustomData(customData)
  .build();

RemoteMediaClient remoteMediaClient = mCastSession.getRemoteMediaClient();
remoteMediaClient.load(new MediaLoadRequestData.Builder().setMediaInfo(mediaInfo).build());

iOS (Obj-C)

Wenn du diese Werte für einen Cast-Websender konfigurieren möchtest, musst du zuerst einen GCKMediaInformation mit den erforderlichen Daten ein und laden Sie Anfrage an den Webempfänger.

NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
  @"region": @"LOCATION",
  @"projectNumber": @"PROJECT_NUMBER",
  @"oAuthToken": @"OAUTH_TOKEN",
  @"networkCode": @"NETWORK_CODE",
  @"adTagUrl": @"AD_TAG_URI",
  @"contentSourceUrl": @"VOD_URI"
};

GCKMediaInformationBuilder *mediaInfoBuilder =
  [[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"BACKUP_STREAM_MIMETYPE";
mediaInfoBuilder.streamType = GCKMediaStreamTypeNone;
mediaInfoBuilder.customData = customData;
self.mediaInformation = [mediaInfoBuilder build];

GCKRequest *request = [self.sessionManager.currentSession.remoteMediaClient loadMedia:self.mediaInformation];
if (request != nil) {
  request.delegate = self;
}

iOS (Swift)

Wenn du diese Werte für einen Cast-Websender konfigurieren möchtest, musst du zuerst einen GCKMediaInformation mit den erforderlichen Daten ein und laden Sie Anfrage an den Webempfänger.

let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
  print("invalid mediaURL")
  return
}

let customData = [
  "region": "LOCATION",
  "projectNumber": "PROJECT_NUMBER",
  "oAuthToken": "OAUTH_TOKEN",
  "networkCode": "NETWORK_CODE",
  "adTagUrl": "AD_TAG_URI",
  "contentSourceUrl": "VOD_URI"
]

let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = "BACKUP_STREAM_MIMETYPE"
mediaInfoBuilder.streamType = GCKMediaStreamType.none
mediaInfoBuilder.customData = customData
mediaInformation = mediaInfoBuilder.build()

guard let mediaInfo = mediaInformation else {
  print("invalid mediaInformation")
  return
}

if let request = sessionManager.currentSession?.remoteMediaClient?.loadMedia(mediaInfo) {
  request.delegate = self
}

CAC-Tool

Wenn du diese Werte im Cast Command and Control-Tool konfigurieren möchtest, klicke auf den Tab „Load Media“ (Medien laden) und lege den Typ der benutzerdefinierten Ladeanfrage auf „LOAD“ fest. Ersetzen Sie dann die JSON-Daten im Textbereich. mit diesem JSON-Code:

{
  "media": {
    "contentId": "CONTENT_ID",
    "contentUrl": "BACKUP_STREAM_URL",
    "contentType": "BACKUP_STREAM_MIMETYPE",
    "streamType": "VOD",
    "customData": {
      "region": "LOCATION",
      "projectNumber": "PROJECT_NUMBER",
      "oAuthToken": "OAUTH_TOKEN",
      "networkCode": "NETWORK_CODE",
      "adTagUrl": "AD_TAG_URI",
      "contentSourceUrl": "VOD_URI"
    }
  }
}

Diese benutzerdefinierte Ladeanfrage kann an den Empfänger gesendet werden, um die restlichen Schritte zu testen.

Benutzerdefinierten CAF-Webempfänger erstellen

Erstelle einen benutzerdefinierten Webreceiver, wie im Leitfaden für benutzerdefinierte Webreceiver des CAF SDK beschrieben.

Der Code des Empfängers sollte wie folgt aussehen:

<html>
<head>
  <script
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance()
    castContext.start();
  </script>
</body>
</html>

IMA DAI SDK importieren und Player-Manager abrufen

Füge ein Script-Tag hinzu, um das IMA DAI SDK für CAF in deinen Webreceiver zu importieren, kurz nachdem das Script CAF geladen hat. Speichere dann im folgenden Script-Tag den Receiver-Kontext und den Player-Manager als Konstanten, bevor du den Receiver startest.

<html>
<head>
  <script
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();

    castContext.start();
  </script>
</body>
</html>

IMA Stream Manager initialisieren

Initialisiere den IMA Stream Manager.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    castContext.start();
  </script>
</body>
</html>

Stream Manager Load Interceptor erstellen

Bevor deine Medienelemente an CAF übergeben werden, erstelle deine Streamanfrage in einem LOAD-Nachrichten-Interceptor.

    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    /**
     * Creates a VOD stream request object for the Video Stitcher API.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {StreamRequest} an IMA stream request
     */
    const createStreamRequest = (castRequest) => { /* ... */};

    /**
     * Initates a DAI stream request for the final stream manifest.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
     */
    const createDAICastRequest = (castRequest) => {
        return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
          .then((castRequestWithStreamData) => {
            console.log('Successfully made DAI stream request.');
            return castRequestWithStreamData;
          })
          .catch((error) => {
            console.log('Failed to make DAI stream request.');
            // CAF will automatically fallback to the content URL
            // that it can read from the castRequest object.
            return castRequest;
          });
    };

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, createDAICastRequest);

    castContext.start();

Streamanfrage erstellen

Vervollständige die Funktion createStreamRequest, um eine VOD-Streamanfrage der Video Stitcher API basierend auf der CAF-Ladeanfrage zu erstellen.

    /**
     * Creates a VOD stream request object for the Video Stitcher API.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {StreamRequest} an IMA stream request
     */
    const createStreamRequest = (castRequest) => {
      const streamRequest = new google.ima.cast.dai.api.VideoStitcherVodStreamRequest();
      const customData = castRequest.media.customData;

      streamRequest.region = customData.region;
      streamRequest.projectNumber = customData.projectNumber;
      streamRequest.oAuthToken = customData.oAuthToken;
      streamRequest.networkCode = customData.networkCode;
      streamRequest.adTagUrl = customData.adTagUrl;
      streamRequest.contentSourceUrl = customData.contentSourceUrl;

      return streamRequest;
    };