IMA DAI SDK für Chromecast verwenden

Livestreams abspielen, die bei der Google Cloud Video Stitcher API registriert sind

In dieser Anleitung wird beschrieben, wie Sie mit dem IMA DAI SDK für CAF-Webempfänger einen Livestream für ein Ereignis anfordern und abspielen, das bei der Google Cloud Video Stitcher API registriert ist, und wie Sie während der Wiedergabe eine Werbeunterbrechung einfügen.

Diese Anleitung erweitert das grundlegende Beispiel der dynamischen Anzeigenbereitstellung mit Komplettservice und bietet Unterstützung für Streams, die über die Google Cloud Video Stitcher API registriert wurden.

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

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

Hintergrund

Bevor Sie diese Anleitung verwenden, machen Sie sich mit dem Webempfängerprotokoll des Chromecast Application Framework vertraut.

In dieser Anleitung wird vorausgesetzt, dass Sie mit CAF-Empfängerkonzepten wie Nachrichtenabfangenden und MediaInformation-Objekten und der Verwendung des Cast-Befehls- und Steuerelements zum Emulieren eines CAF-Senders vertraut sind.

Anwendungskomponenten und -architektur

Die Implementierung der Livestream-Wiedergabe mit der Google Cloud Video Stitcher API mit dem IMA CAF DAI SDK umfasst zwei Hauptkomponenten, die in dieser Anleitung erläutert werden:

  • VideoStitcherLiveStreamRequest: Ein Objekt, das eine Streamanfrage an die Google-Server definiert. Die Anfrage gibt eine Instanz der Cloud Video Stitcher API, eine Live-Konfigurations-ID und andere optionale Parameter an.
  • StreamManager: Ein Objekt, das die Kommunikation zwischen dem Videostream und dem IMA DAI SDK steuert, z. B. das Auslösen von Tracking-Pings und das Weiterleiten von Streamereignissen an den Publisher.

Vorbereitung

Für das IMA SDK benötigen Sie folgende Variablen:

  • Live-Konfigurations-ID: Dies ist die ID der Live-Konfiguration, die Sie beim Erstellen der Live-Konfiguration der Video Stitcher API angegeben haben.

    LIVE_CONFIG_ID

  • Standort: Die Google Cloud-Region, in der die Live Config erstellt wurde.

    LOCATION

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

    PROJECT_NUMBER

  • OAuth-Token: Das kurzlebige OAuth-Token eines Dienstkontos mit der Nutzerrolle „Video Stitcher“. Weitere Informationen finden Sie unter Kurzlebige Anmeldedaten für Dienstkonten erstellen.

    OAUTH_TOKEN

  • Netzwerkcode: Google Ad Manager-Netzwerkcode für die Anzeigenanfrage

    NETWORK_CODE

  • Benutzerdefinierter Asset-Schlüssel: Benutzerdefinierter Asset-Schlüssel in Google Ad Manager, der beim Erstellen einer Konfiguration für ein Livestream-Ereignis mit der Video Stitcher API generiert wird

    CUSTOM_ASSET_KEY

Für einen benutzerdefinierten Übertragungsempfänger ist Folgendes erforderlich:

  • Ein Cast Developer Console-Konto mit Testgeräten in einer Zulassungsliste.

  • Eine gehostete Webempfänger-App, die in Ihrer Cast Developer Console registriert ist und so geändert werden kann, dass sie den in diesem Leitfaden bereitgestellten Code hostet.

  • Eine sendende App, die für die Verwendung Ihrer Webempfänger-App konfiguriert ist. In diesem Beispiel wird in diesem Beispiel das Cast-Befehl und -Steuerungstool als Absender verwendet.

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

Konfigurieren Sie zuerst die Absenderanwendung so, dass eine Ladeanfrage an Ihren Webempfänger gesendet wird. Sie enthält die folgenden Felder im MediaInformation-Objekt Ihrer Plattform.

Feld Inhalt
contentId Eine eindeutige Kennzeichnung für dieses Medienelement, wie in der Cast-Referenzdokumentation definiert. Diese ID sollte nicht für mehrere Elemente in derselben Medienwarteschlange verwendet werden.

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 wird, wenn der Stream für die dynamische Anzeigenbereitstellung nicht geladen werden kann.

BACKUP_STREAM_MIMETYPE
streamType Das für diesen Wert verwendete String-Literal oder die Konstante variiert je nach Absenderplattform.

LIVE
customData

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

Feld Inhalt
liveConfigID LIVE_CONFIG_ID
region LOCATION
projectNumber PROJECT_NUMBER
oAuthToken OAUTH_TOKEN
networkCode NETWORK_CODE
customAssetKey CUSTOM_ASSET_KEY

Hier sind einige Codebeispiele, die Ihnen den Einstieg erleichtern:

Web

