Perekaman audio dan screenshot

Panduan ini menjelaskan berbagai pendekatan untuk merekam audio dan video dari tab, jendela, atau layar menggunakan API seperti browser.tabCapture atau getDisplayMedia().

Perekaman layar

Untuk merekam layar, panggil getDisplayMedia(), yang memicu kotak dialog yang ditampilkan di bawah. Hal ini memberi pengguna kemampuan untuk memilih tab, jendela, atau layar yang ingin dibagikan dan memberikan indikasi yang jelas bahwa perekaman sedang berlangsung.

Dialog berbagi layar untuk example.com
Dialog berbagi layar untuk example.com.

Contoh berikut meminta akses untuk merekam audio dan video.

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

Jika dipanggil dalam skrip konten, perekaman akan otomatis berakhir saat pengguna membuka halaman baru. Untuk merekam di latar belakang dan di seluruh navigasi, gunakan dokumen offscreen dengan alasan DISPLAY_MEDIA.

Perekaman tab berdasarkan gestur pengguna

Memanggil getDisplayMedia() akan menyebabkan browser menampilkan dialog yang menanyakan kepada pengguna apa yang ingin mereka bagikan. Namun, dalam beberapa kasus, pengguna baru saja mengklik tombol tindakan untuk memanggil ekstensi Anda untuk tab tertentu, dan Anda ingin segera mulai merekam tab tanpa perintah ini.

Merekam audio dan video di latar belakang

Mulai Chrome 116, Anda dapat memanggil API browser.tabCapture di service worker untuk mendapatkan ID streaming setelah gestur pengguna. Kemudian, tindakan ini dapat diteruskan ke dokumen di luar layar untuk mulai merekam.

Di service worker Anda:

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

Kemudian, di dokumen di luar layar:

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

Untuk contoh lengkap, lihat contoh Tab Capture - Recorder.

Merekam audio dan video di tab baru

Sebelum Chrome 116, browser.tabCapture API tidak dapat digunakan di service worker atau untuk menggunakan ID streaming yang dibuat oleh API tersebut dalam dokumen di luar layar. Kedua hal ini merupakan persyaratan untuk pendekatan di atas.

Sebagai gantinya, Anda dapat membuka halaman ekstensi di tab atau jendela baru, dan langsung mendapatkan streaming. Tetapkan properti targetTabId untuk merekam tab yang benar.

Mulai dengan membuka halaman ekstensi (mungkin di pop-up atau service worker Anda):

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

Kemudian, di halaman ekstensi Anda:

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

Atau, pertimbangkan untuk menggunakan pendekatan perekaman layar yang memungkinkan Anda merekam di latar belakang menggunakan dokumen di luar layar, tetapi menampilkan dialog kepada pengguna untuk memilih tab, jendela, atau layar yang akan direkam.

Merekam audio di pop-up

Jika hanya perlu merekam audio, Anda dapat langsung mendapatkan streaming di pop-up ekstensi menggunakan browser.tabCapture.capture. Saat pop-up ditutup, perekaman akan dihentikan.

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

Jika Anda ingin rekaman tetap ada di seluruh navigasi, pertimbangkan untuk menggunakan pendekatan yang dijelaskan di bagian sebelumnya.

Pertimbangan lainnya

Untuk mengetahui informasi selengkapnya tentang cara merekam streaming, lihat API MediaRecorder.