הקלטת אודיו וצילום מסך

במדריך הזה מוסברות גישות שונות להקלטת אודיו ווידאו מכרטיסייה, מחלון או מהמסך, באמצעות ממשקי API כמו chrome.tabCapture או getDisplayMedia().

הקלטת מסך

כדי להקליט את המסך, צריך להפעיל את getDisplayMedia() כדי להפעיל את תיבת הדו-שיח שמוצגת בהמשך. כך משתמשים יכולים לבחור כרטיסייה, חלון או מסך שהם רוצים לשתף, והם יכולים לראות אינדיקציה ברורה לכך שההקלטה מתבצעת.

בדוגמה הבאה מוצגת בקשת גישה להקלטת אודיו וגם להקלטת וידאו.

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

אם היא מופעלת בתוך סקריפט תוכן, ההקלטה תסתיים באופן אוטומטי כשהמשתמש יעבור לדף חדש. כדי להקליט ברקע ובניווטים שונים, צריך להשתמש במסמך שאינו מופיע במסך עם הסיבה DISPLAY_MEDIA.

צילום כרטיסיות על סמך תנועת המשתמש

קריאה ל-getDisplayMedia() גורמת לדפדפן להציג תיבת דו-שיח שבה המשתמשים נשאלים מה הם רוצים לשתף. עם זאת, במקרים מסוימים המשתמש לחץ עכשיו על לחצן הפעולה כדי להפעיל את התוסף בכרטיסייה מסוימת, ואתם רוצים להתחיל לתעד את הכרטיסייה באופן מיידי ללא הצגת הבקשה הזו.

הקלטת אודיו ווידאו ברקע

החל מגרסה 116 של Chrome, תוכלו להפעיל את chrome.tabCapture API ב-Service Worker כדי לקבל מזהה סטרימינג בעקבות תנועת משתמש. לאחר מכן ניתן להעביר אותו למסמך שלא מוצג במסך כדי להתחיל בהקלטה.

בקובץ השירות:

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

לקבלת דוגמה מלאה, עיינו בדוגמה Tab Capture - מכשיר הקלטה.

הקלטת וידאו ואודיו בכרטיסייה חדשה

בגרסאות שלפני Chrome 116 לא הייתה אפשרות להשתמש ב-API chrome.tabCapture ב-Service Worker או לצרוך מזהה מקור נתונים שנוצר על ידי ה-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 API.