Zum Konfigurieren dieser Werte in einem Cast-Websender müssen Sie zuerst ein MediaInfo-Objekt mit den erforderlichen Daten erstellen und dann eine Ladeanfrage an den Webempfänger senden.

// 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.LIVE;
mediaInfo.customData = {
liveConfigID: "LIVE_CONFIG_ID",
region: "LOCATION",
projectNumber: "PROJECT_NUMBER",
oAuthToken: "OAUTH_TOKEN",
networkCode: "NETWORK_CODE",
customAssetKey: "CUSTOM_ASSET_KEY"
};

// 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

Zum Konfigurieren dieser Werte in einem Cast-Websender müssen Sie zuerst ein MediaInfo-Objekt mit den erforderlichen Daten erstellen und dann eine Ladeanfrage an den Webempfänger senden.

JSONObject customData = new JSONObject()
  .put("liveConfigID", "LIVE_CONFIG_ID")
  .put("region", "LOCATION")
  .put("projectNumber", "PROJECT_NUMBER")
  .put("oAuthToken", "OAUTH_TOKEN")
  .put("networkCode", "NETWORK_CODE")
  .put("customAssetKey", "CUSTOM_ASSET_KEY");

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

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

iOS (Obj-C)

Zum Konfigurieren dieser Werte in einem Cast-Websender müssen Sie zuerst ein GCKMediaInformation-Objekt mit den erforderlichen Daten erstellen und dann eine Ladeanfrage an den Webempfänger senden.

NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
  @"liveConfigID": @"LIVE_CONFIG_ID",
  @"region": @"LOCATION",
  @"projectNumber": @"PROJECT_NUMBER",
  @"oAuthToken": @"OAUTH_TOKEN",
  @"networkCode": @"NETWORK_CODE",
  @"customAssetKey": @"CUSTOM_ASSET_KEY"
};

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

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

iOS (Swift)

Zum Konfigurieren dieser Werte in einem Cast-Websender müssen Sie zuerst ein GCKMediaInformation-Objekt mit den erforderlichen Daten erstellen und dann eine Ladeanfrage an den Webempfänger senden.

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

let customData = [
  "liveConfigID": "LIVE_CONFIG_ID",
  "region": "LOCATION",
  "projectNumber": "PROJECT_NUMBER",
  "oAuthToken": "OAUTH_TOKEN",
  "networkCode": "NETWORK_CODE",
  "customAssetKey": "CUSTOM_ASSET_KEY"
]

let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = "BACKUP_STREAM_MIMETYPE"
mediaInfoBuilder.streamType = GCKMediaStreamType.Live
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

Klicken Sie zum Konfigurieren dieser Werte im Cast-Befehl und -Steuerelement auf den Tab "Medien laden" und setzen Sie den benutzerdefinierten Anfragetyp auf LOAD. Ersetzen Sie dann die JSON-Daten im Textbereich durch diese JSON-Datei:

{
  "media": {
    "contentId": "CONTENT_ID",
    "contentUrl": "BACKUP_STREAM_URL",
    "contentType": "BACKUP_STREAM_MIMETYPE",
    "streamType": "LIVE",
    "customData": {
      "liveConfigID": "LIVE_CONFIG_ID",
      "region": "LOCATION",
      "projectNumber": "PROJECT_NUMBER",
      "oAuthToken": "OAUTH_TOKEN",
      "networkCode": "NETWORK_CODE",
      "customAssetKey": "CUSTOM_ASSET_KEY"
    }
  }
}

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

Benutzerdefinierten CAF-Webempfänger erstellen

Erstellen Sie einen benutzerdefinierten Web Receiver, wie im CAF SDK Custom Web Receiver Guide 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ügen Sie ein Skript-Tag hinzu, um das IMA DAI SDK für CAF in Ihren Webempfänger zu importieren, nachdem das Skript CAF geladen hat. Speichern Sie dann im folgenden Skript-Tag den Empfängerkontext und den Player-Manager als Konstanten, bevor Sie den Empfänger starten.

<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

Initialisieren Sie 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 Ihre Medienelemente an CAF übergeben werden, erstellen Sie Ihre Streamanfrage in einem LOAD-Nachrichtenabfanger.

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

    /**
     * Creates a livestream 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

Schließen Sie die Funktion createStreamRequest ab, um basierend auf der CAF-Ladeanfrage eine Livestreamanfrage an die Video Stitcher API zu erstellen.

    /**
     * Creates a livestream 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.VideoStitcherLiveStreamRequest();
      const customData = castRequest.media.customData;

      streamRequest.liveStreamEventId = customData.liveConfigID;
      streamRequest.region = customData.region;
      streamRequest.projectNumber = customData.projectNumber;
      streamRequest.oAuthToken = customData.oAuthToken;
      streamRequest.networkCode = customData.networkCode;
      streamRequest.customAssetKey = customData.customAssetKey;

      return streamRequest;
    };
Zurück
Android
Weiter
HTML5