Cómo agregar funciones principales a tu receptor web personalizado

Esta página contiene fragmentos de código y descripciones de las funciones disponibles para una app receptora web personalizada.

  1. Un elemento cast-media-player que representa la IU del reproductor integrado que se proporcionan con el receptor web.
  2. Estilos personalizados similares a los de CSS para el elemento cast-media-player a fin de aplicar ajustes de diseño a varios elementos de la IU, como background-image, splash-image y font-family
  3. Un elemento de secuencia de comandos para cargar el framework del receptor web.
  4. Código JavaScript para interceptar mensajes y controlar eventos.
  5. Fila para reproducción automática.
  6. Opciones para configurar la reproducción.
  7. Opciones para establecer el contexto del receptor web.
  8. Opciones para establecer comandos que son compatibles con la app del receptor web.
  9. Una llamada de JavaScript para iniciar la aplicación del receptor web.

Configuración y opciones de la aplicación

Configura la aplicación

El CastReceiverContext es la clase más externa expuesta al desarrollador y administra la carga de y controla la inicialización del SDK del receptor web. El SDK proporciona APIs que permiten a los desarrolladores de aplicaciones configurar el SDK a través de CastReceiverOptions Estos parámetros de configuración se evalúan una vez por inicio de la aplicación y se pasan a el SDK cuando configures el parámetro opcional en la llamada a start

En el siguiente ejemplo, se muestra cómo anular el comportamiento predeterminado para detectar si un la conexión del remitente sigue conectada de forma activa. Cuando el receptor web no haya hayas podido comunicarte con un remitente por maxInactivity segundos, se despacha un evento SENDER_DISCONNECTED. La siguiente configuración anula este tiempo de espera. Esto puede ser útil para depurar problemas, ya que evita que la app receptora web cierre la sesión del depurador remoto de Chrome cuando haya no hay remitentes conectados en el estado IDLE.

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

Configura el reproductor

Cuando se carga contenido, el SDK del receptor web proporciona una forma de configurar la reproducción como DRM, información, de configuración de reintento y solicitudes cast.framework.PlaybackConfig Esta información es manejada por PlayerManager y se evalúa en el momento en que se crean los jugadores. Se crean los jugadores cada vez que se pasa una carga nueva al SDK del receptor web. Modificaciones a las PlaybackConfig después de que se crea el reproductor se evalúan en la siguiente carga de contenido. El SDK proporciona los siguientes métodos para modificar la PlaybackConfig

  • CastReceiverOptions.playbackConfig para anular las opciones de configuración predeterminadas CastReceiverContext
  • PlayerManager.getPlaybackConfig() para obtener la configuración actual.
  • PlayerManager.setPlaybackConfig() para anular la configuración actual. Este parámetro de configuración se aplica a todos en las cargas posteriores o hasta que se anule de nuevo.
  • PlayerManager.setMediaPlaybackInfoHandler() para aplicar configuraciones adicionales solo para el elemento multimedia que se carga la parte superior de la configuración actual. Se llama al controlador justo antes del reproductor. de la creación de cuentas de servicio. Los cambios que se hagan aquí no son permanentes y no se incluyen en las consultas a getPlaybackConfig(). Cuando se cargue el siguiente elemento multimedia, este controlador cuando se vuelve a llamar.

En el siguiente ejemplo, se muestra cómo configurar PlaybackConfig cuando se inicializa el CastReceiverContext La configuración anula las solicitudes salientes de obtener manifiestos. El controlador especifica que las solicitudes de Control de acceso de CORS deben crearse con credenciales como cookies o encabezados de autorización.

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

En el siguiente ejemplo, se muestra cómo anular PlaybackConfig con el método get y set en PlayerManager. Este parámetro configura el reproductor para reanudar la reproducción de contenido después de que se haya cargado 1 segmento

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

En el siguiente ejemplo, se muestra cómo anular el PlaybackConfig para una carga específica con el controlador de información de reproducción multimedia. El controlador llama a una aplicación implementó el método getLicenseUrlForMedia para obtener licenseUrl del contentId del elemento actual.

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

  return playbackConfig;
});

Receptor de eventos

