প্রকাশিত: ২৮ অক্টোবর, ২০২৫, সর্বশেষ আপডেট: ২১ জুন, ২০২২
এই ওয়েব প্ল্যাটফর্মটি ইতিমধ্যেই একটি ওয়েব অ্যাপকে বর্তমান ট্যাবের ভিডিও ট্র্যাক ক্যাপচার করার অনুমতি দেয়। এটি এখন রিজিওন ক্যাপচারের সাথে আসে, যা এই ভিডিও ট্র্যাকগুলি ক্রপ করার একটি প্রক্রিয়া। ওয়েব অ্যাপটি বর্তমান ট্যাবের একটি অংশকে তার আগ্রহের ক্ষেত্র হিসাবে মনোনীত করে এবং ব্রাউজারটি সেই এলাকার বাইরে সমস্ত পিক্সেল ক্রপ করে।
ওয়েব অ্যাপগুলি আগে ভিডিও ট্র্যাকগুলি "ম্যানুয়ালি" কাটতে পারত। অর্থাৎ, ওয়েব অ্যাপগুলি প্রতিটি ফ্রেম সরাসরি পরিচালনা করতে পারত। এটি শক্তিশালী বা কার্যকর ছিল না। রিজিওন ক্যাপচার এই ত্রুটিগুলি সমাধান করে। ওয়েব অ্যাপটি এখন ব্রাউজারকে তার পক্ষ থেকে কাজটি করার নির্দেশ দিতে পারে।
অঞ্চল ক্যাপচার সম্পর্কে
তাহলে আপনি Dynamic Content™ দিয়ে একটি ওয়েবসাইট তৈরি করেছেন। এটি সর্বকালের সেরা ওয়েব অ্যাপ, এবং লোকেরা এটি ব্যবহার বন্ধ করতে পারে না, প্রায়শই সহযোগিতামূলকভাবে। একটি সম্ভাব্য পরবর্তী পদক্ষেপ হল ভার্চুয়াল কনফারেন্সিং ক্ষমতা এম্বেড করা। আপনি এটি নিয়ে যাওয়ার সিদ্ধান্ত নেন। আপনি একটি বিদ্যমান ভিডিও কনফারেন্সিং পরিষেবা প্রদানকারীর সাথে দলবদ্ধ হন, তাদের ওয়েব অ্যাপটিকে একটি ক্রস-অরিজিন আইফ্রেম হিসাবে এম্বেড করেন। ভিডিও কনফারেন্সিং ওয়েব অ্যাপটি বর্তমান ট্যাবটিকে একটি ভিডিও ট্র্যাক হিসাবে ক্যাপচার করে এবং এটি দূরবর্তী অংশগ্রহণকারীদের কাছে প্রেরণ করে।
এত দ্রুত না... তুমি আসলে মানুষের নিজস্ব ভিডিও তাদের কাছে ফেরত পাঠাতে চাও না, তাই না? সেই অংশটা কেটে ফেলাই ভালো। কিন্তু কিভাবে? এমবেডেড আইফ্রেম জানে না তুমি কোন কন্টেন্ট প্রকাশ করবে এবং কোথায়, তাই এটি কারো সাহায্য ছাড়া ক্রপ করতে পারবে না। তত্ত্বগতভাবে, তুমি উদ্দেশ্যপ্রণোদিত স্থানাঙ্কগুলি পাস করতে পারো। কিন্তু ব্যবহারকারী যদি উইন্ডোটির আকার পরিবর্তন করে তাহলে কী হবে? ভিউপোর্ট স্ক্রোল করে? জুম ইন বা আউট করে? পৃষ্ঠার সাথে এমনভাবে ইন্টারঅ্যাক্ট করে যাতে লেআউট পরিবর্তন হয়? এমনকি যদি তুমি ক্যাপচারিং আইফ্রেমে নতুন স্থানাঙ্ক পাঠাও, তবুও সময়ের সমস্যা কিছু ফ্রেম ভুল ক্রপ করতে পারে।
তাহলে Region Capture ব্যবহার করা যাক। আপনার পৃষ্ঠায় একটি Element আছে, সম্ভবত <div> , যার মধ্যে মূল কন্টেন্ট রয়েছে। আসুন এটিকে mainContentArea বলি। আপনি চান ভিডিও কনফারেন্সিং ওয়েব অ্যাপটি এই এলিমেন্টের বাউন্ডিং বক্স দ্বারা নির্ধারিত এলাকাটি ক্যাপচার করে এবং দূরবর্তীভাবে ভাগ করে। সুতরাং আপনি mainContentArea থেকে একটি CropTarget পান। আপনি এই CropTarget ভিডিও কনফারেন্সিং ওয়েব অ্যাপে পাস করেন। এই CropTarget ব্যবহার করে ভিডিও ট্র্যাকটি ক্রপ করার পরে, সেই ট্র্যাকের ফ্রেমগুলিতে এখন কেবল mainContentArea এর বাউন্ডিং বক্সের মধ্যে থাকা পিক্সেল থাকে। যদি mainContentArea আকার, আকৃতি বা অবস্থান পরিবর্তন করে, তাহলে ভিডিও ট্র্যাকটি অনুসরণ করে, কোনও ওয়েব অ্যাপ থেকে কোনও অতিরিক্ত ইনপুট প্রয়োজন হয় না।
আসুন আবার এই ধাপগুলি পর্যালোচনা করি:
আপনার ওয়েব অ্যাপে CropTarget.fromElement() কল করে আপনার পছন্দের উপাদানটি ইনপুট হিসেবে ব্যবহার করে একটি CropTarget সংজ্ঞায়িত করতে পারেন।
// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
আপনি ভিডিও কনফারেন্সিং ওয়েব অ্যাপে CropTarget পাস করেন।
// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);
ভিডিও কনফারেন্সিং ওয়েব অ্যাপটি ব্রাউজারকে CropTarget দ্বারা নির্ধারিত এলাকায় ট্র্যাকটি ক্রপ করতে বলে, মূল ওয়েব অ্যাপ থেকে প্রাপ্ত ক্রপ টার্গেটের সাথে সেলফ-ক্যাপচার ভিডিও ট্র্যাকে cropTo() কল করে।
// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();
// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);
// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.
আরে! তুমি হয়ে গেছো।
গভীর ডুব
বৈশিষ্ট্য সনাক্তকরণ
CropTarget.fromElement() সমর্থিত কিনা তা পরীক্ষা করতে, ব্যবহার করুন:
if ("CropTarget" in self && "fromElement" in CropTarget) {
// Deriving a target is supported.
}
একটি ক্রপটার্গেট বের করা
আসুন mainContentArea নামক এলিমেন্টের উপর ফোকাস করি। এটি থেকে CropTarget বের করতে, CropTarget.fromElement(mainContentArea) কল করুন। সফল হলে, ফেরত আসা প্রতিশ্রুতি একটি নতুন CropTarget অবজেক্ট দিয়ে সমাধান করা হবে। অন্যথায়, যদি আপনি অযৌক্তিক সংখ্যক CropTarget অবজেক্ট তৈরি করেন তবে এটি প্রত্যাখ্যান করা হবে।
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
Element বিপরীতে, CropTarget অবজেক্ট সিরিয়ালাইজেবল । উদাহরণস্বরূপ, Window.postMessage() ব্যবহার করে এটি অন্য ডকুমেন্টে পাঠানো যেতে পারে।
ছাঁটাই
ট্যাব-ক্যাপচার করার সময়, ভিডিও ট্র্যাকটি BrowserCaptureMediaStreamTrack হিসাবে ইনস্ট্যান্টিয়েট করা হয়, যা MediaStreamTrack এর একটি সাবক্লাস। এই সাবক্লাসটি cropTo() এক্সপোজ করে। mainContentArea (যে উপাদান থেকে cropTarget তৈরি করা হয়েছিল) এর কনট্যুরে ক্রপ করা শুরু করতে track.cropTo(cropTarget) কে কল করুন।
যদি সফল হয়, তাহলে প্রতিশ্রুতিটি সমাধান করা হবে যখন এটি নিশ্চিত করা যাবে যে পরবর্তী সমস্ত ভিডিও ফ্রেমে mainContentArea এর বাউন্ডিং বাক্সের মধ্যে থাকা পিক্সেলগুলি থাকবে।
যদি ব্যর্থ হয়, তাহলে প্রতিশ্রুতি প্রত্যাখ্যান করা হবে। এটি ঘটবে যদি:
-
CropTargetএমন একটি উপাদান থেকে উদ্ভূত হয়েছিল যা আর বিদ্যমান নেই। - ট্র্যাকটিতে ক্লোন আছে। ( সংখ্যা 1509418 দেখুন।)
- বর্তমান ট্র্যাকটি কোনও স্ব-ক্যাপচার ভিডিও ট্র্যাক নয়; নিচে দেখুন।
cropTo() পদ্ধতিটি যেকোনো ট্যাব-ক্যাপচার ভিডিও ট্র্যাকে ব্যবহার করা হয়, এবং শুধুমাত্র স্ব-ক্যাপচারের জন্য নয়। তাই ট্র্যাকটি ক্রপ করার চেষ্টা করার আগে ব্যবহারকারী বর্তমান ট্যাবটি নির্বাচন করেছেন কিনা তা পরীক্ষা করে নেওয়া উচিত। এটি Capture Handle ব্যবহার করে সম্পন্ন করা যেতে পারে। preferCurrentTab ব্যবহার করে ব্যবহারকারীকে স্ব-ক্যাপচারের দিকে ঠেলে দিতে ব্রাউজারকে বলাও সম্ভব।
// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);
আনক্রপড অবস্থায় ফিরে যেতে, null দিয়ে cropTo() কল করুন।
// Stop cropping.
await track.cropTo(null);
আবদ্ধ এবং আবদ্ধ কন্টেন্ট
রিজিওন ক্যাপচারের জন্য, শুধুমাত্র টার্গেটের অবস্থান এবং আকার গুরুত্বপূর্ণ, z-সূচক নয়। টার্গেটকে ঘিরে থাকা পিক্সেলগুলি ক্যাপচার করা হবে। টার্গেটের অদৃশ্য অংশগুলি ক্যাপচার করা হবে না।
এটি মূলত রিজিওন ক্যাপচার ক্রপিংয়ের একটি ফলাফল। একটি বিকল্প, যা এর নিজস্ব ভবিষ্যতের API হবে, তা হল এলিমেন্ট-লেভেল ক্যাপচার; অর্থাৎ, কোনও বাধা নির্বিশেষে, শুধুমাত্র টার্গেটের সাথে সম্পর্কিত পিক্সেল ক্যাপচার করা। এই ধরনের API-তে সাধারণ ক্রপিংয়ের চেয়ে আলাদা সুরক্ষা এবং গোপনীয়তার প্রয়োজনীয়তা রয়েছে।
নিরাপত্তা এবং গোপনীয়তা
রিজিওন ক্যাপচার একটি ওয়েব অ্যাপকে অনুমতি দেয় যা ইতিমধ্যেই ট্যাবের সমস্ত পিক্সেল পর্যবেক্ষণ করছে, স্বেচ্ছায় সেই পিক্সেলগুলির কিছু অপসারণ করতে। এটি স্পষ্টতই নিরাপদ, কারণ কোনও নতুন তথ্য পাওয়া যায় না।
রিমোট অংশগ্রহণকারীদের কাছে কোন তথ্য পাঠানো হবে তা সীমিত করতে রিজিওন ক্যাপচার ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, আপনি হয়তো কিছু স্লাইড শেয়ার করতে চান, কিন্তু আপনার স্পিকার নোট শেয়ার করতে চান না।
দূর থেকে নোটগুলি ভাগ করে নেওয়া অত্যন্ত অবাঞ্ছিত। কিউ রিজিওন ক্যাপচার।
মনে রাখবেন যে স্থানীয়ভাবে, রিজিওন ক্যাপচার কোনও সুরক্ষা গ্যারান্টি যোগ করে না। অন্য কোনও ডকুমেন্টে ট্র্যাক হস্তান্তর করার সময়, গ্রহণকারী ডকুমেন্টটি এখনও ট্র্যাকটি খুলে ফেলতে পারে এবং ক্যাপচার করা ট্যাবের সমস্ত পিক্সেল অ্যাক্সেস পেতে পারে।
ক্রোম ক্যাপচার করা ট্যাবগুলির প্রান্তের চারপাশে একটি নীল সীমানা আঁকে। ক্রপ করার সময়, ক্রোম সাধারণত ক্রপ করা টার্গেটের চারপাশে নীল সীমানা আঁকে।
ডেমো
আপনি ডেমোটি চালিয়ে রিজিওন ক্যাপচারের সাথে খেলতে পারেন।
ব্রাউজার সাপোর্ট
রিজিওন ক্যাপচার শুধুমাত্র ডেস্কটপে Chrome 104 থেকে উপলব্ধ।
এরপর কি?
ওয়েবে স্ক্রিন শেয়ারিং উন্নত করার জন্য নিকট ভবিষ্যতে কী আশা করা যায় তার এক ঝলক এখানে দেওয়া হল:
- রিজিওন ক্যাপচার অন্যান্য ট্যাবের ক্যাপচার সমর্থন করবে।
- কন্ডিশনাল ফোকাস ক্যাপচারিং ওয়েব অ্যাপটিকে ব্রাউজারকে ক্যাপচার করা ডিসপ্লে সারফেসে ফোকাস স্যুইচ করার নির্দেশ দেওয়ার অনুমতি দেবে, অথবা এই ধরনের ফোকাস পরিবর্তন এড়াতে পারবে।
- একটি এলিমেন্ট-লেভেল ক্যাপচার API প্রদান করা হতে পারে।
প্রতিক্রিয়া
Chrome টিম এবং ওয়েব স্ট্যান্ডার্ডস কমিউনিটি রিজিওন ক্যাপচারের সাথে আপনার অভিজ্ঞতা সম্পর্কে শুনতে চায়।
ডিজাইন সম্পর্কে আমাদের বলুন
রিজিওন ক্যাপচার সম্পর্কে কি এমন কিছু আছে যা আপনার প্রত্যাশা অনুযায়ী কাজ করছে না? অথবা আপনার ধারণা বাস্তবায়নের জন্য প্রয়োজনীয় কোনও পদ্ধতি বা বৈশিষ্ট্য অনুপস্থিত? নিরাপত্তা মডেল সম্পর্কে আপনার কোন প্রশ্ন বা মন্তব্য আছে?
- GitHub repo তে একটি স্পেক সমস্যা ফাইল করুন, অথবা বিদ্যমান সমস্যায় আপনার মতামত যোগ করুন।
বাস্তবায়নে সমস্যা?
আপনি কি Chrome এর বাস্তবায়নে কোন বাগ খুঁজে পেয়েছেন? নাকি বাস্তবায়নটি স্পেসিফিকেশন থেকে আলাদা?
- https://new.crbug.com এ একটি বাগ ফাইল করুন। যতটা সম্ভব বিস্তারিত তথ্য এবং পুনরুৎপাদনের জন্য সহজ নির্দেশাবলী অন্তর্ভুক্ত করতে ভুলবেন না।
সমর্থন দেখান
আপনি কি রিজিওন ক্যাপচার ব্যবহার করার পরিকল্পনা করছেন? আপনার সর্বজনীন সমর্থন Chrome টিমকে বৈশিষ্ট্যগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার বিক্রেতাদের দেখায় যে তাদের সমর্থন করা কতটা গুরুত্বপূর্ণ।
@ChromiumDev- এ একটি টুইট পাঠান এবং আপনি এটি কোথায় এবং কীভাবে ব্যবহার করছেন তা আমাদের জানান।
সহায়ক লিঙ্ক
স্বীকৃতি
এই প্রবন্ধটি পর্যালোচনা করার জন্য জো মেডলিকে ধন্যবাদ।