স্ক্রিন ক্যাপচার API এর সাথে ওয়েব প্ল্যাটফর্মে ইতিমধ্যেই ট্যাব, উইন্ডো এবং স্ক্রিন শেয়ার করা সম্ভব। যখন একটি ওয়েব অ্যাপ getDisplayMedia() কল করে, Chrome ব্যবহারকারীকে একটি ট্যাব, উইন্ডো বা স্ক্রীন ওয়েব অ্যাপের সাথে MediaStreamTrack ভিডিও হিসেবে শেয়ার করার জন্য অনুরোধ করে।
getDisplayMedia() ব্যবহার করে এমন অনেক ওয়েব অ্যাপ ব্যবহারকারীকে ক্যাপচার করা পৃষ্ঠের একটি ভিডিও পূর্বরূপ দেখায়। উদাহরণস্বরূপ, ভিডিও কনফারেন্সিং অ্যাপগুলি প্রায়শই এই ভিডিওটি দূরবর্তী ব্যবহারকারীদের কাছে স্ট্রিম করবে এবং এটিকে একটি স্থানীয় HTMLVideoElement এ রেন্ডার করবে, যাতে স্থানীয় ব্যবহারকারী ক্রমাগত তারা কী শেয়ার করছেন তার একটি পূর্বরূপ দেখতে পান৷
এই ডকুমেন্টেশনটি Chrome-এ নতুন ক্যাপচার করা সারফেস কন্ট্রোল API-এর পরিচয় দেয়, যা আপনার ওয়েব অ্যাপকে একটি ক্যাপচার করা ট্যাব স্ক্রোল করতে দেয়, সেইসাথে ক্যাপচার করা ট্যাবের জুম লেভেল পড়তে ও লিখতে দেয়।
কেন ক্যাপচারড সারফেস কন্ট্রোল ব্যবহার করবেন?
সমস্ত ভিডিও কনফারেন্সিং অ্যাপ একই ত্রুটি থেকে ভোগে। ব্যবহারকারী যদি একটি ক্যাপচার করা ট্যাব বা উইন্ডোর সাথে ইন্টারঅ্যাক্ট করতে চান, তাহলে ব্যবহারকারীকে ভিডিও কনফারেন্সিং অ্যাপ থেকে দূরে সরিয়ে সেই পৃষ্ঠে যেতে হবে। এটি কিছু চ্যালেঞ্জ উপস্থাপন করে:
- ব্যবহারকারীরা একই সময়ে ক্যাপচার করা অ্যাপ এবং দূরবর্তী ব্যবহারকারীদের ভিডিও ফিড দেখতে পারবেন না যদি না তারা ভিডিও কনফারেন্স ট্যাব এবং শেয়ার করা ট্যাবের জন্য পিকচার-ইন-পিকচার বা আলাদা পাশের উইন্ডো ব্যবহার না করেন। একটি ছোট পর্দায়, এটি কঠিন হতে পারে।
- ব্যবহারকারী ভিডিও কনফারেন্সিং অ্যাপ এবং ক্যাপচার করা পৃষ্ঠের মধ্যে ঝাঁপ দেওয়ার প্রয়োজনীয়তার দ্বারা বোঝা হয়।
- ব্যবহারকারী ভিডিও কনফারেন্সিং অ্যাপের দ্বারা উন্মুক্ত করা নিয়ন্ত্রণগুলিতে অ্যাক্সেস হারায় যখন তারা এটি থেকে দূরে থাকে; উদাহরণস্বরূপ, একটি এমবেডেড চ্যাট অ্যাপ, ইমোজি প্রতিক্রিয়া, ব্যবহারকারীদের কলে যোগদান করার জন্য বিজ্ঞপ্তি, মাল্টিমিডিয়া এবং লেআউট নিয়ন্ত্রণ এবং অন্যান্য দরকারী ভিডিও কনফারেন্সিং বৈশিষ্ট্য।
- উপস্থাপক দূরবর্তী অংশগ্রহণকারীদের নিয়ন্ত্রণ অর্পণ করতে পারে না৷ এটি খুব পরিচিত দৃশ্যের দিকে নিয়ে যায় যেখানে দূরবর্তী ব্যবহারকারীরা উপস্থাপককে স্লাইড পরিবর্তন করতে, কিছুটা উপরে এবং নীচে স্ক্রোল করতে বা জুম স্তর সামঞ্জস্য করতে বলে।
ক্যাপচারড সারফেস কন্ট্রোল এপিআই এই সমস্যার সমাধান করে।
আমি কিভাবে ক্যাপচারড সারফেস কন্ট্রোল ব্যবহার করব?
ক্যাপচার করা সারফেস কন্ট্রোল সফলভাবে ব্যবহার করার জন্য কয়েকটি ধাপের প্রয়োজন, যেমন স্পষ্টভাবে একটি ব্রাউজার ট্যাব ক্যাপচার করা এবং ক্যাপচার করা ট্যাবটি স্ক্রোল এবং জুম করার আগে ব্যবহারকারীর কাছ থেকে অনুমতি নেওয়া।
একটি ব্রাউজার ট্যাব ক্যাপচার
ব্যবহারকারীকে getDisplayMedia() ব্যবহার করে শেয়ার করার জন্য একটি সারফেস বেছে নিতে অনুরোধ করে শুরু করুন এবং প্রক্রিয়ায় ক্যাপচার সেশনের সাথে একটি CaptureController অবজেক্ট যুক্ত করুন। আমরা শীঘ্রই ক্যাপচার করা পৃষ্ঠ নিয়ন্ত্রণ করতে সেই বস্তুটি ব্যবহার করব।
const controller = new CaptureController();
const stream = await navigator.mediaDevices.getDisplayMedia({ controller });
এরপরে, একটি <video> উপাদান আকারে ক্যাপচার করা পৃষ্ঠের একটি স্থানীয় পূর্বরূপ তৈরি করুন:
const previewTile = document.querySelector('video');
previewTile.srcObject = stream;
ব্যবহারকারী যদি একটি উইন্ডো বা একটি স্ক্রীন শেয়ার করতে পছন্দ করেন, তবে তা আপাতত সুযোগের বাইরে—কিন্তু যদি তারা একটি ট্যাব শেয়ার করা বেছে নেন, তাহলে আমরা এগিয়ে যেতে পারি।
const [track] = stream.getVideoTracks();
if (track.getSettings().displaySurface !== 'browser') {
// Bail out early if the user didn't pick a tab.
return;
}
অনুমতি প্রম্পট
একটি প্রদত্ত CaptureController অবজেক্টে forwardWheel() , increaseZoomLevel() , decreaseZoomLevel() বা resetZoomLevel() এর প্রথম আহ্বান একটি অনুমতি প্রম্পট তৈরি করে। ব্যবহারকারী যদি অনুমতি দেয়, তাহলে এই পদ্ধতিগুলির আরও আহ্বান অনুমোদিত।
ব্যবহারকারীর কাছে একটি অনুমতি প্রম্পট দেখানোর জন্য একটি ব্যবহারকারীর অঙ্গভঙ্গি প্রয়োজন, তাই অ্যাপটিকে শুধুমাত্র পূর্বোক্ত পদ্ধতিতে কল করা উচিত যদি এটির ইতিমধ্যে অনুমতি থাকে, বা ব্যবহারকারীর অঙ্গভঙ্গির প্রতিক্রিয়া হিসাবে, যেমন ওয়েব অ্যাপের একটি প্রাসঙ্গিক বোতামে click ।
স্ক্রল করুন
forwardWheel() ব্যবহার করে, একটি ক্যাপচারিং অ্যাপ ক্যাপচারিং অ্যাপের মধ্যেই একটি উৎস উপাদান থেকে চাকা ইভেন্টগুলিকে ক্যাপচার করা ট্যাবের ভিউপোর্টে ফরোয়ার্ড করতে পারে। এই ইভেন্টগুলি সরাসরি ব্যবহারকারীর মিথস্ক্রিয়া থেকে ক্যাপচার করা অ্যাপের সাথে আলাদা করা যায় না।
ধরুন ক্যাপচারিং অ্যাপটি "previewTile" নামক একটি <video> উপাদান নিয়োগ করে, নিম্নলিখিত কোডটি দেখায় কিভাবে ক্যাপচার করা ট্যাবে চাকা ইভেন্ট পাঠাতে হয়:
const previewTile = document.querySelector('video');
try {
// Relay the user's action to the captured tab.
await controller.forwardWheel(previewTile);
} catch (error) {
// Inspect the error.
// ...
}
forwardWheel() পদ্ধতিটি একটি একক ইনপুট নেয় যা নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:
- একটি HTML উপাদান যা থেকে চাকার ইভেন্টগুলি ক্যাপচার করা ট্যাবে ফরোয়ার্ড করা হবে৷
-
null, নির্দেশ করে যে ফরওয়ার্ডিং বন্ধ করা উচিত।
forwardWheel() এ একটি সফল কল পূর্ববর্তী কলগুলিকে ওভাররাইড করে।
forwardWheel() দ্বারা প্রত্যাবর্তিত প্রতিশ্রুতি নিম্নলিখিত ক্ষেত্রে প্রত্যাখ্যান করা যেতে পারে:
- যদি ক্যাপচার সেশন এখনও শুরু না হয় বা ইতিমধ্যে বন্ধ হয়ে যায়।
- ব্যবহারকারী যদি প্রাসঙ্গিক অনুমতি না দেন।
জুম
ক্যাপচার করা ট্যাবের জুম স্তরের সাথে ইন্টারঅ্যাক্ট করা নিম্নলিখিত CaptureController API পৃষ্ঠের মাধ্যমে করা হয়:
getSupportedZoomLevels()
এই পদ্ধতিটি ক্যাপচার করা পৃষ্ঠের প্রকারের জন্য ব্রাউজার দ্বারা সমর্থিত জুম স্তরগুলির একটি তালিকা প্রদান করে৷ এই তালিকার মানগুলি "ডিফল্ট জুম স্তর" এর তুলনায় শতাংশ হিসাবে উপস্থাপিত হয়, যা 100% হিসাবে সংজ্ঞায়িত করা হয়। তালিকাটি একঘেয়েভাবে বাড়ছে এবং এতে 100 মান রয়েছে।
এই পদ্ধতিটি শুধুমাত্র সমর্থিত ডিসপ্লে সারফেস টাইপের জন্য বলা যেতে পারে, যার অর্থ এই মুহূর্তে শুধুমাত্র ট্যাবের জন্য।
controller.getSupportedZoomLevels() বলা যেতে পারে যদি নিম্নলিখিত শর্তগুলি থাকে:
-
controllerএকটি সক্রিয় ক্যাপচারের সাথে যুক্ত। - ক্যাপচারটি একটি ট্যাবের।
অন্যথায়, একটি ত্রুটি উত্থাপিত হবে.
এই পদ্ধতিতে কল করার জন্য "captured-surface-control" অনুমতির প্রয়োজন নেই ।
zoomLevel
এই শুধুমাত্র পঠনযোগ্য বৈশিষ্ট্যটি ক্যাপচার করা ট্যাবের বর্তমান জুম স্তরকে ধরে রাখে। এটি একটি বাতিলযোগ্য বৈশিষ্ট্য, এবং ক্যাপচার করা সারফেস টাইপের জুম-লেভেলের অর্থপূর্ণ সংজ্ঞা না থাকলে সেটি null থাকে। এই সময়ে, জুম-স্তর শুধুমাত্র ট্যাবের জন্য সংজ্ঞায়িত করা হয়, এবং উইন্ডোজ বা পর্দার জন্য নয়।
ক্যাপচার শেষ হওয়ার পরে, বৈশিষ্ট্যটি শেষ জুম-স্তরের মান ধরে রাখবে।
এই বৈশিষ্ট্যটি পড়ার জন্য "captured-surface-control" অনুমতির প্রয়োজন নেই ।
onzoomlevelchange
এই ইভেন্ট হ্যান্ডলার ক্যাপচার করা ট্যাবের জুম স্তরের পরিবর্তনগুলি শোনার সুবিধা দেয়৷ এগুলি হয়:
- যখন ব্যবহারকারী ক্যাপচার করা ট্যাবের জুম-লেভেল ম্যানুয়ালি পরিবর্তন করতে ব্রাউজারের সাথে ইন্টারঅ্যাক্ট করে।
- জুম-সেটিং পদ্ধতিতে ক্যাপচারিং অ্যাপের কলগুলির প্রতিক্রিয়া হিসাবে (নীচে বর্ণিত)।
এই বৈশিষ্ট্যটি পড়ার জন্য "captured-surface-control" অনুমতির প্রয়োজন নেই ।
increaseZoomLevel() , decreaseZoomLevel() এবং resetZoomLevel()
এই পদ্ধতিগুলি ক্যাপচার করা ট্যাবের জুম স্তরের হেরফের করার অনুমতি দেয়।
getSupportedZoomLevels() দ্বারা প্রত্যাবর্তিত ক্রমানুসারে, increaseZoomLevel() এবং decreaseZoomLevel() যথাক্রমে পরবর্তী বা পূর্ববর্তী জুম-স্তরে জুম স্তর পরিবর্তন করে। resetZoomLevel() মান 100 সেট করে।
এই পদ্ধতিগুলি কল করার জন্য "captured-surface-control" অনুমতি প্রয়োজন । ক্যাপচারিং অ্যাপের এই অনুমতি না থাকলে, ব্যবহারকারীকে এটি মঞ্জুর বা অস্বীকার করার জন্য অনুরোধ করা হবে।
এই পদ্ধতিগুলি সমস্ত একটি প্রতিশ্রুতি প্রদান করে যা কল সফল হলে এবং অন্যথায় প্রত্যাখ্যান করা হলে সমাধান করা হয়। প্রত্যাখ্যানের সম্ভাব্য কারণগুলির মধ্যে রয়েছে:
- অনুপস্থিত অনুমতি.
- ধরা শুরুর আগেই ফোন করা হয়।
- ক্যাপচার শেষ হওয়ার পর ফোন করা হয়।
- একটি অসমর্থিত ডিসপ্লে সারফেস টাইপ ক্যাপচারের সাথে যুক্ত একটি
controllerকল করা হয়েছে। (অর্থাৎ, ট্যাব-ক্যাপচার ছাড়া অন্য কিছু।) - যথাক্রমে সর্বোচ্চ বা সর্বনিম্ন মান অতিক্রম করে বাড়ানো বা হ্রাস করার প্রচেষ্টা।
উল্লেখযোগ্যভাবে, controller.zoomLevel == controller.getSupportedZoomLevels().at(0) হলে, decreaseZoomLevel() কল করা এড়াতে এবং .at(-1) এর সাথে অনুরূপ ফ্যাশনে ZoomLevel increaseZoomLevel() কলগুলিকে রক্ষা করার পরামর্শ দেওয়া হয়।
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে ব্যবহারকারীকে ক্যাপচারিং অ্যাপ থেকে সরাসরি একটি ক্যাপচার করা ট্যাবের জুম স্তর বাড়ানো যায়:
const zoomIncreaseButton = document.getElementById('zoomInButton');
zoomIncreaseButton.addEventListener('click', async (event) => {
if (controller.zoomLevel >= controller.getSupportedZoomLevels().at(-1)) {
return;
}
try {
await controller.increaseZoomLevel();
} catch (error) {
// Inspect the error.
// ...
}
});
নিচের উদাহরণটি দেখায় কিভাবে একটি ক্যাপচার করা ট্যাবের জুম লেভেল পরিবর্তনে প্রতিক্রিয়া দেখাতে হয়:
controller.addEventListener('zoomlevelchange', (event) => {
const zoomLevelLabel = document.querySelector('#zoomLevelLabel');
zoomLevelLabel.textContent = `${controller.zoomLevel}%`;
});
বৈশিষ্ট্য সনাক্তকরণ
ক্যাপচার করা সারফেস কন্ট্রোল API সমর্থিত কিনা তা পরীক্ষা করতে, ব্যবহার করুন:
if (!!window.CaptureController?.prototype.forwardWheel) {
// CaptureController forwardWheel() is supported.
}
অন্যান্য ক্যাপচার করা সারফেস কন্ট্রোল এপিআই সারফেসগুলির মধ্যে যেকোনো একটি ব্যবহার করা সমানভাবে সম্ভব, যেমন increaseZoomLevel বা decreaseZoomLevel , বা এমনকি তাদের সকলের জন্যও পরীক্ষা করা।
ব্রাউজার সমর্থন
ক্যাপচার করা সারফেস কন্ট্রোল শুধুমাত্র ডেস্কটপে Chrome 136 থেকে পাওয়া যায়।
নিরাপত্তা এবং গোপনীয়তা
"captured-surface-control" অনুমতি নীতি আপনাকে কীভাবে আপনার ক্যাপচারিং অ্যাপ এবং এমবেড করা তৃতীয় পক্ষের আইফ্রেমগুলি ক্যাপচার করা সারফেস কন্ট্রোলে অ্যাক্সেস করতে পারে তা পরিচালনা করতে দেয়। নিরাপত্তা ট্রেডঅফগুলি বোঝার জন্য, ক্যাপচারড সারফেস কন্ট্রোল ব্যাখ্যাকারীর গোপনীয়তা এবং নিরাপত্তা বিবেচনা বিভাগটি দেখুন।
ডেমো
আপনি গ্লিচে ডেমো চালিয়ে ক্যাপচারড সারফেস কন্ট্রোলের সাথে খেলতে পারেন। সোর্স কোড চেক আউট করতে ভুলবেন না.
প্রতিক্রিয়া
Chrome টিম এবং ওয়েব স্ট্যান্ডার্ড সম্প্রদায় ক্যাপচারড সারফেস কন্ট্রোলের সাথে আপনার অভিজ্ঞতার কথা শুনতে চায়৷
ডিজাইন সম্পর্কে বলুন
ক্যাপচারড সারফেস ক্যাপচার সম্পর্কে এমন কিছু আছে যা আপনার প্রত্যাশা অনুযায়ী কাজ করে না? অথবা আপনার ধারণা বাস্তবায়নের জন্য আপনার প্রয়োজনীয় পদ্ধতি বা বৈশিষ্ট্যগুলি অনুপস্থিত আছে? নিরাপত্তা মডেল সম্পর্কে একটি প্রশ্ন বা মন্তব্য আছে? GitHub রেপোতে একটি বিশেষ সমস্যা ফাইল করুন, বা বিদ্যমান সমস্যাটিতে আপনার চিন্তা যোগ করুন।
বাস্তবায়নে সমস্যা?
আপনি কি Chrome এর বাস্তবায়নের সাথে একটি বাগ খুঁজে পেয়েছেন? অথবা বাস্তবায়ন বৈশিষ্ট থেকে ভিন্ন? https://new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা সম্ভব বিস্তারিত, সেইসাথে পুনরুত্পাদনের জন্য নির্দেশাবলী অন্তর্ভুক্ত করতে ভুলবেন না। গ্লিচ প্রজননযোগ্য বাগগুলি ভাগ করার জন্য দুর্দান্ত কাজ করে।