במדריך הזה מוסברות גישות שונות להקלטת אודיו ווידאו מכרטיסייה, מחלון או ממסך באמצעות ממשקי API כמו browser.tabCapture או getDisplayMedia().
הקלטת מסך
כדי להקליט את המסך, מתקשרים אל getDisplayMedia(), ומופיעה תיבת הדו-שיח שמוצגת בהמשך. כך המשתמש יכול לבחור איזו כרטיסייה, חלון או מסך הוא רוצה לשתף, ויש אינדיקציה ברורה לכך שההקלטה מתבצעת.
בדוגמה הבאה מוצגת בקשה לגישה להקלטת אודיו ווידאו.
const stream = await navigator.mediaDevices.getDisplayMedia({ audio: true, video: true });
אם הפונקציה מופעלת בסקריפט תוכן, ההקלטה תסתיים אוטומטית כשהמשתמש יעבור לדף חדש. כדי להקליט ברקע ובמהלך ניווטים, צריך להשתמש במסמך מחוץ למסך עם הסיבה DISPLAY_MEDIA.
צילום מסך של כרטיסייה על סמך תנועה של המשתמש
הפעלת getDisplayMedia() גורמת לדפדפן להציג תיבת דו-שיח שבה המשתמש נשאל מה הוא רוצה לשתף. עם זאת, במקרים מסוימים המשתמש פשוט לוחץ על כפתור פעולה כדי להפעיל את התוסף בכרטיסייה ספציפית, ואתם רוצים להתחיל מיד לצלם את הכרטיסייה בלי להציג את ההנחיה הזו.
הקלטת אודיו ווידאו ברקע
החל מגרסה 116 של Chrome, אפשר לקרוא ל-API browser.tabCapture בקובץ שירות (service worker) כדי לקבל מזהה של סטרימינג אחרי תנועה של המשתמש. אחר כך אפשר להעביר את זה למסמך מחוץ למסך כדי להתחיל את ההקלטה.
ב-service worker:
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, לא הייתה אפשרות להשתמש ב-API browser.tabCapture בקובץ שירות (service worker) או להשתמש במזהה סטרימינג שנוצר על ידי ה-API הזה במסמך מחוץ למסך. שתי הדרישות האלה חלות על הגישה שצוינה למעלה.
במקום זאת, אפשר לפתוח דף של תוסף בכרטיסייה חדשה או בחלון חדש, ולקבל סטרימינג ישירות. מגדירים את המאפיין targetTabId כדי לתעד את הכרטיסייה הנכונה.
מתחילים בפתיחת דף של תוסף (יכול להיות בחלון קופץ או ב-service worker):
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 API.