Zentrale Funktionen zu Ihrem benutzerdefinierten Web-Receiver hinzufügen

Diese Seite enthält Code-Snippets und Beschreibungen der Funktionen, die für eine benutzerdefinierte Web Receiver-App.

  1. Ein cast-media-player-Element, das die integrierte Player-Benutzeroberfläche repräsentiert die mit Web Receiver bereitgestellt werden.
  2. Benutzerdefinierter CSS-ähnlicher Stil für das cast-media-player-Element, um verschiedene Stile zu erstellen UI-Elemente wie background-image, splash-image und font-family.
  3. Ein Skriptelement zum Laden des Web Receiver-Frameworks.
  4. JavaScript-Code zum Abfangen von Nachrichten und Verarbeiten von Ereignissen
  5. Wiedergabeliste für Autoplay.
  6. Optionen zum Konfigurieren der Wiedergabe.
  7. Optionen zum Festlegen des Web Receiver-Kontexts.
  8. Optionen zum Festlegen von Befehlen, die von der Web Receiver App unterstützt werden.
  9. Ein JavaScript-Aufruf zum Starten der Web Receiver-Anwendung.

Anwendungskonfiguration und -optionen

Anwendung konfigurieren

Die CastReceiverContext ist die äußerste Klasse, die dem Entwickler zur Verfügung steht, und verwaltet das Laden der zugrunde liegende Bibliotheken und übernimmt die Initialisierung des Web Receiver SDK. Das SDK stellt APIs bereit, mit denen Anwendungsentwickler das SDK über CastReceiverOptions Diese Konfigurationen werden einmal pro Anwendungsstart bewertet und an beim Festlegen des optionalen Parameters im Aufruf für start

Das folgende Beispiel zeigt, wie Sie das Standardverhalten überschreiben können, um zu erkennen, ob ein Verbindung des Absenders noch aktiv ist. Wenn der Web Receiver für die Kommunikation mit einem Sender maxInactivity Sekunden, wird ein SENDER_DISCONNECTED-Ereignis ausgelöst. Die Konfiguration unten überschreibt dieses Zeitlimit. Dies kann bei der Fehlerbehebung hilfreich sein, dass die Web Receiver-App die Chrome Remote Debugger-Sitzung schließt, sind null verbundene Absender mit dem Status IDLE.

const context = cast.framework.CastReceiverContext.getInstance();
const options = new cast.framework.CastReceiverOptions();
options.maxInactivity = 3600; // Development only
context.start(options);

Player konfigurieren

Beim Laden von Inhalten bietet das Web Receiver SDK eine Möglichkeit, die Wiedergabe zu konfigurieren Variablen wie DRM-Schutz Informationen Wiederholungskonfigurationen und Anfrage-Handler mithilfe von cast.framework.PlaybackConfig Diese Informationen werden verarbeitet von PlayerManager und wird beim Erstellen der Spieler bewertet. Spieler werden erstellt jedes Mal, wenn ein neuer Ladevorgang an das Web Receiver SDK übergeben wird. Änderungen am PlaybackConfig, nachdem der Spieler erstellt wurde, werden im nächsten werden geladen. Das SDK bietet die folgenden Methoden zum Ändern des PlaybackConfig

  • CastReceiverOptions.playbackConfig zum Überschreiben der Standardkonfigurationsoptionen beim Initialisieren der CastReceiverContext.
  • PlayerManager.getPlaybackConfig() um die aktuelle Konfiguration abzurufen.
  • PlayerManager.setPlaybackConfig() um die aktuelle Konfiguration zu überschreiben. Diese Einstellung wird auf alle nachfolgende Ladevorgänge oder bis sie wieder überschrieben wird.
  • PlayerManager.setMediaPlaybackInfoHandler() , um zusätzliche Konfigurationen nur für das Medienelement anzuwenden, auf dem sie geladen wird. der aktuellen Konfigurationen. Der Handler wird direkt vor dem Spieler aufgerufen. Erstellung. Änderungen, die Sie hier vornehmen, sind nicht dauerhaft und werden nicht in Abfragen einbezogen an getPlaybackConfig(). Wenn das nächste Medienelement geladen wird, erfasst dieser Handler erneut aufgerufen wird.

Das folgende Beispiel zeigt, wie PlaybackConfig beim Initialisieren des CastReceiverContext. Die Konfiguration überschreibt ausgehende Anfragen für den Abruf von Manifesten. Der Handler gibt an, dass CORS-Zugriffssteuerungsanfragen sollten mithilfe von Anmeldedaten wie Cookies oder Autorisierungsheadern erfolgen.

const playbackConfig = new cast.framework.PlaybackConfig();
playbackConfig.manifestRequestHandler = requestInfo => {
  requestInfo.withCredentials = true;
};
context.start({playbackConfig: playbackConfig});

Das folgende Beispiel zeigt, wie PlaybackConfig mit dem Getter überschrieben wird. und Setter in PlayerManager angegeben. Durch diese Einstellung wird der Player so konfiguriert, Inhaltswiedergabe nach dem Laden eines Segments fortsetzen.