El SDK de receptor web permite que tu app de receptor web controle los eventos del reproductor. El el objeto de escucha de eventos toma un cast.framework.events.EventType parámetro (o un array de estos parámetros) que especifica los eventos que debería activar el objeto de escucha. Arrays preconfigurados cast.framework.events.EventType, que son útiles para la depuración, se pueden encontrar en cast.framework.events.category El parámetro de evento proporciona información adicional sobre el evento.

Por ejemplo, si quieres saber cuándo un mediaStatus se transmite el cambio, puedes usar la siguiente lógica para manejar el evento:

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
});

Intercepción de mensajes

El SDK del receptor web permite que tu aplicación del receptor web intercepte mensajes y ejecutar código personalizado en esos mensajes. El interceptor de mensajes toma un cast.framework.messages.MessageType parámetro que especifica el tipo de mensaje que se debe interceptar.

El interceptor debería devolver la solicitud modificada o una promesa que resuelva el problema. con el valor de la solicitud modificado. Si devuelves null, no se llamará a controlador de mensajes predeterminado. Consulta Cómo cargar contenido multimedia para obtener más información.

Por ejemplo, si quieres cambiar los datos de la solicitud de carga, puedes usar el la siguiente lógica para interceptarlo y modificarlo:

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();

Manejo de errores

Cuando se producen errores en el interceptor de mensajes, tu app receptora web debería devolver una apropiada cast.framework.messages.ErrorType y 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;
        });
    });

Intercepción de mensajes frente a objeto de escucha de eventos

Algunas diferencias clave entre la intercepción de mensajes y el objeto de escucha de eventos son las siguientes: sigue:

  • Un objeto de escucha de eventos no te permite modificar los datos de la solicitud.
  • Un objeto de escucha de eventos es mejor para activar estadísticas o una función personalizada.
playerManager.addEventListener(cast.framework.events.category.CORE,
    event => {
        console.log(event);
    });
  • La intercepción de mensajes te permite escucharlos, interceptarlos y modificar los datos de la solicitud en sí.
  • La intercepción de mensajes se utiliza mejor para manejar la lógica personalizada en relación con lo siguiente: solicitar datos.

Carga de contenido multimedia

MediaInformation proporciona varias propiedades para cargar contenido multimedia en la cast.framework.messages.MessageType.LOAD, incluido el entity, contentUrl y contentId.

  • La entity es la propiedad sugerida para que uses en la implementación, tanto para las URLs de envío apps receptoras. La propiedad es una URL de vínculo directo que puede ser una playlist o contenido multimedia. La aplicación debe analizar esta URL y propagar al menos uno de los otros dos campos.
  • La contentUrl corresponde a la URL reproducible que usará el reproductor para cargar el contenido. Por ejemplo, esta URL podría dirigir a un manifiesto de DASH.
  • La contentId Puede ser una URL de contenido reproducible (similar a la de contentUrl propiedad) o un identificador único del contenido o la playlist que se está cargando. Si usas esta propiedad como identificador, tu aplicación debe completar un URL reproducible en contentUrl.

La sugerencia es usar entity para almacenar el ID real o los parámetros clave. Usa contentUrl para la URL del contenido multimedia. Un ejemplo de esto se muestra en el el siguiente fragmento, en el que entity está presente en la solicitud LOAD y se recupera contentUrl reproducible:

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;
        });
    });

Funciones del dispositivo

El getDeviceCapabilities proporciona información del dispositivo en el dispositivo de transmisión conectado y el video o dispositivo de audio conectado a él. El método getDeviceCapabilities proporciona compatibilidad información de Asistente de Google, Bluetooth y la pantalla y el audio conectados dispositivos.

Este método devuelve un objeto que puedes consultar pasando uno de los para obtener la capacidad del dispositivo para esa enumeración. Las enumeraciones son definidos en cast.framework.system.DeviceCapabilities

En este ejemplo, se comprueba si el dispositivo receptor web es capaz de reproducir contenido HDR y DolbyVision (DV) con las teclas IS_HDR_SUPPORTED y IS_DV_SUPPORTED, respectivamente.

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();

Cómo controlar la interacción del usuario

Un usuario puede interactuar con tu aplicación de receptor web a través del remitente apps (Web, iOS y Android), comandos por voz compatibles con el Asistente dispositivos, controles de tacto en pantallas inteligentes y controles remotos en Android TV dispositivos. El SDK de Cast proporciona varias APIs para permitir que la app del receptor web realice lo siguiente: para manejar estas interacciones, actualizar la IU de la aplicación con estados de las acciones del usuario, y, de manera opcional, envía los cambios para actualizar cualquier servicio de backend.

