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

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

تسجيل الشاشة

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

مربّع حوار مشاركة الشاشة للموقع الإلكتروني example.com
مربّع حوار مشاركة الشاشة للموقع 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.
  }
});

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

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

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

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