ضبط صدا و ضبط صفحه

این راهنما رویکردهای مختلف برای ضبط صدا و تصویر از یک تب، پنجره یا صفحه نمایش با استفاده از APIهایی مانند browser.tabCapture یا getDisplayMedia() را توضیح می‌دهد.

ضبط صفحه نمایش

برای ضبط صفحه نمایش، تابع getDisplayMedia() را فراخوانی کنید، که کادر محاوره‌ای نشان داده شده در زیر را فعال می‌کند. این به کاربر این امکان را می‌دهد که انتخاب کند کدام تب، پنجره یا صفحه را می‌خواهد به اشتراک بگذارد و به وضوح نشان دهد که ضبط در حال انجام است.

پنجره اشتراک گذاری صفحه برای example.com
پنجره اشتراک‌گذاری صفحه برای example.com.

مثال زیر درخواست دسترسی برای ضبط صدا و تصویر را دارد.

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

اگر درون یک اسکریپت محتوا فراخوانی شود، ضبط به طور خودکار زمانی که کاربر به صفحه جدید می‌رود پایان می‌یابد. برای ضبط در پس‌زمینه و در طول پیمایش‌ها، از یک سند خارج از صفحه با دلیل DISPLAY_MEDIA استفاده کنید.

ضبط تب بر اساس ژست کاربر

فراخوانی getDisplayMedia() منجر به نمایش پنجره‌ای در مرورگر می‌شود که از کاربر می‌پرسد چه چیزی را می‌خواهد به اشتراک بگذارد. با این حال، در برخی موارد، کاربر فقط روی دکمه‌ی عملیاتی کلیک کرده تا افزونه‌ی شما را برای یک تب خاص فراخوانی کند و شما می‌خواهید بلافاصله و بدون این درخواست، شروع به ضبط تب کنید.

ضبط صدا و تصویر در پس‌زمینه

از کروم ۱۱۶ به بعد، می‌توانید API مربوط به browser.tabCapture را در یک سرویس ورکر فراخوانی کنید تا شناسه جریان (stream ID) را پس از حرکت کاربر دریافت کنید. سپس می‌توانید این شناسه را به یک سند خارج از صفحه منتقل کنید تا ضبط شروع شود.

در سرویس ورکر شما:

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

سپس، در سند خارج از صفحه خود:

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

برای مثال کامل، به نمونه Tab Capture - Recorder مراجعه کنید.

ضبط صدا و تصویر در یک تب جدید

قبل از کروم ۱۱۶، استفاده از API مربوط به browser.tabCapture در یک سرویس ورکر یا استفاده از شناسه جریان ایجاد شده توسط آن API در یک سند خارج از صفحه امکان‌پذیر نبود. هر دوی این موارد، الزامات رویکرد فوق هستند.

در عوض، می‌توانید یک صفحه افزونه را در یک تب یا پنجره جدید باز کنید و مستقیماً به یک جریان دسترسی پیدا کنید. ویژگی targetTabId را برای گرفتن تب صحیح تنظیم کنید.

با باز کردن یک صفحه افزونه (شاید در پنجره بازشو یا سرویس ورکر خود) شروع کنید:

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

سپس، در صفحه افزونه خود:

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

روش دیگر، استفاده از رویکرد ضبط صفحه نمایش است که به شما امکان می‌دهد در پس‌زمینه با استفاده از یک سند خارج از صفحه نمایش ضبط کنید، اما به کاربر پنجره‌ای برای انتخاب یک تب، پنجره یا صفحه برای ضبط نشان می‌دهد.

ضبط صدا در یک پنجره بازشو

اگر فقط نیاز به ضبط صدا دارید، می‌توانید مستقیماً با استفاده از browser.tabCapture.capture در پنجره بازشو افزونه، یک جریان صوتی دریافت کنید. وقتی پنجره بسته می‌شود، ضبط متوقف می‌شود.

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

اگر نیاز دارید که ضبط در طول پیمایش‌ها ادامه یابد، استفاده از رویکرد شرح داده شده در بخش قبلی را در نظر بگیرید.

ملاحظات دیگر

برای اطلاعات بیشتر در مورد نحوه ضبط یک جریان، به API مربوط به MediaRecorder مراجعه کنید.