Comandos multimedia compatibles

Los estados de los controles de la IU son controlados por el MediaStatus.supportedMediaCommands para controladores expandidos, receptores y controles remotos de iOS y Android apps que se ejecutan en dispositivos táctiles y apps receptoras en dispositivos Android TV. Cuando un elemento Command a nivel de bits particular en la propiedad, los botones que son relacionadas con esa acción estén habilitadas. Si no se establece el valor, entonces el botón inhabilitado. Estos valores se pueden cambiar en el receptor web de la siguiente manera:

  1. Usando PlayerManager.setSupportedMediaCommands para establecer Commands
  2. Agregar un nuevo comando con addSupportedMediaCommands
  3. Quitar un comando existente con removeSupportedMediaCommands
playerManager.setSupportedMediaCommands(cast.framework.messages.Command.SEEK |
  cast.framework.messages.Command.PAUSE);

Cuando el receptor prepare el MediaStatus actualizado, incluirá lo siguiente: cambios en la propiedad supportedMediaCommands. Cuando el estado es transmitida, las apps emisoras conectadas actualizarán los botones de su IU según corresponda.

Para obtener más información sobre dispositivos táctiles y comandos multimedia compatibles, consulta Accessing UI controls .

Cómo administrar los estados de acción del usuario

Cuando los usuarios interactúan con la IU o envían comandos por voz, pueden controlar el reproducción del contenido y las propiedades relacionadas con el elemento que se está reproduciendo. Solicitudes que controlan la reproducción son controladas automáticamente por el SDK. Solicitudes que modificar las propiedades del elemento que se está reproduciendo, como un comando LIKE, requerir que la aplicación receptora los maneje. El SDK proporciona una serie de para manejar estos tipos de solicitudes. Para respaldar estas solicitudes, se requiere lo siguiente: se debe realizar:

  • Establece el MediaInformation. userActionStates con las preferencias del usuario cuando se carga un elemento multimedia.
  • Intercepta los mensajes USER_ACTION y determina la acción solicitada.
  • Actualiza el UserActionState de MediaInformation para actualizar la IU.

En el siguiente fragmento, se intercepta la solicitud LOAD y se propaga MediaInformation de LoadRequestData. En este caso, al usuario le gusta el contenido que se carga.

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;
    });

El siguiente fragmento intercepta el mensaje USER_ACTION y controla las llamadas el backend con el cambio solicitado. Luego, hace una llamada para actualizar la UserActionState en el receptor

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;
    });
});

El siguiente fragmento simula una llamada a un servicio de backend. La función verifica UserActionRequestData para ver el tipo de cambio que solicitó el usuario y solo hace una llamada de red si el backend admite la acción.

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));
    }
  });
}

El siguiente fragmento toma el UserActionRequestData y agrega o quita el UserActionState de MediaInformation. Actualiza el UserActionState de MediaInformation cambia el estado del botón que se asocia con la acción solicitada. Este cambio se refleja en el modelo de IU de controles de pantalla, IU de Android TV y app de control remoto. También se usa que se transmite a través de mensajes salientes de MediaStatus para actualizar la IU del controlador expandido para remitentes de iOS y Android.

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

Comandos por voz

Los siguientes comandos multimedia son compatibles actualmente con el SDK del receptor web para Dispositivos compatibles con el Asistente. Las implementaciones predeterminadas de estos comandos son se encuentran en cast.framework.PlayerManager