const playerManager =
    cast.framework.CastReceiverContext.getInstance().getPlayerManager();
const playbackConfig = (Object.assign(
            new cast.framework.PlaybackConfig(), playerManager.getPlaybackConfig()));
playbackConfig.autoResumeNumberOfSegments = 1;
playerManager.setPlaybackConfig(playbackConfig);

Das folgende Beispiel zeigt, wie PlaybackConfig für eine bestimmte Last überschrieben wird mit dem Info-Handler für die Medienwiedergabe. Der Handler ruft eine Anwendung auf. implementierte Methode getLicenseUrlForMedia, um licenseUrl aus dem contentId des aktuellen Elements.

playerManager.setMediaPlaybackInfoHandler((loadRequestData, playbackConfig) => {
  const mediaInformation = loadRequestData.media;
  playbackConfig.licenseUrl = getLicenseUrlForMedia(mediaInformation.contentId);

  return playbackConfig;
});

Event-Listener

Mit dem Web Receiver SDK kann deine Web Receiver-App Player-Ereignisse verarbeiten. Die nimmt der Event-Listener eine cast.framework.events.EventType (oder ein Array dieser Parameter), der die Ereignisse angibt, die sollte den Listener auslösen. Vorkonfigurierte Arrays mit cast.framework.events.EventType, die für die Fehlerbehebung nützlich sind, finden Sie unter cast.framework.events.category Der Ereignisparameter liefert zusätzliche Informationen zum Ereignis.

Wenn Sie zum Beispiel wissen möchten, mediaStatus übermittelt wird, können Sie mit der folgenden Logik den Fehler Ereignis:

const playerManager =
    cast.framework.CastReceiverContext.getInstance().getPlayerManager();
playerManager.addEventListener(
    cast.framework.events.EventType.MEDIA_STATUS, (event) => {
      // Write your own event handling code, for example
      // using the event.mediaStatus value
});

Abfangen von Nachrichten

Mit dem Web Receiver SDK kann Ihre Web Receiver-App Nachrichten und für diese Nachrichten benutzerdefinierten Code ausführen. Der Nachrichten-Abfangende nimmt eine cast.framework.messages.MessageType -Parameter, der angibt, welche Art von Nachricht abgefangen werden soll.

Der Interceptor sollte die modifizierte Anfrage oder ein Promise zurückgeben, das die durch den geänderten Anfragewert. Durch die Rückgabe von null wird das Aufrufen der Standard-Nachrichten-Handler. Weitere Informationen finden Sie unter Medien laden.

Wenn Sie beispielsweise die Daten der Ladeanfrage ändern möchten, können Sie die Methode folgende Logik ab, um sie abzufangen und zu modifizieren:

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      const error = new cast.framework.messages.ErrorData(
                      cast.framework.messages.ErrorType.LOAD_FAILED);
      if (!loadRequestData.media) {
        error.reason = cast.framework.messages.ErrorReason.INVALID_PARAM;
        return error;
      }

      if (!loadRequestData.media.entity) {
        return loadRequestData;
      }

      return thirdparty.fetchAssetAndAuth(loadRequestData.media.entity,
                                          loadRequestData.credentials)
        .then(asset => {
          if (!asset) {
            throw cast.framework.messages.ErrorReason.INVALID_REQUEST;
          }

          loadRequestData.media.contentUrl = asset.url;
          loadRequestData.media.metadata = asset.metadata;
          loadRequestData.media.tracks = asset.tracks;
          return loadRequestData;
        }).catch(reason => {
          error.reason = reason; // cast.framework.messages.ErrorReason
          return error;
        });
    });

context.start();

Fehlerbehandlung

Wenn Fehler beim Abfangen von Nachrichten auftreten, sollte Ihre Web Receiver-App eine angemessene cast.framework.messages.ErrorType und cast.framework.messages.ErrorReason

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      const error = new cast.framework.messages.ErrorData(
                      cast.framework.messages.ErrorType.LOAD_CANCELLED);
      if (!loadRequestData.media) {
        error.reason = cast.framework.messages.ErrorReason.INVALID_PARAM;
        return error;
      }

      ...

      return fetchAssetAndAuth(loadRequestData.media.entity,
                               loadRequestData.credentials)
        .then(asset => {
          ...
          return loadRequestData;
        }).catch(reason => {
          error.reason = reason; // cast.framework.messages.ErrorReason
          return error;
        });
    });

Abfangen von Nachrichten im Vergleich zum Event-Listener

Einige wichtige Unterschiede zwischen dem Abfangen von Nachrichten und dem Event-Listener sind folgende: folgt:

  • Ein Event-Listener erlaubt es Ihnen nicht, die Anfragedaten zu ändern.
  • Ein Ereignis-Listener eignet sich am besten zum Auslösen von Analysen oder einer benutzerdefinierten Funktion.
