Nagrywanie dźwięku i przechwytywanie ekranu

W tym przewodniku opisujemy różne podejścia do nagrywania dźwięku i obrazu z karty, okna lub za pomocą interfejsów API takich jak chrome.tabCapture lub getDisplayMedia()

Nagrywanie ekranu

W przypadku nagrywania ekranu wywołaj getDisplayMedia(), co spowoduje wyświetlenie okna. poniżej. Dzięki temu użytkownik może wybrać, którą kartę, okno lub ekran chce. i jednoznacznie wskazuje, że film jest nagrywany.

Okno udostępniania ekranu dla domeny example.com
Okno udostępniania ekranu dla domeny example.com.

Ten przykład wymaga dostępu do nagrywania dźwięku i obrazu.

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

Jeśli zostanie wywołane w ramach skryptu treści, nagrywanie zakończy się automatycznie, gdy użytkownik przejdzie do nowego stronę. Aby nagrywać w tle i w nawigacji, użyj dokument poza ekranem z przyczyną: DISPLAY_MEDIA.

Przechwytywanie kart w zależności od gestu użytkownika

Wywołanie getDisplayMedia() powoduje wyświetlenie w przeglądarce okna z pytaniem informacje o tym, co chce udostępnić. Jednak w niektórych przypadkach użytkownik po prostu kliknął przycisk polecenia wywołujący rozszerzenie na określonej karcie. Chcesz natychmiast rozpocznie przechwytywanie karty bez tego promptu.

Nagrywaj dźwięk i filmy w tle

Od Chrome 116 możesz wywoływać interfejs API chrome.tabCapture w skrypcie service worker aby uzyskać identyfikator strumienia. Te informacje można następnie przekazać do dokumentu poza ekranem, aby: rozpocznij nagrywanie.

W mechanizmie Service Worker:

chrome.action.onClicked.addListener(async (tab) => {
  const existingContexts = await chrome.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 chrome.offscreen.createDocument({
      url: 'offscreen.html',
      reasons: ['USER_MEDIA'],
      justification: 'Recording from chrome.tabCapture API',
    });
  }

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

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

Następnie w dokumencie spoza ekranu:

chrome.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 recording the MediaStream.
  }
});

Pełny przykład znajdziesz tutaj: Tab Capture – Dyktafon.

Nagrywaj dźwięk i film w nowej karcie

W wersjach starszych niż Chrome 116 nie można było używać interfejsu API chrome.tabCapture w skrypt service worker albo użyć identyfikatora strumienia utworzonego przez ten interfejs API w dokumencie poza ekranem. Obie opcje to wymagania dla powyższego podejścia.

Zamiast tego możesz otworzyć stronę rozszerzenia w nowej karcie lub nowym oknie i od razu uzyskać strumień. Ustaw właściwość targetTabId, aby zarejestrować właściwą kartę.

Najpierw otwórz stronę rozszerzenia (na przykład w wyskakującym okienku lub w skrypcie service worker):

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

Następnie na stronie rozszerzenia:

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

Możesz też skorzystać z metody nagrywania ekranu, która pozwala: nagrywać w tle za pomocą dokumentu poza ekranem, ale wyświetla użytkownikowi okno umożliwiające wybór karty; okno lub ekran, w którym chcesz nagrywać.

Nagrywaj dźwięk w wyskakującym okienku

Jeśli chcesz nagrać tylko dźwięk, możesz uzyskać strumień danych bezpośrednio w wyskakującym okienku rozszerzenia, Plik chrome.tabCapture.capture. Po zamknięciu wyskakującego okienka nagrywanie zostanie zatrzymane.

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

Jeśli chcesz, aby nagranie było zachowywane po różnych elementach nawigacyjnych, rozważ użycie opisanej metody. w poprzedniej sekcji.

Inne uwagi

Więcej informacji o nagrywaniu transmisji znajdziesz na stronie interfejsu API MediaRecorder.