Comando Descripción
Reproducir Reproduce o reanuda la reproducción desde el estado de pausa.
Pausar Pausa el contenido que se está reproduciendo.
Anterior Saltar al elemento multimedia anterior de la fila de contenido multimedia
Siguiente Pasa al siguiente elemento multimedia de la fila de contenido multimedia.
Detener Detén el contenido multimedia en reproducción.
No repetir Inhabilita la repetición de elementos multimedia en la fila una vez que el último elemento de la fila termine de reproducirse.
Repetir sencillo Repetir indefinidamente el contenido multimedia que se está reproduciendo
Repetir todo Repite todos los elementos en la fila una vez que se reproduzca el último elemento de la fila.
Repetir todo y reproducir aleatoriamente Cuando se termine de reproducir el último elemento de la fila, mezcla la fila y repite todos los elementos de la fila.
Reproducción aleatoria Reproduce aleatoriamente los elementos multimedia de tu fila.
Activar o desactivar los subtítulos Habilita o inhabilita los subtítulos para tu contenido multimedia. Las opciones de habilitar o inhabilitar también están disponibles según el idioma.
Buscar tiempo absoluta Salta al tiempo absoluto especificado.
Búsqueda de la hora relativa a la hora actual Adelantar o retroceder un período de tiempo especificado en relación con el tiempo de reproducción actual
Volver a jugar Reinicia el contenido multimedia que se está reproduciendo o reproduce el último si no se está reproduciendo nada.
Establece la velocidad de reproducción Variar la velocidad de reproducción del contenido multimedia Esto se debe controlar de forma predeterminada. Puedes usar el interceptor de mensajes SET_PLAYBACK_RATE para anular las solicitudes de frecuencia entrantes.

Comandos multimedia compatibles con la voz

Para evitar que un comando por voz active un comando multimedia en un Asistente, sigue estos pasos: habilitado, primero debes configurar el comandos de contenido multimedia compatibles que planeas respaldar. Luego, debes aplicar esos comandos habilitando el CastReceiverOptions.enforceSupportedCommands propiedad. La IU de los dispositivos táctiles y remitentes del SDK de Cast cambiará a reflejan estas configuraciones. Si la marca no está habilitada, la ventana de se ejecutarán comandos.

Por ejemplo, si permites PAUSE desde tus aplicaciones emisoras y dispositivos táctiles, también debes configurar tu receptor para que refleje esos configuración. Cuando se configura, se descartará cualquier comando por voz entrante si no lo hace incluido en la lista de comandos compatibles.

En el siguiente ejemplo, proporcionamos CastReceiverOptions cuando comenzamos CastReceiverContext Agregamos compatibilidad con el comando PAUSE y para que el jugador admita solo ese comando. Ahora, si un comando por voz solicita otra operación, como SEEK, se rechazará. El usuario será y se te notifica que el comando aún no es compatible.

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

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

Puedes aplicar lógica independiente para cada comando que quieras restringir. Quitar la marca enforceSupportedCommands y para cada comando que quieras ejecutar restringir, puedes interceptar el mensaje entrante. Aquí interceptamos la solicitud que proporciona el SDK para que los comandos de SEEK se envíen a dispositivos compatibles con el Asistente no actives una búsqueda en tu aplicación del receptor web.

Para los comandos de medios que tu aplicación no admita, devuelve una respuesta un motivo de error, como 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;
  });

Reproducción en segundo plano de la actividad de voz

Si la plataforma de transmisión reproduce en segundo plano el sonido de tu aplicación debido a Asistente actividad, como escuchar el discurso de un usuario o responder, una FocusState el mensaje de NOT_IN_FOCUS se envía a la aplicación del receptor web cuando la inicio de la actividad. Se envía otro mensaje con IN_FOCUS cuando finaliza la actividad. Según tu aplicación y el contenido multimedia que se esté reproduciendo, es posible que quieras Pausa el contenido multimedia cuando FocusState es NOT_IN_FOCUS interceptando el mensaje escribe FOCUS_STATE.

Por ejemplo, no es una buena experiencia del usuario pausar la reproducción de un audiolibro si la Asistente está respondiendo a una consulta del usuario.

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;
  });

Idioma de subtítulos especificado por voz

Si un usuario no indica explícitamente el idioma de los subtítulos, el El idioma que se usa para los subtítulos es el mismo en el que se pronunció el comando. En estas situaciones, isSuggestedLanguage parámetro del mensaje entrante indica si el idioma asociado fue sugerido o solicitado explícitamente por el usuario.

Por ejemplo, isSuggestedLanguage se configura como true para el comando "Hey Google, activar los subtítulos", porque el idioma se infirió a partir del idioma en el que se pronunció el comando. Si el idioma se solicita explícitamente, como en "OK" Google, activa los subtítulos en inglés isSuggestedLanguage se configura como false.

Metadatos y transmisión de voz

Si bien el receptor web maneja los comandos de voz de forma predeterminada, deberías Garantizar que los metadatos de tu contenido estén completos y sean precisos. Esto garantiza que los comandos por voz son administrados correctamente por el Asistente y que los metadatos se adapte correctamente a los nuevos tipos de interfaces, como la app de Google Home y con pantallas inteligentes, como Google Home Hub.

