Grabación de audio y captura de pantalla

En esta guía, se explican diferentes enfoques para grabar audio y video desde una pestaña, ventana o pantalla con APIs como chrome.tabCapture o getDisplayMedia()

Grabación de pantalla

Para la grabación de pantalla, llama a getDisplayMedia(), que activa el cuadro de diálogo. que se muestra a continuación. Esto permite al usuario seleccionar la pestaña, ventana o pantalla que desee. compartir y proporciona una indicación clara de que se está grabando.

Diálogo para compartir pantalla para example.com
Diálogo para compartir pantalla para example.com.

En el siguiente ejemplo, se solicita acceso para grabar audio y video.

const stream = await navigator.mediaDevices.getDisplayMedia({ audio: true, video: true });

Si se la llama dentro de un guion de contenido, la grabación finalizará automáticamente cuando el usuario navegue a un nuevo . Para grabar en segundo plano y entre navegaciones, usa un documento fuera de pantalla con el motivo DISPLAY_MEDIA.

Captura de pestañas basada en gestos del usuario

Si llamas a getDisplayMedia(), el navegador muestra un diálogo con el siguiente comando al usuario lo que le gustaría compartir. Sin embargo, en algunos casos, el usuario acaba de hacer clic botón de acción para invocar tu extensión para una pestaña específica y deseas comenzar a capturar la pestaña de inmediato sin este mensaje.

Graba audio y video en segundo plano.

A partir de Chrome 116, puedes llamar a la API de chrome.tabCapture en un service worker para obtener un ID de transmisión después de un gesto del usuario. Esta información puede pasarse a un documento fuera de pantalla para comenzar a grabar.

En tu service worker:

chrome.action.onClicked.addListener(async (tab) => {
  const existingContexts = await chrome.runtime.getContexts({});

  const offscreenDocument = existingContexts.find(
    (