playerManager.addEventListener(cast.framework.events.category.CORE,
    event => {
        console.log(event);
    });
  • Mit dem Abfangen von Nachrichten können Sie eine Nachricht abhören die Anfragedaten selbst zu ändern.
  • Das Abfangen von Nachrichten eignet sich am besten, um benutzerdefinierte Logik in Bezug auf Daten anzufordern.

Medien werden geladen

MediaInformation bietet zahlreiche Eigenschaften zum Laden von Medien in der cast.framework.messages.MessageType.LOAD-Nachricht einschließlich entity, contentUrl und contentId.

  • Die entity ist die empfohlene Eigenschaft, die Sie in Ihrer Implementierung sowohl für den Absender als auch Empfangs-Apps. Die Property ist eine Deeplink-URL, die entweder eine Playlist sein kann oder Medieninhalte. Ihre Anwendung sollte diese URL parsen und mindestens eines der beiden anderen Felder auszufüllen.
  • Die contentUrl entspricht der abspielbaren URL, über die der Player den Inhalt lädt. Diese URL könnte beispielsweise auf ein DASH-Manifest verweisen.
  • Die contentId kann entweder eine abspielbare Content-URL sein (ähnlich der contentUrl ) oder eine eindeutige ID für den geladenen Inhalt oder die Playlist angeben. Wenn Sie diese Eigenschaft als Kennung verwenden, sollte Ihre Anwendung eine eine abspielbare URL in contentUrl.

Es wird empfohlen, entity zum Speichern der echten ID oder der Schlüsselparameter zu verwenden. Verwenden Sie contentUrl für die URL der Medien. Ein Beispiel hierfür finden Sie folgendes Snippet, in dem entity in der LOAD-Anfrage vorhanden ist und der spielbare contentUrl wird abgerufen:

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      ...

      if (!loadRequestData.media.entity) {
        // Copy the value from contentId for legacy reasons if needed
        loadRequestData.media.entity = loadRequestData.media.contentId;
      }

      return thirdparty.fetchAssetAndAuth(loadRequestData.media.entity,
                                          loadRequestData.credentials)
        .then(asset => {
          loadRequestData.media.contentUrl = asset.url;
          ...
          return loadRequestData;
        });
    });

Gerätefunktionen

Die getDeviceCapabilities werden Geräteinformationen über das verbundene Übertragungsgerät und das Video bzw. Audiogerät angeschlossen ist. Die Methode getDeviceCapabilities bietet Unterstützung Informationen für Google Assistant, Bluetooth sowie das verbundene Display und Audio Geräte.

Diese Methode gibt ein Objekt zurück, das Sie abfragen können, indem Sie eines der um die Gerätefunktion für diese Enums zu erhalten. Die Enums sind definiert in cast.framework.system.DeviceCapabilities

In diesem Beispiel wird geprüft, ob das Web Receiver-Gerät HDR und DolbyVision (DV) mit den Schlüsseln IS_HDR_SUPPORTED und IS_DV_SUPPORTED, .

const context = cast.framework.CastReceiverContext.getInstance();
context.addEventListener(cast.framework.system.EventType.READY, () => {
  const deviceCapabilities = context.getDeviceCapabilities();
  if (deviceCapabilities &&
      deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_HDR_SUPPORTED]) {
    // Write your own event handling code, for example
    // using the deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_HDR_SUPPORTED] value
  }
  if (deviceCapabilities &&
      deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_DV_SUPPORTED]) {
    // Write your own event handling code, for example
    // using the deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_DV_SUPPORTED] value
  }
});
context.start();

Umgang mit Nutzerinteraktionen

Ein Nutzer kann über Sender mit Ihrer Web Receiver-Anwendung interagieren Apps (Web, Android und iOS), Sprachbefehle auf Geräten mit integriertem Assistant Geräte, Touchbedienung auf Smart Displays und Fernbedienungen auf Android TV Geräte. Das Cast SDK bietet verschiedene APIs, mit denen die Web Receiver App Folgendes ausführen kann: diese Interaktionen verarbeiten kann, aktualisieren Sie die Status der Nutzeraktionen, und optional die Änderungen senden, um Back-End-Dienste zu aktualisieren.

Unterstützte Medienbefehle

Die Status der UI-Steuerelemente basieren auf dem MediaStatus.supportedMediaCommands für iOS- und Android-Sender mit erweiterten Controllern, Empfänger und Fernbedienung Apps, die auf Touchgeräten ausgeführt werden, und Receiver-Apps auf Android TV-Geräten. Wenn ein bestimmte bitweise Command in der Eigenschaft aktiviert sind, werden die Schaltflächen, die zu dieser Aktion aktiviert sind. Ist kein Wert festgelegt, erscheint die Schaltfläche deaktiviert. Diese Werte können im Web Receiver wie folgt geändert werden:

  1. Mit PlayerManager.setSupportedMediaCommands um die spezifischen Commands
  2. Einen neuen Befehl mit addSupportedMediaCommands
  3. Einen vorhandenen Befehl mit removeSupportedMediaCommands