Transferencia de transmisión

Preservar el estado de la sesión es la base de la transferencia de transmisión, en la que los usuarios pueden transferir transmisiones de audio y video existentes entre dispositivos mediante comandos por voz, Google Home una app o una pantalla inteligente. El contenido multimedia deja de reproducirse en un dispositivo (la fuente) y continúa en otro (el destino). Cualquier dispositivo de transmisión con el firmware más reciente puede funcionar como fuente o destino en un de transmisión continua.

El flujo de eventos para la transferencia de transmisión es el siguiente:

  1. En el dispositivo de origen:
    1. El contenido multimedia se detiene.
    2. La aplicación del receptor web recibe un comando para guardar el contenido multimedia actual. state.
    3. Se cerró la aplicación del receptor web.
  2. En el dispositivo de destino:
    1. Se cargó la aplicación del receptor web.
    2. La aplicación del receptor web recibe un comando para restablecer el contenido multimedia guardado. state.
    3. Se reanudará la reproducción del contenido multimedia.

Entre los elementos del estado multimedia, se incluyen los siguientes:

  • Es la posición o la marca de tiempo específica de la canción, el video o el elemento multimedia.
  • Su lugar en una fila más amplia (como una playlist o la radio de un artista)
  • El usuario autenticado
  • Estado de reproducción (por ejemplo, reproducción o pausado)

Habilitando la transferencia de transmisión

Para implementar la transferencia de transmisión en tu receptor web, sigue estos pasos:

  1. Actualizar supportedMediaCommands con el comando STREAM_TRANSFER: 
    playerManager.addSupportedMediaCommands(
cast.framework.messages.Command.STREAM_TRANSFER, true);
  2. De manera opcional, anula los mensajes SESSION_STATE y RESUME_SESSION interceptores, como se describe en Cómo conservar la sesión estado. Solo anula estos valores si se necesitan datos personalizados se almacene como parte de la instantánea de la sesión. De lo contrario, el valor predeterminado la implementación para preservar los estados de la sesión admitirá la transferencia de transmisión.

Conserva el estado de la sesión

El SDK del receptor web proporciona una implementación predeterminada para las apps del receptor web para conservar los estados de la sesión tomando una instantánea del estado actual del contenido multimedia, convirtiendo el estado en una solicitud de carga y reanudar la sesión con la solicitud de carga.

La solicitud de carga que genera el receptor web se puede anular en el Interceptor de mensajes SESSION_STATE si es necesario. Si quieres agregar datos personalizados en la solicitud de carga, te sugerimos 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;
    });

Los datos personalizados se pueden recuperar loadRequestData.customData en el interceptor de mensajes RESUME_SESSION.

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;
    });

Carga previa de contenido

El receptor web admite la precarga de elementos multimedia después de la reproducción actual. elemento en la fila.

La operación de precarga descarga previamente varios segmentos de la los próximos elementos. La especificación se realiza preloadTime en la Objeto QueueItem (el valor predeterminado es de 20 segundos si no se proporciona). La hora se expresa en segundos, en relación con el final del elemento que se está reproduciendo en ese momento . Solo los valores positivos válido. Por ejemplo, si el valor es 10 segundos, este elemento se precargará 10 segundos segundos antes de que el elemento anterior haya finalizado. Si el tiempo de precarga es mayor que el tiempo restante en el elemento currentItem, la precarga se producirá apenas como sea posible. Entonces, si se especifica un valor muy grande de precarga en el elemento queueItem, podría lograr el efecto de que cuando estamos reproduciendo el elemento actual del que ya está precargando el siguiente elemento. Sin embargo, dejamos la configuración y la elección de esto al desarrollador, ya que este valor puede afectar el rendimiento del ancho de banda y de la transmisión del elemento que se está reproduciendo.

La precarga funcionará para contenido de transmisión HLS, DASH y Smooth de forma predeterminada.

Los archivos de audio y video MP4 normales, como MP3, no se precargarán como Cast los dispositivos admiten un solo elemento multimedia y no se pueden usar para precargar mientras hay una el elemento de contenido existente aún se está reproduciendo.

Mensajes personalizados

