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

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

تسجيل الشاشة

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

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

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

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

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

التقاط علامة التبويب استنادًا إلى إيماءة المستخدم

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

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

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

في مشغّل الخدمات:

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

بعد ذلك، في المستند خارج الشاشة:

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

للحصول على مثال كامل، يمكنك الاطّلاع على نموذج التقاط علامات التبويب - المسجّلة الذكية.

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

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

بدلاً من ذلك، يمكنك فتح صفحة إضافة في نافذة أو علامة تبويب جديدة والحصول على بيانات البث مباشرةً. اضبط السمة targetTabId لتسجيل علامة التبويب الصحيحة.

ابدأ بفتح صفحة إضافة (ربما في النافذة المنبثقة أو مشغّل الخدمات):

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

بعد ذلك، في صفحة الإضافة:

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

يمكنك بدلاً من ذلك استخدام أسلوب تسجيل الشاشة الذي يسمح لك بالتسجيل في الخلفية باستخدام مستند خارج الشاشة، وفي الوقت نفسه يعرض للمستخدم مربّع حوار لاختيار علامة تبويب أو نافذة أو شاشة لبدء التسجيل منها.

تسجيل الصوت في نافذة منبثقة

تنبيه: يعمل هذا الأسلوب مع الصوت فقط، لأنّ محاولة تسجيل فيديو من النافذة المنبثقة تؤدي إلى تحرك التركيز وإغلاق النافذة المنبثقة.

إذا كنت تحتاج إلى تسجيل الصوت فقط، يمكنك بث المحتوى مباشرةً من النافذة المنبثقة للإضافة باستخدام chrome.tabCapture.capture. وعند إغلاق النافذة المنبثقة، سيتوقف التسجيل.

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

إذا أردت أن يستمر التسجيل في مختلَف التنقلات، جرّب استخدام الطريقة الموضحة في القسم السابق.

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

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