Audio-opname en schermopname

Deze handleiding beschrijft verschillende methoden voor het opnemen van audio en video vanuit een tabblad, venster of scherm met behulp van API's zoals browser.tabCapture of getDisplayMedia() .

Schermopname

Voor schermopname roept u getDisplayMedia() aan. Dit activeert het onderstaande dialoogvenster. Hiermee kan de gebruiker selecteren welk tabblad, venster of scherm hij of zij wil delen en wordt duidelijk aangegeven dat er een opname plaatsvindt.

Het volgende voorbeeld vraagt ​​toegang om zowel audio als video op te nemen.

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

Indien de functie wordt aangeroepen binnen een contentscript, stopt de opname automatisch wanneer de gebruiker naar een nieuwe pagina navigeert. Om op de achtergrond en tijdens navigaties op te nemen, gebruikt u een offscreen-document met de reden DISPLAY_MEDIA .

Tabblad vastleggen op basis van gebruikersgebaar

Het aanroepen getDisplayMedia() resulteert in een dialoogvenster in de browser waarin de gebruiker wordt gevraagd wat hij of zij wil delen. In sommige gevallen heeft de gebruiker echter net op de actieknop geklikt om uw extensie voor een specifiek tabblad te activeren, en wilt u direct beginnen met het vastleggen van het tabblad zonder deze prompt.

Audio en video op de achtergrond opnemen

Vanaf Chrome 116 kun je de browser.tabCapture API in een service worker aanroepen om een ​​stream-ID te verkrijgen na een gebruikersbeweging. Deze ID kan vervolgens worden doorgegeven aan een offscreen-document om de opname te starten.

Bij uw servicemedewerker:

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

  const offscreenDocument = existingContexts.find(
    (c) => c.contextType === 'OFFSCREEN_DOCUMENT'
  );

  // If an offscreen document is not already open, create one.
  if (!offscreenDocument) {
    // Create an offscreen document.
    await browser.offscreen.createDocument({
      url: 'offscreen.html',
      reasons: ['USER_MEDIA'],
      justification: 'Recording from browser.tabCapture API',
    });
  }

  // Get a MediaStream for the active tab.
  const streamId = await browser.tabCapture.getMediaStreamId({
    targetTabId: tab.id
  });

  // Send the stream ID to the offscreen document to start recording.
  browser.runtime.sendMessage({
    type: 'start-recording',
    target: 'offscreen',
    data: streamId
  });
});

Vervolgens in uw document dat niet op het scherm wordt weergegeven:

browser.runtime.onMessage.addListener(async (message) => {
  if (message.target !== 'offscreen') return;
  
  if (message.type === 'start-recording') {
    const media = await navigator.mediaDevices.getUserMedia({
      audio: {
        mandatory: {
          chromeMediaSource: "tab",
          chromeMediaSourceId: message.data,
        },
      },
      video: {
        mandatory: {
          chromeMediaSource: "tab",
          chromeMediaSourceId: message.data,
        },
      },
    });

    // Continue to play the captured audio to the user.
    const output = new AudioContext();
    const source = output.createMediaStreamSource(media);
    source.connect(output.destination);

    // TODO: Do something to record the MediaStream.
  }
});

Zie het voorbeeld Tab Capture - Recorder voor een volledig voorbeeld.

Audio en video opnemen in een nieuw tabblad

Vóór Chrome 116 was het niet mogelijk om de browser.tabCapture API in een service worker te gebruiken of om een ​​stream-ID die door die API is aangemaakt, te gebruiken in een offscreen-document. Beide zijn vereisten voor de bovenstaande aanpak.

U kunt in plaats daarvan een extensiepagina in een nieuw tabblad of venster openen en direct een stream verkrijgen. Stel de eigenschap targetTabId in om het juiste tabblad vast te leggen.

Begin met het openen van een extensiepagina (bijvoorbeeld in uw pop-upvenster of service worker):

browser.windows.create({ url: browser.runtime.getURL("recorder.html") });

Ga vervolgens naar de pagina van uw extensie:

browser.tabCapture.getMediaStreamId({ targetTabId: tabId }, async (id) => {
  const media = await navigator.mediaDevices.getUserMedia({
    audio: {
      mandatory: {
        chromeMediaSource: "tab",
        chromeMediaSourceId: id,
      },
    },
    video: {
      mandatory: {
        chromeMediaSource: "tab",
        chromeMediaSourceId: id,
      },
    },
  });

  // Continue to play the captured audio to the user.
  const output = new AudioContext();
  const source = output.createMediaStreamSource(media);
  source.connect(output.destination);
});

Als alternatief kunt u de schermopnamemethode overwegen. Hiermee kunt u op de achtergrond opnemen met behulp van een document dat niet in beeld is, maar krijgt de gebruiker een dialoogvenster te zien waarin hij of zij een tabblad, venster of scherm kan selecteren om van op te nemen.

Audio opnemen in een pop-upvenster

Als je alleen audio hoeft op te nemen, kun je rechtstreeks een stream verkrijgen in het pop-upvenster van de extensie met behulp van `browser.tabCapture.capture` . De opname stopt zodra het pop-upvenster sluit.

browser.tabCapture.capture({ audio: true }, (stream) => {
  // Continue to play the captured audio to the user.
  const output = new AudioContext();
  const source = output.createMediaStreamSource(stream);
  source.connect(output.destination);

  // TODO: Do something with the stream (e.g record it)
});

Als u wilt dat de opname behouden blijft tijdens het navigeren, kunt u de in de vorige sectie beschreven methode overwegen.

Overige overwegingen

Voor meer informatie over het opnemen van een stream, raadpleeg de MediaRecorder API.