playerManager.setSupportedMediaCommands(cast.framework.messages.Command.SEEK |
  cast.framework.messages.Command.PAUSE);

Wenn der Empfänger die aktualisierte MediaStatus vorbereitet, ist Folgendes enthalten: Änderungen in der Property supportedMediaCommands. Wenn der Status übertragen, aktualisieren die verbundenen Absender-Apps die Schaltflächen in ihrer Benutzeroberfläche. entsprechend anpassen.

Weitere Informationen zu unterstützten Medienbefehlen und Touch-Geräten findest du unter Accessing UI controls .

Status von Nutzeraktionen verwalten

Wenn Nutzende mit der Benutzeroberfläche interagieren oder Sprachbefehle senden, können sie die Wiedergabe des Inhalts und der Eigenschaften, die mit dem wiedergegebenen Element zusammenhängen. Anfragen die die Wiedergabe steuern, werden automatisch vom SDK übernommen. Anfragen, die Eigenschaften für das aktuell wiedergegebene Element ändern, z. B. den Befehl LIKE müssen sie von der Empfängeranwendung verarbeitet werden. Das SDK bietet eine Reihe von APIs zur Verarbeitung dieser Anfragetypen Um diese Anfragen zu unterstützen, müssen folgende Voraussetzungen erfüllt sein: ausgeführt werden muss:

  • MediaInformation festlegen userActionStates beim Laden eines Medienelements mit den Einstellungen des Nutzers.
  • Fangen Sie USER_ACTION-Nachrichten ab und ermitteln Sie die angeforderte Aktion.
  • Aktualisieren Sie den MediaInformation UserActionState, um die UI zu aktualisieren.

Das folgende Snippet fängt die LOAD-Anfrage ab und füllt den MediaInformation von LoadRequestData. In diesem Fall gefällt den Nutzenden die geladen werden.

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, (loadRequestData) => {
      const userActionLike = new cast.framework.messages.UserActionState(
          cast.framework.messages.UserAction.LIKE);
      loadRequestData.media.userActionStates = [userActionLike];

      return loadRequestData;
    });

Das folgende Snippet fängt die Nachricht USER_ACTION ab und verarbeitet das Aufrufen von Back-End mit der angeforderten Änderung. Anschließend wird ein Aufruf durchgeführt, um die UserActionState auf dem Empfänger.

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.USER_ACTION,
  (userActionRequestData) => {
    // Obtain the media information of the current content to associate the action to.
    let mediaInfo = playerManager.getMediaInformation();

    // If there is no media info return an error and ignore the request.
    if (!mediaInfo) {
        console.error('Not playing media, user action is not supported');
        return new cast.framework.messages.ErrorData(messages.ErrorType.BAD_REQUEST);
    }

    // Reach out to backend services to store user action modifications. See sample below.
    return sendUserAction(userActionRequestData, mediaInfo)

    // Upon response from the backend, update the client's UserActionState.
    .then(backendResponse => updateUserActionStates(backendResponse))

    // If any errors occurred in the backend return them to the cast receiver.
    .catch((error) => {
      console.error(error);
      return error;
    });
});

Das folgende Snippet simuliert einen Aufruf an einen Back-End-Dienst. Die Funktion prüft, Den UserActionRequestData, um die Art der Änderung zu sehen, die der Nutzer angefordert hat und führt nur dann einen Netzwerkaufruf aus, wenn die Aktion vom Back-End unterstützt wird.

function sendUserAction(userActionRequestData, mediaInfo) {
  return new Promise((resolve, reject) => {
    switch (userActionRequestData.userAction) {
      // Handle user action changes supported by the backend.
      case cast.framework.messages.UserAction.LIKE:
      case cast.framework.messages.UserAction.DISLIKE:
      case cast.framework.messages.UserAction.FOLLOW:
      case cast.framework.messages.UserAction.UNFOLLOW:
      case cast.framework.messages.UserAction.FLAG:
      case cast.framework.messages.UserAction.SKIP_AD:
        let backendResponse = {userActionRequestData: userActionRequestData, mediaInfo: mediaInfo};
        setTimeout(() => {resolve(backendResponse)}, 1000);
        break;
      // Reject all other user action changes.
      default:
        reject(
          new cast.framework.messages.ErrorData(cast.framework.messages.ErrorType.INVALID_REQUEST));
    }
  });
}

Das folgende Snippet verwendet UserActionRequestData und fügt entweder oder entfernt das UserActionState aus dem MediaInformation. Aktualisieren der UserActionState von MediaInformation ändert den Status der Schaltfläche, die mit der angeforderten Aktion verknüpft ist. Diese Änderung wird in der Smart Bidding- UI für Displaysteuerelemente, App zur Fernbedienung und Android TV-UI Es ist auch die über ausgehende MediaStatus-Nachrichten übertragen werden, um die Benutzeroberfläche des erweiterten Controllers für iOS- und Android-Absender.

