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

Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

IMA DAI SDK auf Chromecast verwenden

Mit der Google Cloud Video Stitcher API registrierte VOD-Streams abspielen

In dieser Anleitung wird gezeigt, wie Sie mit dem IMA DAI SDK für CAF-Web-Receiver eine Google Cloud-VOD-Streamsitzung anfordern und abspielen.

Diese Anleitung baut auf dem grundlegenden Beispiel aus dem vollständigen DAI-Dienst auf und fügt Unterstützung für Streams hinzu, die mit der Google Cloud Video Stitcher API registriert wurden.

Prüfen Sie, ob Ihr Streamingformat von CAF-Web-Receivern unterstützt wird, bevor Sie fortfahren.

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

Hintergrund

Bevor Sie diese Anleitung verwenden, machen Sie sich mit dem Web-Receiver-Protokoll des Chromecast Application Framework vertraut.

In dieser Anleitung wird davon ausgegangen, dass Sie mit den CAF-Receiver-Konzepten wie Nachrichten Interceptoren, MediaInformation Objekten und der Verwendung des Cast Command and Control -Tools zum Emulieren eines CAF-Senders vertraut sind.

App-Komponenten und -Architektur

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

VideoStitcherVodStreamRequest: Ein Objekt, das eine Streamanfrage an die Server von Google definiert.
StreamManager: Ein Objekt, das die Kommunikation zwischen dem Videostream und dem IMA DAI SDK verarbeitet, z. B. Tracking-Pings auslöst und Streamereignisse an den Publisher weiterleitet.

Google Cloud-Projekt einrichten

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

Standort : Die Google Cloud-Region, in der Ihre VOD-Konfiguration erstellt wurde.

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

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

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

NETWORK_CODE
VOD-Konfigurations-ID : Die VOD-Konfigurations-ID für den VOD-Stream.

VOD_CONFIG_ID

Weitere Informationen zum Erstellen der VOD-Konfigurations-ID finden Sie in der Anleitung VOD-Konfiguration für Cloud Stitching erstellen.

VOD_URI

Benutzerdefinierten Cast-Receiver einrichten

Zum Entwickeln eines benutzerdefinierten Cast-Receivers benötigen Sie Folgendes:

Ein Cast Developer Console-Konto mit Testgeräten auf einer Zulassungsliste.
Eine gehostete Web-Receiver App, die in der Cast Developer Console registriert ist und die so geändert werden kann, dass sie den in dieser Anleitung bereitgestellten Code hostet.
Eine Sende-App, die für die Verwendung Ihrer Web-Receiver-App konfiguriert ist. In diesem Beispiel wird das Cast Command and Control Tool als Sender verwendet.

Sender vorbereiten, um Streamdaten an den Receiver zu übergeben

Konfigurieren Sie zuerst Ihre Sender-App, um eine Ladeanfrage an Ihren Web-Receiver zu senden, die die folgenden Felder im MediaInformation Objekt Ihrer Plattform enthält.

Feld Inhalt

contentId

Eine eindeutige Kennung für dieses Media-Element, wie in der Cast Referenzdokumentation definiert. Diese ID sollte nicht für mehrere Elemente in derselben Media-Warteschlange wiederverwendet werden.

CONTENT_ID

contentUrl

Optionale Backup-Stream-URL, die wiedergegeben wird, wenn der DAI-Stream nicht geladen werden kann.

BACKUP_STREAM_URL

contentType

Optionaler MIME-Typ der Backup-Stream-URL, die wiedergegeben wird, wenn der DAI-Stream nicht geladen werden kann.

BACKUP_STREAM_MIMETYPE

streamType

Das Stringliteral oder die Konstante, die für diesen Wert verwendet wird, variiert je nach Sender Plattform.

VOD

customData

Das Feld customData enthält einen Schlüssel/Wert-Speicher mit zusätzlichen Pflichtfeldern. In diesem Fall enthält customData die von Ihnen erfassten DAI-Streamdaten.

Feld	Inhalt
`region`	`LOCATION`
`projectNumber`	`PROJECT_NUMBER`
`oAuthToken`	`OAUTH_TOKEN`
`networkCode`	`NETWORK_CODE`
`vodConfigId`	`VOD_CONFIG_ID`