El intercambio de mensajes es el método de interacción clave para las aplicaciones del receptor web.

Un remitente envía mensajes a un receptor web a través de las APIs de remitente para el la plataforma en la que se ejecuta el remitente (Android, iOS o la Web). El objeto de evento (que es la manifestación de un mensaje) que se pasa a los objetos de escucha de eventos tiene un elemento de datos (event.data) en el que los datos adquieren las propiedades del un tipo de evento específico.

Una aplicación de receptor web puede optar por escuchar mensajes en un espacio de nombres. En ese sentido, se dice que la aplicación receptora web admite ese protocolo de espacio de nombres. Luego, depende de los remitentes conectados que lo deseen. para comunicarse en ese espacio de nombres para usar el protocolo adecuado.

Todos los espacios de nombres se definen con una cadena y deben comenzar con "urn:x-cast:" seguida de cualquier cadena. Por ejemplo: “urn:x-cast:com.example.cast.mynamespace”

Este es un fragmento de código para que el receptor web escuche los mensajes personalizados de remitentes conectados:

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();

De forma similar, las aplicaciones de receptor web pueden mantener a los remitentes informados sobre el estado del receptor web enviando mensajes a remitentes conectados. Un receptor web aplicación puede enviar mensajes usando sendCustomMessage(namespace, senderId, message) activado CastReceiverContext Un receptor web puede enviar mensajes a un remitente individual, ya sea en respuesta a un mensaje recibido o debido a un cambio de estado de la aplicación. Más allá de la orientación punto a punto (con un límite de 64 KB), un receptor web también puede transmitir mensajes a a todos los remitentes conectados.

Transmitir para dispositivos de audio

Consulta la guía de Google Cast para dispositivos de audio para obtener asistencia con el audio. solo la reproducción.

Android TV

En esta sección, se explica cómo Google Web Receiver usa tus entradas para la reproducción. y Android TV.

Cómo integrar tu aplicación con el control remoto

El Google Web Receiver que se ejecuta en el dispositivo Android TV traduce la entrada de las entradas de control del dispositivo (es decir, el control remoto de mano) como reproducción de contenido multimedia los mensajes definidos para el espacio de nombres urn:x-cast:com.google.cast.media, como que se describen en Mensajes de reproducción de contenido multimedia Tu La app debe admitir estos mensajes para controlar los medios la reproducción para permitir el control de reproducción básico desde el control de Android TV de datos.

Lineamientos para la compatibilidad con Android TV

Estas son algunas recomendaciones y errores comunes que se deben evitar para garantizar Si tu aplicación es compatible con Android TV:

  • Ten en cuenta que la cadena user-agent contiene "Android" y "CrKey"; algunos sitios pueden redireccionar a un sitio solo para dispositivos móviles porque detectan la “Android” etiqueta. No asumas que "Android" En la cadena user-agent siempre indica un usuario de dispositivo móvil.
  • La pila de contenido multimedia de Android puede usar una GZIP transparente para recuperar datos. Asegúrate de que tus datos multimedia pueden responder a Accept-Encoding: gzip.
  • Los eventos multimedia HTML5 de Android TV pueden activarse en momentos diferentes del Chromecast, esto puede revelar problemas ocultos en el Chromecast.
  • Cuando actualices el contenido multimedia, usa los eventos relacionados con el contenido multimedia que activa <audio>/<video>. elementos, como timeupdate, pause y waiting. Evita usar herramientas de redes eventos relacionados, como progress, suspend y stalled, ya que suelen ser depende de la plataforma. Consulta Eventos multimedia. para obtener más información sobre cómo controlar eventos multimedia en tu app receptora.
  • Cuando configures los certificados HTTPS del sitio receptor, asegúrate de incluir certificados de la AC intermedios. Consulta la Página de prueba de SSL de Qualsys para verificar si la ruta de certificación de confianza para tu sitio incluye una AC certificado con la etiqueta "descarga adicional", es posible que no se cargue con dispositivos Android y plataformas de Google Cloud.
  • Mientras Chromecast muestra la página del receptor en un plano gráfico de 720p, Las plataformas de transmisión, como Android TV, pueden mostrar la página en hasta 1080p. Asegúrate de que la página del receptor se ajusta bien a las distintas resoluciones.
Anterior
Receptor web personalizado
Siguiente
Migración de HLS en Shaka Player