function updateUserActionStates(backendResponse) {
  // Unwrap the backend response.
  let mediaInfo = backendResponse.mediaInfo;
  let userActionRequestData = backendResponse.userActionRequestData;

  // If the current item playing has changed, don't update the UserActionState for the current item.
  if (playerManager.getMediaInformation().entity !== mediaInfo.entity) {
    return;
  }

  // Check for existing userActionStates in the MediaInformation.
  // If none, initialize a new array to populate states with.
  let userActionStates = mediaInfo.userActionStates || [];

  // Locate the index of the UserActionState that will be updated in the userActionStates array.
  let index = userActionStates.findIndex((currUserActionState) => {
    return currUserActionState.userAction == userActionRequestData.userAction;
  });

  if (userActionRequestData.clear) {
    // Remove the user action state from the array if cleared.
    if (index >= 0) {
      userActionStates.splice(index, 1);
    }
    else {
      console.warn("Could not find UserActionState to remove in MediaInformation");
    }
  } else {
    // Add the UserActionState to the array if enabled.
    userActionStates.push(
      new cast.framework.messages.UserActionState(userActionRequestData.userAction));
  }

  // Update the UserActionState array and set the new MediaInformation
  mediaInfo.userActionStates = userActionStates;
  playerManager.setMediaInformation(mediaInfo, true);
  return;
}

Sprachbefehle

Die folgenden Medienbefehle werden derzeit im Web Receiver SDK für Geräte mit integriertem Assistant. Die Standardimplementierungen dieser Befehle sind gefunden in cast.framework.PlayerManager

Befehl Beschreibung
Spielen Wiedergabe im Status „Pausiert“ starten oder fortsetzen
Pausieren Aktuell wiedergegebene Inhalte pausieren
Zurück Zum vorherigen Medienelement in der Wiedergabeliste springen.
Weiter Zum nächsten Medienelement in der Medienwarteschlange springen.
Beenden Stoppt die aktuell wiedergegebene Mediendatei.
Keinen wiederholen Wiederholung von Medienelementen in der Wiedergabeliste deaktivieren, sobald das letzte Element der Wiedergabeliste abgespielt wurde
Einzel wiederholen Die aktuell abgespielte Medienwiedergabe auf unbestimmte Zeit wiederholen.
Alle wiederholen Wiederholen Sie alle Elemente in der Wiedergabeliste, sobald das letzte Element abgespielt wurde.
Alle wiederholen und Zufallsmix Zufallsmix ab und wiederhole alle Elemente in der Wiedergabeliste, sobald das letzte Element der Wiedergabeliste abgespielt wurde.
Zufallsmix Du kannst die Medien in deiner Medienwarteschlange als Zufallsmix wiedergeben.
Untertitel aktivieren / deaktivieren Untertitel für Ihre Medien aktivieren oder deaktivieren Die Funktion „Aktivieren / Deaktivieren“ ist auch für die einzelnen Sprachen verfügbar.
Zur absoluten Zeit springen Springt zur angegebenen absoluten Zeit.
Spulen auf Zeit relativ zur aktuellen Zeit Springt im angegebenen Zeitraum zur aktuellen Wiedergabezeit vor oder zurück.
Noch einmal spielen Starte die gerade wiedergegebene Mediendatei neu oder spiele das zuletzt wiedergegebene Medienelement ab, wenn gerade keine Medien abgespielt werden.
Wiedergaberate festlegen Variieren Sie die Medienwiedergaberate. Dies sollte standardmäßig berücksichtigt werden. Sie können den Nachrichten-Abfangende SET_PLAYBACK_RATE verwenden, um eingehende Ratenanfragen zu überschreiben.

Unterstützte Medienbefehle per Sprachbefehl

So verhindern Sie, dass durch einen Sprachbefehl ein Medienbefehl auf einem Assistant ausgelöst wird: aktiviert ist, müssen Sie zunächst den unterstützte Medienbefehle die Sie unterstützen möchten. Dann müssen Sie diese Befehle erzwingen, indem Sie die CastReceiverOptions.enforceSupportedCommands Property. Die Benutzeroberfläche von Cast SDK-Absendern und Geräten mit Touchscreen wird geändert zu diese Konfigurationen widerspiegeln. Ist die Kennzeichnung nicht aktiviert, wird die eingehende Stimme ausgeführt werden.

Wenn Sie z. B. PAUSE von Ihren Absenderanwendungen zulassen und Geräte mit Touchscreen verwenden, müssen Sie Ihren Receiver ebenfalls so konfigurieren, Einstellungen. Nach der Konfiguration werden eingehende Sprachbefehle verworfen, sofern dies nicht der Fall ist in der Liste der unterstützten Befehle.

Im folgenden Beispiel geben wir die CastReceiverOptions beim Start an. CastReceiverContext. Jetzt unterstützen wir den Befehl PAUSE und wurde erzwungen, dass der Player nur diesen Befehl unterstützt. Wenn ein Sprachbefehl einen anderen Vorgang anfordert, z. B. SEEK, wird er abgelehnt. Die Nutzenden wird darauf hingewiesen, dass der Befehl noch nicht unterstützt wird.

