Ses kaydı ve ekran görüntüsü

Bu kılavuzda, browser.tabCapture veya getDisplayMedia() gibi API'leri kullanarak bir sekmeden, pencereden ya da ekrandan ses ve video kaydetmeye yönelik farklı yaklaşımlar açıklanmaktadır.

Ekran kaydı

Ekran kaydı için aşağıdaki iletişim kutusunu tetikleyen getDisplayMedia() işlevini çağırın. Bu sayede kullanıcı, paylaşmak istediği sekmeyi, pencereyi veya ekranı seçebilir ve kayıt işleminin gerçekleştiği net bir şekilde belirtilir.

example.com için ekran paylaşımı iletişim kutusu
example.com için ekran paylaşımı iletişim kutusu.

Aşağıdaki örnekte hem ses hem de video kaydetmek için erişim izni isteniyor.

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

İçerik komut dosyası içinde çağrılırsa kullanıcı yeni bir sayfaya gittiğinde kayıt otomatik olarak sona erer. Arka planda ve gezinmeler arasında kayıt yapmak için DISPLAY_MEDIA nedeni ile ekran dışı bir doküman kullanın.

Kullanıcı hareketine dayalı sekme yakalama

getDisplayMedia() işlevi çağrıldığında tarayıcıda, kullanıcıya ne paylaşmak istediğini soran bir iletişim kutusu gösterilir. Ancak bazı durumlarda kullanıcı, belirli bir sekmede uzantınızı çağırmak için işlem düğmesini tıklamış olabilir ve bu istem olmadan sekmeyi hemen yakalamaya başlamak isteyebilirsiniz.

Arka planda ses ve video kaydetme

Chrome 116'dan itibaren, kullanıcı hareketi sonrasında akış kimliği almak için bir hizmet çalışanında browser.tabCapture API'sini çağırabilirsiniz. Bu, kaydı başlatmak için ekranda görünmeyen bir dokümana aktarılabilir.

Hizmet çalışanınızda:

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

Ardından, ekranda görünmeyen belgenizde:

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

Tam bir örnek için Tab Capture - Recorder örneğine bakın.

Yeni sekmede ses ve video kaydetme

Chrome 116'dan önce, bir hizmet çalışanında browser.tabCapture API'sini kullanmak veya bu API tarafından oluşturulan bir akış kimliğini ekran dışı bir dokümanda tüketmek mümkün değildi. Bunların ikisi de yukarıdaki yaklaşım için gereklidir.

Bunun yerine, uzantı sayfasını yeni bir sekmede veya pencerede açıp doğrudan yayın alabilirsiniz. Doğru sekmeyi yakalamak için targetTabId özelliğini ayarlayın.

Bir uzantı sayfasını (ör. pop-up'ınızda veya hizmet çalışanınzda) açarak başlayın:

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

Ardından, uzantı sayfanızda:

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

Alternatif olarak, ekran dışı bir doküman kullanarak arka planda kayıt yapmanıza olanak tanıyan ancak kullanıcıya kaydedilecek sekmeyi, pencereyi veya ekranı seçmesi için bir iletişim kutusu gösteren ekran kaydı yaklaşımını kullanmayı düşünebilirsiniz.

Pop-up pencerede ses kaydetme

Yalnızca ses kaydetmeniz gerekiyorsa browser.tabCapture.capture kullanarak doğrudan uzantı pop-up'ında bir akış elde edebilirsiniz. Pop-up kapandığında kayıt durdurulur.

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

Kaydın gezinme işlemleri arasında devam etmesi gerekiyorsa önceki bölümde açıklanan yaklaşımı kullanabilirsiniz.

Dikkat edilmesi gereken diğer noktalar

Akış kaydetme hakkında daha fazla bilgi için MediaRecorder API'sini inceleyin.