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

Bu kılavuzda; sekme, pencere veya cihazlardan ses ve video kaydına yönelik farklı yaklaşımlar açıklanmaktadır. chrome.tabCapture veya getDisplayMedia().

Ekran kaydı

Ekran kaydı için getDisplayMedia() çağrısı yapın. Bu durumda iletişim kutusu açılır. aşağıda gösterilmiştir. Bu, kullanıcıya istediği sekmeyi, pencereyi veya ekranı seçme olanağı tanır belirten bir uyarı verir ve kaydın devam ettiğine dair net bir gösterge sunar.

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

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

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

Kayıt bir içerik komut dosyası içinde çağrılırsa kullanıcı yeni bir sayfasını ziyaret edin. Arka planda ve gezinmeler arasında kayıt yapmak için ekran dışı belgeyi DISPLAY_MEDIA nedeniyle iptal edin.

Kullanıcı hareketine dayalı sekme yakalama

getDisplayMedia() çağrıldığında, tarayıcıda şu bilgileri içeren bir iletişim kutusu gösterilir: paylaşmak istediklerini gösterebilir. Ancak bazı durumlarda, kullanıcı yeni işlem düğmesini kullanarak uzantınızı belirli bir sekme için çağırdıysanız ve sekmesini yakalamaya hemen başlayabilirsiniz.

Arka planda ses ve video kaydedin

Chrome 116 sürümünden itibaren hizmet çalışanında chrome.tabCapture API'yi çağırabilirsiniz. kullanıcı hareketinin ardından akış kimliğini almak için. Bu daha sonra ekran dışındaki bir dokümana geçirilebilir ve kaydı başlat.

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ışındaki 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 bir örnek için Sekme Yakalama - Kaydedici örneğine bakın.

Yeni bir sekmede ses ve video kaydedin

Chrome 116'dan önce chrome.tabCapture API'yi bir tarayıcıda kullanmak mümkün değildi. hizmet çalışanı veya söz konusu API tarafından oluşturulan akış kimliğini ekran dışı bir dokümanda kullanma Bu iki yukarıdaki yaklaşımın şartlarıdır.

Bunun yerine, bir uzantı sayfasını yeni bir sekmede veya pencerede açabilir ve doğrudan bir akış alabilirsiniz. Ayarla doğru sekmeyi yakalamak için targetTabId özelliğini kullanı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, şunları yapmanıza olanak tanıyan ekran kaydı yaklaşımını kullanabilirsiniz: Ekran dışı bir doküman kullanarak arka planda kaydediyor ancak kullanıcıya sekme seçmesi için bir iletişim kutusu gösteriyor pencere veya ekrandan seçim yapın.

Pop-up pencerede ses kaydedin

Dikkat: Pop-up'tan video yakalamaya çalışmak neden olduğu için bu yaklaşım yalnızca ses içeriklerinde işe yarar. pop-up'ı kapatın.

Yalnızca ses kaydetmeniz gerekiyorsa uzantı pop-up'ından doğrudan ses kaydı elde etmek için şu komutu kullanabilirsiniz: chrome.tabCapture.capture sayfasına gidin. 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 gezinmeler arasında devam etmesini istiyorsanız açıklanan yaklaşımı kullanabilirsiniz. önceki bölümde görebilirsiniz.

Dikkat edilmesi gereken diğer noktalar

Akışı kaydetme hakkında daha fazla bilgi için MediaRecorder API'sine bakın.