const context = cast.framework.CastReceiverContext.getInstance();

context.start({
  enforceSupportedCommands: true,
  supportedCommands: cast.framework.messages.Command.PAUSE
});

Sie können für jeden Befehl, den Sie einschränken möchten, eine separate Logik anwenden. Entfernen das Flag enforceSupportedCommands und für jeden Befehl, den Sie ausführen möchten, können Sie die eingehende Nachricht abfangen. Hier fangen wir die Anfrage ab, vom SDK bereitgestellte Befehle, damit SEEK-Befehle an Geräte mit integriertem Assistant ausgegeben werden keine Suche in Ihrer Web Receiver-Anwendung auslösen.

Geben Sie für Medienbefehle, die von Ihrer Anwendung nicht unterstützt werden, eine entsprechende die Ursache des Fehlers sein, NOT_SUPPORTED

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.SEEK,
  seekData => {
    // Block seeking if the SEEK supported media command is disabled
    if (!(playerManager.getSupportedMediaCommands() & cast.framework.messages.Command.SEEK)) {
      let e = new cast.framework.messages.ErrorData(cast.framework.messages.ErrorType
      .INVALID_REQUEST);
      e.reason = cast.framework.messages.ErrorReason.NOT_SUPPORTED;
      return e;
    }

    return seekData;
  });

Hintergrundwiedergabe durch Sprachaktivität

Wenn die Cast-Plattform den Ton Ihrer App aufgrund von Assistant im Hintergrund abspielt z. B. das Anhören von Gesprochenen oder Antworten, FocusState Nachricht von NOT_IN_FOCUS an Web Receiver gesendet, wenn der die Aktivität beginnt. Eine weitere Nachricht mit IN_FOCUS wird gesendet, wenn die Aktivität endet. Je nach App und wiedergegebenen Medien kann es sinnvoll sein, Medienwiedergabe pausieren, wenn FocusState den Wert NOT_IN_FOCUS hat, indem die Nachricht abgefangen wird Geben Sie FOCUS_STATE ein.

Beispielsweise ist es ratsam, die Wiedergabe von Hörbüchern zu pausieren, wenn der Assistant antwortet auf eine Nutzeranfrage.

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.FOCUS_STATE,
  focusStateRequestData => {
    // Pause content when the app is out of focus. Resume when focus is restored.
    if (focusStateRequestData.state == cast.framework.messages.FocusState.NOT_IN_FOCUS) {
      playerManager.pause();
    } else {
      playerManager.play();
    }

    return focusStateRequestData;
  });

Sprachspezifische Untertitelsprache

Wenn ein Nutzer die Sprache für die Untertitel nicht explizit angibt, Die Sprache, die für Untertitel verwendet wird, entspricht der Sprache, in der der Befehl gesprochen wurde. In diesen Szenarien isSuggestedLanguage der eingehenden Nachricht gibt an, ob die zugeordnete Sprache die vom Nutzer vorgeschlagen oder ausdrücklich angefordert wurden.

Beispielsweise ist isSuggestedLanguage für den Befehl „Hey Google,true Untertitel einschalten“, da die Sprache aus der Sprache abgeleitet wurde, Befehl gesprochen. Wenn die Sprache explizit angefordert wird, zum Beispiel in "OK Google, aktiviere englische Untertitel“ isSuggestedLanguage ist auf false gesetzt.

Metadaten und Sprachübertragung

Zwar werden Sprachbefehle vom Web Receiver standardmäßig verarbeitet, aber Sie sollten um sicherzustellen, dass die Metadaten für deine Inhalte vollständig und genau sind. Dadurch wird sichergestellt, Sprachbefehle werden von Assistant ordnungsgemäß verarbeitet und die Metadaten neuen Oberflächen wie der Google Home App und Smart Displays wie Google Home Hub

Stream-Übertragung

Die Beibehaltung des Sitzungsstatus ist die Grundlage der Streamübertragung. können Nutzer vorhandene Audio- und Videostreams per Sprachbefehl, über Google Home eine App oder ein Smart Display verwenden. Die Medienwiedergabe wird auf einem Gerät (Quelle) gestoppt und auf einem anderen fortgesetzt (das Ziel). Jedes Übertragungsgerät mit der neuesten Firmware kann als Quelle oder Ziel in einem Streamübertragung.

Der Ereignisablauf bei der Stream-Übertragung sieht so aus:

  1. Auf dem Quellgerät: <ph type="x-smartling-placeholder">
      </ph>
    1. Medienwiedergabe wird beendet.
    2. Die Web Receiver-Anwendung erhält einen Befehl zum Speichern der aktuellen Medien. Bundesstaat.
    3. Die Web Receiver-Anwendung wurde beendet.
  2. Auf dem Zielgerät: <ph type="x-smartling-placeholder">
      </ph>
    1. Die Web Receiver-Anwendung wird geladen.
    2. Die Web Receiver-Anwendung erhält einen Befehl zum Wiederherstellen der gespeicherten Medien. Bundesstaat.
    3. Die Medienwiedergabe wird fortgesetzt.