Hier sind einige Codebeispiele für den Einstieg:

Web

Wenn Sie diese Werte in einem Cast-Web-Sender konfigurieren möchten, erstellen Sie zuerst ein MediaInfo -Objekt mit den erforderlichen Daten und senden Sie dann eine Lade anfrage an den Web-Receiver.

// 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",
  vodConfigId: "VOD_CONFIG_ID"
};

// 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 Sie diese Werte in einem Cast-Web-Sender konfigurieren möchten, erstellen Sie zuerst ein MediaInfo Objekt mit den erforderlichen Daten und senden Sie dann eine Lade anfrage an den Web-Receiver.

JSONObject customData = new JSONObject()
  .put("region", "LOCATION")
  .put("projectNumber", "PROJECT_NUMBER")
  .put("oAuthToken", "OAUTH_TOKEN")
  .put("networkCode", "NETWORK_CODE")
  .put("vodConfigId", "VOD_CONFIG_ID");

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 Sie diese Werte in einem Cast-Web-Sender konfigurieren möchten, erstellen Sie zuerst ein GCKMediaInformation Objekt mit den erforderlichen Daten und senden Sie dann eine Lade anfrage an den Web-Receiver.

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

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)

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",
  "vodConfigId": "VOD_CONFIG_ID"
]

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 Sie diese Werte im Cast Command and Control Tool konfigurieren möchten, klicken Sie auf den Tab „Media laden“ und legen Sie den benutzerdefinierten Typ der Ladeanfrage auf „LOAD“ fest. Ersetzen Sie dann die JSON-Daten im Textbereich durch diesen 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",
      "vodConfigId": "VOD_CONFIG_ID"
    }
  }
}

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

Benutzerdefinierten CAF-Web-Receiver erstellen

Erstellen Sie einen benutzerdefinierten Web-Receiver, wie in der CAF SDK Custom Web Receiver Guide beschrieben.

Der Code Ihres Receivers 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 Ihrem Web-Receiver ein Skript-Tag hinzu, um das IMA DAI SDK für CAF zu importieren. Platzieren Sie es direkt nach dem Skript, das CAF lädt. Speichern Sie dann im folgenden Skript-Tag den Receiver-Kontext und den Player Manager als Konstanten, bevor Sie den Receiver 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>

Lade-Interceptor für Stream Manager erstellen

Bevor Ihre Media-Elemente an CAF übergeben werden, erstellen Sie Ihre 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ändigen Sie die Funktion createStreamRequest, um eine VOD-Streamanfrage für die 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.vodConfigId = customData.vodConfigId;
      streamRequest.videoStitcherSessionOptions = {};

      return streamRequest;
    };

Optional: Optionen für die Streamsitzung hinzufügen

Sie können Ihre Streamanfrage anpassen, indem Sie Sitzungsoptionen hinzufügen, um die Standard Konfiguration der Cloud Video Stitcher API mit VideoStitcherVodStreamRequest.videoStitcherSessionOptions zu überschreiben. Wenn Sie eine nicht erkannte Option angeben, antwortet die Cloud Video Stitcher API mit einem HTTP-Fehler 400. Weitere Informationen finden Sie in der Anleitung zur Fehlerbehebung.

Sie können die Manifestoptionen beispielsweise mit dem folgenden Code-Snippet überschreiben, das zwei Streammanifeste mit Wiedergaben anfordert, die von der niedrigsten zur höchsten Bitrate sortiert sind.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

IMA DAI SDK auf Chromecast verwenden Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Mit der Google Cloud Video Stitcher API registrierte VOD-Streams abspielen

Hintergrund

App-Komponenten und -Architektur

Google Cloud-Projekt einrichten

Benutzerdefinierten Cast-Receiver einrichten

Sender vorbereiten, um Streamdaten an den Receiver zu übergeben

Web

Android

iOS (Obj-C)

iOS (Swift)

CAC-Tool

Benutzerdefinierten CAF-Web-Receiver erstellen

IMA DAI SDK importieren und Player Manager abrufen

IMA Stream Manager initialisieren

Lade-Interceptor für Stream Manager erstellen

Streamanfrage erstellen

Optional: Optionen für die Streamsitzung hinzufügen

IMA DAI SDK auf Chromecast verwenden