এই নির্দেশিকায় browser.tabCapture বা getDisplayMedia() -এর মতো API ব্যবহার করে একটি ট্যাব, উইন্ডো বা স্ক্রিন থেকে অডিও এবং ভিডিও রেকর্ড করার বিভিন্ন পদ্ধতি ব্যাখ্যা করা হয়েছে।
স্ক্রিন রেকর্ডিং
স্ক্রিন রেকর্ডিংয়ের জন্য getDisplayMedia() কল করুন, যা নিচে দেখানো ডায়ালগ বক্সটি চালু করে। এটি ব্যবহারকারীকে কোন ট্যাব, উইন্ডো বা স্ক্রিন শেয়ার করতে চান তা নির্বাচন করার সুযোগ দেয় এবং রেকর্ডিং চলছে তার একটি স্পষ্ট ইঙ্গিত প্রদান করে।

নিম্নলিখিত উদাহরণটিতে অডিও এবং ভিডিও উভয়ই রেকর্ড করার অ্যাক্সেসের অনুরোধ করা হয়েছে।
const stream = await navigator.mediaDevices.getDisplayMedia({ audio: true, video: true });
কন্টেন্ট স্ক্রিপ্টের মধ্যে কল করা হলে, ব্যবহারকারী নতুন পৃষ্ঠায় গেলে রেকর্ডিং স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যাবে। ব্যাকগ্রাউন্ডে এবং নেভিগেশন জুড়ে রেকর্ড করতে, DISPLAY_MEDIA কারণসহ একটি অফস্ক্রিন ডকুমেন্ট ব্যবহার করুন।
ব্যবহারকারীর অঙ্গভঙ্গির উপর ভিত্তি করে ট্যাব ক্যাপচার
getDisplayMedia() কল করলে ব্রাউজারে একটি ডায়ালগ বক্স আসে, যেখানে ব্যবহারকারীকে জিজ্ঞাসা করা হয় যে তিনি কী শেয়ার করতে চান। তবে, কিছু ক্ষেত্রে ব্যবহারকারী কোনো নির্দিষ্ট ট্যাবের জন্য আপনার এক্সটেনশনটি চালু করতে অ্যাকশন বাটনে ক্লিক করার সাথে সাথেই আপনি এই প্রম্পটটি ছাড়াই ট্যাবটি ক্যাপচার করা শুরু করতে চান।
পটভূমিতে অডিও এবং ভিডিও রেকর্ড করুন
ক্রোম ১১৬ সংস্করণ থেকে, ব্যবহারকারীর অঙ্গভঙ্গি অনুসরণ করে একটি স্ট্রিম আইডি পেতে আপনি একটি সার্ভিস ওয়ার্কারে browser.tabCapture API কল করতে পারেন। এরপর রেকর্ডিং শুরু করার জন্য এই আইডিটি একটি অফস্ক্রিন ডকুমেন্টে পাঠানো যেতে পারে।
আপনার পরিষেবা কর্মীর ক্ষেত্রে:
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.
}
});
একটি পূর্ণাঙ্গ উদাহরণের জন্য, ট্যাব ক্যাপচার - রেকর্ডার নমুনাটি দেখুন।
নতুন ট্যাবে অডিও এবং ভিডিও রেকর্ড করুন
ক্রোম ১১৬-এর আগে, সার্ভিস ওয়ার্কারে browser.tabCapture API ব্যবহার করা অথবা অফস্ক্রিন ডকুমেন্টে সেই API দ্বারা তৈরি একটি স্ট্রিম আইডি কনজিউম করা সম্ভব ছিল না। উপরোক্ত পদ্ধতির জন্য এই দুটিই পূর্বশর্ত।
এর পরিবর্তে, আপনি একটি নতুন ট্যাব বা উইন্ডোতে এক্সটেনশন পৃষ্ঠাটি খুলতে পারেন এবং সরাসরি একটি স্ট্রিম পেতে পারেন। সঠিক ট্যাবটি ক্যাপচার করতে 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 API দেখুন।