Zu den Elementen des Medienstatus gehören:

  • Bestimmte Position oder der Zeitstempel des Songs, Videos oder Medienelements
  • Das Video wird in eine größere Warteschlange eingereiht, z. B. in einer Playlist oder im Radio des Künstlers.
  • Der authentifizierte Nutzer.
  • Wiedergabestatus (z. B. „Wiedergabe“ oder „Pausiert“)

Stream-Übertragung aktivieren

So implementieren Sie die Stream-Übertragung für Ihren Web Receiver:

  1. Aktualisieren supportedMediaCommands mit dem Befehl STREAM_TRANSFER: 
    playerManager.addSupportedMediaCommands(
cast.framework.messages.Command.STREAM_TRANSFER, true);
  2. Überschreiben Sie optional die Nachrichten SESSION_STATE und RESUME_SESSION Abfangenden, wie unter Sitzung beibehalten Bundesstaat/-land. Überschreiben Sie diese nur, wenn dies für benutzerdefinierte Daten erforderlich ist. die als Teil des Sitzungs-Snapshots gespeichert werden sollen. Andernfalls wird die Standardeinstellung Implementierung zur Beibehaltung des Sitzungsstatus unterstützt die Streamübertragung.

Sitzungsstatus beibehalten

Das Web Receiver SDK bietet eine Standardimplementierung für Web Receiver-Apps zum Sitzungsstatus beibehalten, indem Sie einen Snapshot des aktuellen Medienstatus erstellen, Status in eine Ladeanfrage umwandeln und die Sitzung mit der Ladeanfrage fortsetzen.

Die vom Web Receiver generierte Ladeanforderung kann in der SESSION_STATE-Nachrichtenabfanger, falls erforderlich. Wenn Sie benutzerdefinierte Daten hinzufügen möchten in die Ladeanfrage einfügen, empfehlen wir, loadRequestData.customData

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SESSION_STATE,
    function (sessionState) {
        // Override sessionState.loadRequestData if needed.
        const newCredentials = updateCredentials_(sessionState.loadRequestData.credentials);
        sessionState.loadRequestData.credentials = newCredentials;

        // Add custom data if needed.
        sessionState.loadRequestData.customData = {
            'membership': 'PREMIUM'
        };

        return sessionState;
    });

Die benutzerdefinierten Daten können aus folgenden Quellen abgerufen werden: loadRequestData.customData im RESUME_SESSION-Nachrichtenabfanger.

let cred_ = null;
let membership_ = null;

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.RESUME_SESSION,
    function (resumeSessionRequest) {
        let sessionState = resumeSessionRequest.sessionState;

        // Modify sessionState.loadRequestData if needed.
        cred_ = sessionState.loadRequestData.credentials;

        // Retrieve custom data.
        membership_ = sessionState.loadRequestData.customData.membership;

        return resumeSessionRequest;
    });

Inhalte vorab laden

Web Receiver unterstützt das Vorabladen von Medienelementen nach der aktuellen Wiedergabe. Element in der Warteschlange.

Beim Vorabladen werden mehrere Segmente des anstehende Elemente. Die Spezifikation erfolgt auf der preloadTime Wert im Feld Objekt QueueItem (standardmäßig 20 Sekunden, wenn nicht angegeben). Die Zeit wird in Sekunden angegeben. relativ zum Ende des gerade wiedergegebenen Elements . Nur positive Werte sind gültig sein. Wenn der Wert beispielsweise 10 Sekunden beträgt, wird dieses Element 10 Sekunden vorab geladen. Sekunden, bevor das vorherige Element beendet ist. Wenn die Zeit für das Vorabladen länger ist als die für "currentItem" verbleibende Zeit, erfolgt das Vorabladen, sobald möglich. Wenn also für das „QueueItem“ ein sehr hoher Wert für „preload“ angegeben ist, immer dann, wenn wir das aktuelle Element spielen, das nächste Element bereits vorab geladen wird. Die Einstellung und Wahl der Optionen an den Entwickler, da dieser Wert die Bandbreite und Streamingleistung beeinflussen kann des aktuell wiedergegebenen Elements.

Das Vorabladen funktioniert standardmäßig für HLS-, DASH- und Smooth Streaming-Content.

Normale MP4-Video- und Audiodateien wie MP3 werden nicht als Cast-Datei vorab geladen. Geräte unterstützen nur ein Medienelement und können nicht zum Vorabladen verwendet werden, während ein Das vorhandene Inhaltselement wird noch abgespielt.

Benutzerdefinierte Nachrichten

Der Nachrichtenaustausch ist die wichtigste Interaktionsmethode für Web Receiver-Anwendungen.

Ein Absender sendet Nachrichten an einen Webempfänger, indem er die Absender-APIs für die Plattform des Absenders (Android, iOS, Web) Das Ereignisobjekt (das ist die Manifestation einer Nachricht), die an die Ereignis-Listener übergeben wird, enthält ein (event.data), bei dem die Daten die Eigenschaften des einen bestimmten Ereignistyp haben.

