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

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

Ekran kaydı

Ekran kaydı için getDisplayMedia() numaralı telefonu çağırın. Bu işlem, aşağıda gösterilen iletişim kutusunu tetikler. Bu, kullanıcının paylaşmak istediği sekmeyi, pencereyi veya ekranı seçmesine olanak tanır ve kaydın gerçekleştiğini net bir şekilde belirtir.

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

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 gezinmelerde kayıt yapmak için DISPLAY_MEDIA nedeni olan bir ekran dışı doküman kullanın.

Kullanıcı hareketine göre sekme yakalama

getDisplayMedia() ç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 sekme için uzantınızı çağırmak üzere işlem düğmesini tıklamıştır ve siz de bu istem olmadan sekmeyi yakalamaya hemen başlamak istersiniz.

Arka planda ses ve video kaydedin

Chrome 116'dan itibaren, kullanıcı hareketini izleyen bir akış kimliği almak için Service Worker'da chrome.tabCapture API'yi çağırabilirsiniz. Daha sonra bu veri, kaydı başlatmak için ekran dışı bir belgeye iletilebilir.

Hizmet çalışanınızda:

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

Ardından, ekran dışı dokümanınızda:

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

Tam örnek için Sekme Yakalama - Kaydedici örneğine bakın.

Ses ve videoyu yeni bir sekmede kaydedin

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

Bunun yerine, bir uzantı sayfasını yeni bir sekmede veya pencerede açabilir ve doğrudan bir akış elde edebilirsiniz. Doğru sekmeyi yakalamak için targetTabId özelliğini ayarlayın.

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

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

Ardından, uzantı sayfanızda:

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

Alternatif olarak, ekran dışı bir dokümanı kullanarak arka planda kayıt yapmanıza olanak tanıyan ancak kullanıcıya kayıt yapılacak sekme, pencere veya ekran seçmesini sağlayan bir iletişim kutusu gösteren ekran kaydetme yaklaşımını kullanabilirsiniz.

Pop-up pencerede ses kaydedin

Yalnızca ses kaydetmeniz gerekiyorsa chrome.tabCapture.capture'ı kullanarak uzantı pop-up'ından doğrudan akışı alabilirsiniz. Pop-up kapandığında kayıt durdurulur.

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

Kaydın tüm gezinmelerde de 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'ye bakın.