chrome.tabCapture

Descripción

Usa la API de chrome.tabCapture para interactuar con las transmisiones de medios de pestañas.

Permisos

tabCapture

Conceptos y uso

La API de chrome.tabCapture te permite acceder a un objeto MediaStream que contiene el video y el audio de la pestaña actual. Solo se puede llamar después de que el usuario invoca una extensión, por ejemplo, haciendo clic en el botón de acción de la extensión. Esto es similar al comportamiento del permiso "activeTab".

Cómo conservar el audio del sistema

Cuando se obtiene un MediaStream para una pestaña, ya no se reproducirá audio en esa pestaña para el usuario. Esto es similar al comportamiento de la función getDisplayMedia() cuando la marca suppressLocalAudioPlayback se establece en verdadero.

Para seguir reproduciendo audio para el usuario, usa lo siguiente:

const output = new AudioContext(); const source = output.createMediaStreamSource(stream); source.connect(output.destination);

Esto crea un nuevo AudioContext y conecta el audio del MediaStream de la pestaña al destino predeterminado.

IDs de transmisión

Si llamas a chrome.tabCapture.getMediaStreamId(), se mostrará un ID de transmisión. Para acceder más tarde a un MediaStream desde el ID, usa lo siguiente:

navigator.mediaDevices.getUserMedia({   audio: {     mandatory: {       chromeMediaSource: "tab",       chromeMediaSourceId: id,     },   },   video: {     mandatory: {       chromeMediaSource: "tab",       chromeMediaSourceId: id,     },   }, });

Restricciones de uso

Después de llamar a getMediaStreamId(), existen restricciones sobre dónde se puede usar el ID de transmisión devuelto:

  • Si se especifica consumerTabId, una llamada a getUserMedia() puede usar el ID en cualquier frame de la pestaña determinada que tenga el mismo origen de seguridad.
  • Cuando no se especifica, a partir de Chrome 116, el ID se puede usar en cualquier frame con el mismo origen de seguridad en el mismo proceso de renderización que el llamador. Esto significa que un ID de transmisión obtenido en un trabajador de servicio se puede usar en un documento fuera de pantalla.

Antes de Chrome 116, cuando no se especificaba un consumerTabId, el ID de transmisión se restringía al origen de seguridad, al proceso de renderización y al marco de renderización del llamador.

Más información

Para obtener más información sobre cómo usar la API de chrome.tabCapture, consulta Grabación de audio y captura de pantalla. En este ejemplo, se muestra cómo usar tabCapture y las APIs relacionadas para resolver varios casos de uso comunes.

Tipos

CaptureInfo

Propiedades

  • pantalla completa

    booleano

    Indica si un elemento de la pestaña que se captura está en modo de pantalla completa.

  • Es el nuevo estado de captura de la pestaña.

  • tabId

    número

    Es el ID de la pestaña cuyo estado cambió.

CaptureOptions

Propiedades

GetMediaStreamOptions

Chrome 71 y versiones posteriores

Propiedades

  • consumerTabId

    número opcional

    Es el ID opcional de la pestaña que invocará getUserMedia() más adelante para consumir la transmisión. Si no se especifica, la extensión que llama puede usar la transmisión resultante. El flujo solo puede usarse en los marcos de la pestaña determinada cuya fuente de seguridad coincida con la fuente de la pestaña del consumidor. El origen de la pestaña debe ser seguro, p.ej., HTTPS.

  • targetTabId

    número opcional

    Es el ID opcional de la pestaña que se capturará. Si no se especifica, se seleccionará la pestaña activa actual. Solo se pueden usar como pestaña de destino las pestañas para las que se otorgó el permiso activeTab a la extensión.

MediaStreamConstraint

Propiedades

  • obligatorio

    objeto

  • opcional

    objeto opcional

TabCaptureState

Enum

"pending"

"active"

"stopped"

"error"

Métodos

capture()

Solo en primer plano 
chrome.tabCapture.capture(
  options: CaptureOptions,
  callback: function,
): void

Captura el área visible de la pestaña activa actualmente. La captura solo se puede iniciar en la pestaña activa actual después de que se invoca la extensión, de manera similar a como funciona activeTab. La captura se mantiene en las navegaciones de página dentro de la pestaña y se detiene cuando se cierra la pestaña o la extensión cierra la transmisión de medios.

Parámetros

  • opciones

    CaptureOptions

    Configura el flujo de medios que se devuelve.

  • callback

    función

    El parámetro callback se ve de la siguiente manera: 

    (stream: LocalMediaStream) => void

    • transmisión

      LocalMediaStream

getCapturedTabs()

chrome.tabCapture.getCapturedTabs(): Promise<CaptureInfo[]>

Devuelve una lista de las pestañas que solicitaron la captura o que se están capturando, es decir, status != stopped y status != error. Esto permite que las extensiones informen al usuario que hay una captura de pestaña existente que impediría que se realice una nueva (o para evitar solicitudes redundantes de la misma pestaña).

Muestra

  • Promise<CaptureInfo[]>

    Chrome 116 y versiones posteriores

getMediaStreamId()

Chrome 71 y versiones posteriores 
chrome.tabCapture.getMediaStreamId(
  options?: GetMediaStreamOptions,
): Promise<string>

Crea un ID de transmisión para capturar la pestaña de destino. Es similar al método chrome.tabCapture.capture(), pero devuelve un ID de transmisión de medios, en lugar de una transmisión de medios, a la pestaña del consumidor.

Parámetros

Muestra

  • Promise<string>

    Chrome 116 y versiones posteriores

Eventos

onStatusChanged

chrome.tabCapture.onStatusChanged.addListener(
  callback: function,
)

Evento que se activa cuando cambia el estado de captura de una pestaña. Esto permite que los autores de extensiones realicen un seguimiento del estado de captura de las pestañas para mantener sincronizados los elementos de la IU, como las acciones de página.

Parámetros

  • callback

    función

    El parámetro callback se ve de la siguiente manera: 

    (info: CaptureInfo) => void