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 auf Chromecast verwenden

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

In diesem Leitfaden wird gezeigt, wie du mit dem IMA DAI SDK für CAF-Webempfänger einen Livestream für ein Ereignis anfordern und wiedergeben kannst, das bei der Google Cloud Video Stitcher API registriert ist, und während der Wiedergabe eine Werbeunterbrechung einfügen kannst.

In diesem Leitfaden wird das grundlegende Beispiel für die dynamische Anzeigenbereitstellung im Full-Service-Modell erweitert. Es wird Unterstützung für Streams hinzugefügt, die mit der Google Cloud Video Stitcher API registriert sind.

Achte darauf, dass dein Streamingformat von CAF-Webempfängern unterstützt wird, bevor du fortfährst.

Informationen zur Integration mit anderen Plattformen oder zur Verwendung des IMA clientseitige SDKs siehe Interactive Media Ads SDKs.

Hintergrund

Bevor du diesen Leitfaden verwendest, solltest du dich mit dem Web-Empfängerprotokoll des Chromecast Application Framework vertraut machen.

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 Livestreamwiedergabe mit der Google Cloud Video Stitcher API und dem IMA CAF Media Delivery SDK umfasst zwei Hauptkomponenten, wie in dieser Anleitung gezeigt:

VideoStitcherLiveStreamRequest: Ein Objekt, das eine Streamanfrage an die Google-Server definiert. In der Anfrage werden eine Instanz der Cloud Video Stitcher API, eine Live-Konfigurations-ID und andere optionale Parameter angegeben.
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.

Vorbereitung

Für das IMA SDK sind die folgenden Variablen erforderlich:

Live-Konfigurations-ID: Dies ist die Live-Konfigurations-ID, die Sie beim Erstellen Ihre Video Stitcher API-Live-Konfiguration.

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

LOCATION
Projektnummer: Die Google Cloud-Projektnummer, die mit der Video Stitcher API verwendet wird.

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

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

NETWORK_CODE
Benutzerdefinierter Asset-Schlüssel: benutzerdefinierter Asset-Schlüssel für Google Ad Manager, der während des eine Konfiguration für einen Livestream Veranstaltung mit der Video Stitcher API.

CUSTOM_ASSET_KEY

Für einen benutzerdefinierten Cast-Empfänger benötigen Sie Folgendes:

Ein Cast Developer Console-Konto mit Testgeräten auf einer Zulassungsliste.
Eine gehostete Web-Empfänger-App, die in der Cast Developer Console registriert ist und so geändert werden kann, dass der in diesem Leitfaden bereitgestellte Code gehostet wird.
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

Konfiguriere zuerst deine Sender-App so, dass sie eine Ladeanfrage an deinen Webempfänger sendet, die die folgenden Felder im MediaInformation-Objekt deiner Plattform enthält.

Feld Inhalt

contentId

Eine eindeutige Kennung für dieses Medienelement, wie in den Cast-Dateien definiert Referenzdokumentation. 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 wird, wenn der Stream für die dynamische Anzeigenbereitstellung wiedergegeben wird nicht geladen wird.

BACKUP_STREAM_MIMETYPE

streamType

Das für diesen Wert verwendete Stringliteral 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 den Stream für die dynamische Anzeigenbereitstellung. die Sie erhoben 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

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

Wenn du diese Werte in einem Cast-Websender konfigurieren möchtest, erstellst du zuerst ein MediaInfo-Objekt mit den erforderlichen Daten und sendest dann eine Ladeanfrage an den Webempfänger.

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)

Wenn du diese Werte in einem Cast-Websender konfigurieren möchtest, erstellst du zuerst ein GCKMediaInformation-Objekt mit den erforderlichen Daten und sendest dann eine Ladeanfrage an den Webempfänger.

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)

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

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 Textfeld durch Folgendes:

{
  "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

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

Der Code des Empfängers sollte so 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 CAF-Skript vom Script geladen wurde. Speichern Sie dann im folgenden Skript-Tag Empfängerkontext und Spielermanager als Konstanten festlegen, bevor der Empfänger gestartet wird.

<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 Ihre Medienelemente an CAF übergeben werden, müssen Sie Ihre Streamanfrage in einem Nachricht laden Interceptor.

    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

Vervollständige die Funktion createStreamRequest, um eine Livestream-Anfrage an die Video Stitcher API zu erstellen, die auf der CAF-Ladeanfrage basiert.

    /**
     * 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;
    };