IMA DAI SDK auf Chromecast verwenden

Livestreams abspielen, die mit der Google Cloud Video Stitcher API registriert wurden

In dieser Anleitung wird gezeigt, wie Sie mit dem IMA DAI SDK für CAF-Web-Receiver einen Livestream für ein Ereignis anfordern und abspielen, das mit der Google Cloud Video Stitcher APIregistriert wurde. Außerdem wird erklärt, wie Sie während der Wiedergabe eine Werbeunterbrechung einfügen.

Diese Anleitung baut auf dem grundlegenden Beispiel aus Full-Service-DAI 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 Client-SDKs finden Sie unter Interactive Media Ads SDKs.

Hintergrund

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

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

App-Komponenten und -Architektur

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

  • VideoStitcherLiveStreamRequest: Ein Objekt, das eine Streamanfrage an die Server von Google 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 verarbeitet, z. B. Tracking-Pings auslöst und Streamereignisse an den Publisher weiterleitet.

Vorbereitung

Sie benötigen die folgenden Variablen für das IMA SDK:

Für einen benutzerdefinierten Cast-Receiver 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 so geändert werden kann, dass sie den in dieser Anleitung bereitgestellten Code hostet.

  • Eine Sender-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. Diese Anfrage muss die folgenden Felder im MediaInformation -Objekt Ihrer Plattform enthalten.

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 URL des Backup-Streams, der abgespielt werden soll, wenn der DAI-Stream nicht geladen werden kann.

BACKUP_STREAM_URL
contentType Optionaler MIME-Typ der Backup-Stream-URL, die abgespielt werden soll, 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.

LIVE
customData

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

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 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.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 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("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 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 = @{
  @"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)

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.

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

{
  "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 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 ein Skript-Tag hinzu, um das IMA DAI SDK für CAF in Ihren Web-Receiver zu importieren, 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 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ändigen Sie die Funktion createStreamRequest, um eine Livestreamanfrage für die Video Stitcher API basierend auf der CAF-Ladeanfrage 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;
    };

Optional: Optionen für die Streamingsitzung hinzufügen

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

Sie können beispielsweise die Manifestoptionen 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);
Zurück
Android
Weiter
HTML5