التسجيل الصوتي وتصوير الشاشة

يوضّح هذا الدليل طرقًا مختلفة لتسجيل الصوت والفيديو من علامة تبويب أو نافذة أو شاشة باستخدام واجهات برمجة تطبيقات، مثل browser.tabCapture أو getDisplayMedia().

تسجيل الشاشة

بالنسبة إلى تسجيل الشاشة، انقر على getDisplayMedia()، ما يؤدي إلى ظهور مربّع الحوار الموضّح أدناه. يمنح ذلك المستخدم إمكانية اختيار علامة التبويب أو النافذة أو الشاشة التي يريد مشاركتها، ويقدّم إشارة واضحة إلى أنّه يتم التسجيل.

مربّع حوار مشاركة الشاشة لموقع example.com
مربّع حوار مشاركة الشاشة لموقع example.com

يطلب المثال التالي الإذن بتسجيل كلّ من الصوت والفيديو.

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

إذا تم استدعاء هذه الدالة ضمن نص برمجي خاص بالمحتوى، سينتهي التسجيل تلقائيًا عندما ينتقل المستخدم إلى صفحة جديدة. لتسجيل المحتوى في الخلفية وعلى مستوى عمليات التنقّل، استخدِم مستندًا خارج الشاشة مع السبب DISPLAY_MEDIA.

تسجيل علامة التبويب استنادًا إلى إجراء تفاعلي من المستخدم

سيؤدي استدعاء getDisplayMedia() إلى عرض المتصفّح لمربّع حوار يسأل المستخدم عن المحتوى الذي يريد مشاركته. ومع ذلك، في بعض الحالات، ينقر المستخدم على زر الإجراء لتفعيل الإضافة لعلامة تبويب معيّنة، وتريد بدء تسجيل علامة التبويب على الفور بدون هذا الطلب.

تسجيل الصوت والفيديو في الخلفية

بدءًا من الإصدار 116 من Chrome، يمكنك استدعاء واجهة برمجة التطبيقات browser.tabCapture في مشغّل الخدمات للحصول على معرّف بث بعد إجراء تفاعلي من المستخدم. ويمكن بعد ذلك تمرير هذا المعرّف إلى مستند خارج الشاشة لبدء التسجيل.

في عامل الخدمة:

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.

تسجيل الصوت والفيديو في علامة تبويب جديدة

قبل الإصدار 116 من Chrome، لم يكن من الممكن استخدام واجهة برمجة التطبيقات browser.tabCapture في مشغّل الخدمات أو استخدام معرّف بث تم إنشاؤه بواسطة واجهة برمجة التطبيقات هذه في مستند خارج الشاشة. ويُعدّ كل من الشرطَين أعلاه من المتطلبات الأساسية للطريقة المذكورة.

بدلاً من ذلك، يمكنك فتح صفحة إضافة في علامة تبويب أو نافذة جديدة والحصول على بث مباشر. اضبط السمة 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)
});

إذا كنت بحاجة إلى استمرار التسجيل أثناء التنقّل بين الصفحات، ننصحك باتّباع الطريقة الموضّحة في القسم السابق.

اعتبارات أخرى

لمزيد من المعلومات حول كيفية تسجيل بث مباشر، يمكنك الاطّلاع على واجهة برمجة التطبيقات MediaRecorder.