Eine Web Receiver-Anwendung kann Nachrichten auf einer bestimmten -Namespace auf sie zugegriffen werden. Dadurch wird davon ausgegangen, dass die Web Receiver-Anwendung dieses Namespace-Protokoll unterstützt. Alle verbundenen Absender, die über diesen Namespace kommunizieren müssen, um das entsprechende Protokoll zu verwenden.

Alle Namespaces werden durch einen String definiert und müssen mit „urn:x-cast:“ beginnen gefolgt von einer beliebigen Zeichenfolge. Beispiel: „urn:x-cast:com.example.cast.mynamespace“.

Hier ist ein Code-Snippet für den Web Receiver, mit dem benutzerdefinierte Nachrichten von Verbundene Absender:

const context = cast.framework.CastReceiverContext.getInstance();

const CUSTOM_CHANNEL = 'urn:x-cast:com.example.cast.mynamespace';
context.addCustomMessageListener(CUSTOM_CHANNEL, function(customEvent) {
  // handle customEvent.
});

context.start();

Ebenso können Web Receiver-Anwendungen die Absender über den Status des Web Receivers, indem Nachrichten an verbundene Absender gesendet werden. Web Receiver Anwendung kann Nachrichten über sendCustomMessage(namespace, senderId, message) am CastReceiverContext Ein Web Receiver kann Nachrichten an einen einzelnen Absender senden, entweder als Antwort auf empfangene Nachricht oder aufgrund einer Änderung des Anwendungsstatus angezeigt wird. Mehr als Punkt-zu-Punkt Messaging (mit einer Grenze von 64 KB) kann ein Web Receiver auch Nachrichten an alle alle verbundenen Absender.

Streaming für Audiogeräte

Informationen zur Audiounterstützung finden Sie im Leitfaden zu Google Cast für Audiogeräte. ausschließliche Wiedergabe.

Android TV

In diesem Abschnitt wird erläutert, wie Google Web Receiver Ihre Eingaben zur Wiedergabe, und Android TV-Kompatibilität.

Anwendung in die Fernbedienung einbinden

Google Web Receiver auf dem Android TV-Gerät übersetzt die Eingabe über die Steuerungseingänge des Geräts (z.B. eine Handfernbedienung) für die Medienwiedergabe Nachrichten, die für den urn:x-cast:com.google.cast.media-Namespace definiert sind, als unter Nachrichten zur Medienwiedergabe beschrieben. Ihr Die Anwendung muss diese Nachrichten unterstützen, um die Medien der Anwendung zu steuern. Wiedergabe, um eine grundlegende Wiedergabesteuerung über Android TV zu ermöglichen Eingaben.

Richtlinien für die Kompatibilität mit Android TV

Im Folgenden finden Sie einige Empfehlungen und häufige Fehler, die Sie vermeiden sollten, Ihre App mit Android TV kompatibel ist:

  • Beachten Sie, dass der User-Agent-String sowohl "Android" und "CrKey"; einige Websites den Nutzer auf eine reine mobile Website weiterleiten, „Android“ . Nicht davon ausgehen, dass „Android“ im User-Agent-String immer zeigt einen mobilen Nutzer an.
  • Der Mediastack von Android kann transparente GZIP zum Abrufen von Daten verwenden. Achten Sie darauf, können deine Mediendaten auf Accept-Encoding: gzip reagieren.
  • HTML5-Medienereignisse für Android TV können anders ausgelöst werden als Chromecast handelt, können Probleme auftreten, die bei Chromecast verborgen waren.
  • Beim Aktualisieren der Medien medienbezogene Ereignisse verwenden, die von <audio>/<video> ausgelöst wurden wie timeupdate, pause und waiting. Netzwerknutzung vermeiden ähnlichen Ereignissen wie progress, suspend und stalled, da diese in der Regel plattformabhängig ist. Siehe Medienereignisse finden Sie weitere Informationen zur Verarbeitung von Medienereignissen in Ihrem Receiver.
  • Achten Sie beim Konfigurieren der HTTPS-Zertifikate der Empfängerwebsite darauf, CA-Zwischenzertifikate Weitere Informationen finden Sie in der Qualsys SSL-Testseite verify: Wenn der Pfad für vertrauenswürdige Zertifizierungsstellen für Ihre Website eine Zertifizierungsstelle enthält Zertifikat mit dem Label „zusätzlicher Download“ erhalten, dann wird es auf Android-basierten Plattformen.
  • Während Chromecast die Empfängerseite auf einer 720p-Grafikebene anzeigt, werden andere Auf Streamingplattformen wie Android TV kann die Seite in einer Auflösung von bis zu 1080p angezeigt werden. Sicherstellen, wird die Empfängerseite bei verschiedenen Auflösungen problemlos skaliert.
Zurück
Benutzerdefinierter Webempfänger
Weiter
HLS bei der Shaka Player-Migration