স্ক্রিন ক্যাপচার API এর সাহায্যে, আপনি পুরো বর্তমান ট্যাবটি ক্যাপচার করতে পারেন। এলিমেন্ট ক্যাপচার API আপনাকে একটি নির্দিষ্ট HTML উপাদান ক্যাপচার এবং রেকর্ড করতে দেয়। এটি সম্পূর্ণ ট্যাবের একটি ক্যাপচারকে একটি নির্দিষ্ট DOM সাবট্রির ক্যাপচারে রূপান্তরিত করে, শুধুমাত্র টার্গেট-এলিমেন্টের সরাসরি বংশধরদের ক্যাপচার করে। অন্য কথায়, এটি আবদ্ধ এবং আটকানো উভয় বিষয়বস্তু ক্রপ করে এবং সরিয়ে দেয়।
কেন এলিমেন্ট ক্যাপচার ব্যবহার করবেন?
একটি ভিডিও-কনফারেন্সিং অ্যাপ্লিকেশনের প্রয়োজনীয়তা বিবেচনা করা আপনাকে বুঝতে সাহায্য করতে পারে যে উপাদান ক্যাপচার কোথায় দরকারী। আপনার যদি একটি ভিডিও-কনফারেন্সিং অ্যাপ্লিকেশন থাকে যা আপনাকে একটি আইফ্রেমে তৃতীয় পক্ষের অ্যাপ্লিকেশনগুলিকে এম্বেড করতে দেয়, আপনি কখনও কখনও সেই আইফ্রেমটিকে ভিডিও হিসাবে ক্যাপচার করতে এবং দূরবর্তী অংশগ্রহণকারীদের কাছে প্রেরণ করতে চাইতে পারেন৷
getDisplayMedia() কল করা এবং ব্যবহারকারীকে বর্তমান ট্যাবটি বেছে নিতে দেওয়া সমগ্র বর্তমান ট্যাবটি প্রেরণ করবে। এটি লোকেদের নিজস্ব ভিডিও তাদের কাছে ফেরত পাঠানোর সম্ভাবনা রয়েছে। আপনি অঞ্চল ক্যাপচার ব্যবহার করে এটি কেটে ফেলতে পারেন।
যাইহোক, যদি উপস্থাপক ভিডিও-কনফারেন্সিং অ্যাপ্লিকেশনের সাথে জড়িত থাকে এবং কিছু বিষয়বস্তু, যেমন একটি ড্রপ-ডাউন তালিকা, ক্যাপচারের উদ্দেশ্যে করা বিষয়বস্তুর উপরে আঁকে?
অঞ্চল ক্যাপচার সেখানে আপনাকে সাহায্য করবে না। ড্রপ-ডাউন তালিকার কিছু অংশ দূরবর্তী অংশগ্রহণকারীদের স্ক্রিনে দৃশ্যমান হতে পারে।
অঞ্চল ক্যাপচার এইভাবে উপাদানগুলির অংশগুলিকে ক্যাপচার করে ( কন্টেন্ট আটকে রাখা হিসাবে পরিচিত) একাধিক সমস্যা তৈরি করে:
- বিষয়বস্তু বাদ দিলে ব্যবহারকারী শেয়ার করতে চান এমন বিষয়বস্তু দেখতে বাধা দিতে পারে।
- অন্তর্ভুক্ত বিষয়বস্তু ব্যক্তিগত হতে পারে (চ্যাট বিজ্ঞপ্তি মনে করুন)।
- অন্তর্ভুক্ত বিষয়বস্তু বিভ্রান্তিকর হতে পারে. (উদাহরণস্বরূপ, অ্যাপ্লিকেশনটির একটি পুনঃ-লেআউট সংক্ষিপ্তভাবে দূরবর্তী অংশগ্রহণকারীদের নিজস্ব ভিডিওগুলিকে ক্যাপচার করা-লক্ষ্যে নিয়ে আসতে পারে।)
এলিমেন্ট ক্যাপচার API এই সমস্ত সমস্যার সমাধান করে, আপনি যে উপাদানটি ভাগ করতে চান তা লক্ষ্য করে।
আমি কিভাবে এলিমেন্ট ক্যাপচার ব্যবহার করব?
captureTarget হল আপনার পৃষ্ঠার একটি উপাদান যাতে ব্যবহারকারী ক্যাপচার করতে চায় এমন সামগ্রী রয়েছে৷ আপনি ভিডিও কনফারেন্সিং ওয়েব অ্যাপটি ক্যাপচার captureTarget ক্যাপচার করতে এবং দূরবর্তী অংশগ্রহণকারীদের সাথে ভাগ করতে চান৷ সুতরাং আপনি captureTarget থেকে একটি RestrictionTarget প্রাপ্ত করুন। এই RestrictionTarget ব্যবহার করে ভিডিও ট্র্যাক সীমাবদ্ধ করার পরে, সেই ভিডিও ট্র্যাকের ফ্রেমগুলি এখন শুধুমাত্র সেই পিক্সেলগুলি নিয়ে গঠিত যা captureTarget এবং এর সরাসরি DOM বংশধরের অংশ৷
যদি captureTarget আকার, আকৃতি বা অবস্থান পরিবর্তন করে, ভিডিও ট্র্যাকটি অনুসরণ করে, কোনো ওয়েব অ্যাপ থেকে কোনো অতিরিক্ত ইনপুট প্রয়োজন ছাড়াই। আবির্ভূত, অদৃশ্য বা ঘোরাফেরা করা বিষয়বস্তু অন্তর্ভুক্ত করার জন্য একইভাবে কোন বিশেষ চিকিৎসার প্রয়োজন নেই।
এই পদক্ষেপগুলি আবার পর্যালোচনা করুন:
ব্যবহারকারীকে বর্তমান ট্যাবটি ক্যাপচার করার অনুমতি দিয়ে শুরু করুন।
// Ask the user for permission to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();
ইনপুট হিসাবে আপনার পছন্দের একটি উপাদানের সাথে RestrictionTarget.fromElement() কল করে একটি RestrictionTarget সংজ্ঞায়িত করুন।
// Associate captureTarget with a new RestrictionTarget
const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);
তারপর ইনপুট হিসাবে RestrictionTarget সহ ভিডিও ট্র্যাকে restrictTo() কল করুন। একবার শেষ প্রতিশ্রুতি সমাধান হয়ে গেলে, পরবর্তী সমস্ত ফ্রেমগুলি সীমাবদ্ধ থাকবে৷
// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);
// Enjoy! Transmit remotely.
গভীর ডুব
বৈশিষ্ট্য সনাক্তকরণ
RestrictionTarget.fromElement() সমর্থিত কিনা তা পরীক্ষা করতে, ব্যবহার করুন:
if ("RestrictionTarget" in self && "fromElement" in RestrictionTarget) {
// Deriving a restriction target is supported.
}
একটি সীমাবদ্ধতা লক্ষ্য অর্জন করুন
captureTarget নামক এলিমেন্টে ফোকাস করুন। এটি থেকে একটি RestrictionTarget পেতে, RestrictionTarget.fromElement(captureTarget) কল করুন। ফিরে আসা প্রতিশ্রুতি সফল হলে একটি নতুন RestrictionTarget অবজেক্টের সাথে সমাধান করা হবে। অন্যথায় এটি প্রত্যাখ্যান করা হবে যদি আপনি একটি অযৌক্তিক সংখ্যক RestrictionTarget অবজেক্ট তৈরি করে থাকেন।
const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);
একটি উপাদানের বিপরীতে, একটি RestrictionTarget অবজেক্ট ক্রমিক । উদাহরণস্বরূপ, Window.postMessage() ব্যবহার করে এটি অন্য নথিতে প্রেরণ করা যেতে পারে।
সীমাবদ্ধ
একটি ট্যাব ক্যাপচার করার সময়, ভিডিও ট্র্যাক restrictTo() প্রকাশ করে। বর্তমান ট্যাবটি ক্যাপচার করার সময়, বর্তমান ট্যাবের মধ্যে একটি এলিমেন্ট থেকে প্রাপ্ত null বা যেকোনো RestrictionTarget দিয়ে restrictTo() কল করা বৈধ।
restrictTo(restrictionTarget) করার কলগুলি ভিডিও ট্র্যাকটিকে captureTarget এর ক্যাপচারে রূপান্তরিত করে, যেন এটি নিজের দ্বারা আঁকা হয়েছে, বাকি DOM থেকে স্বাধীনভাবে৷ captureTarget এর যেকোনো বংশধরকেও বন্দী করা হয়; captureTarget এর ভাইবোনদের ক্যাপচার থেকে বাদ দেওয়া হয়। ফলাফল হল যে ট্র্যাকে বিতরণ করা যেকোন ফ্রেমগুলি এমনভাবে প্রদর্শিত হয় যেন সেগুলি captureTarget এর কনট্যুরগুলিতে ক্রপ করা হয়েছে, এবং যেকোন আটকানো এবং আটকানো বিষয়বস্তু সরানো হয়৷
// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);
restrictTo(null) করার জন্য কলগুলি ট্র্যাকটিকে তার আসল অবস্থায় ফিরিয়ে দেয়।
// Stop restricting.
await track.restrictTo(null);
যদি restrictTo() এর কল সফল হয়, তাহলে প্রত্যাবর্তিত প্রতিশ্রুতিটি সমাধান করা হয় যখন এটি নিশ্চিত করা যায় যে পরবর্তী সমস্ত ভিডিও ফ্রেম captureTarget টার্গেটে সীমাবদ্ধ থাকবে।
ব্যর্থ হলে, প্রতিশ্রুতি প্রত্যাখ্যান করা হয়। restrictTo() তে একটি অসফল কল নিম্নলিখিত কারণগুলির একটির জন্য হবে:
- যদি
restrictionTargetক্যাপচার করা ছাড়া অন্য কোনো ট্যাবে মিন্ট করা হয়। (উল্লেখ্য যে "এর পরিবর্তে এই ট্যাবটি ভাগ করুন" বোতামটি ব্যবহার করে, ব্যবহারকারীরা যে কোনো সময়ে কোন ট্যাবটি ক্যাপচার করা হবে তা পরিবর্তন করতে পারে৷) - যদি
restrictionTargetএকটি উপাদান থেকে উদ্ভূত হয় যেটি আর বিদ্যমান নেই। - যদি ট্র্যাকে ক্লোন থাকে। ( ইস্যু 1509418 দেখুন।)
- যদি বর্তমান ট্র্যাকটি একটি স্ব-ক্যাপচার ভিডিও ট্র্যাক না হয়।
- যে উপাদান থেকে
restrictionTargetপ্রাপ্ত হয়েছে তা যদি সীমাবদ্ধতার জন্য যোগ্য না হয়।
স্ব-ক্যাপচার বিবেচনা
যখন একটি অ্যাপ getDisplayMedia() কল করে, এবং ব্যবহারকারী অ্যাপটির নিজস্ব ট্যাব ক্যাপচার করতে বেছে নেয়, তখন আমরা তাকে "সেলফ-ক্যাপচার" বলি।
restrictTo() পদ্ধতিটি যেকোন ট্যাব-ক্যাপচার ভিডিও ট্র্যাকে প্রকাশ করা হয়, এবং শুধুমাত্র স্ব-ক্যাপচারের জন্য নয়। কিন্তু এলিমেন্ট ক্যাপচার শুধুমাত্র আপাতত স্ব-ক্যাপচারের জন্য সক্ষম। তাই ট্র্যাকটি সীমাবদ্ধ করার চেষ্টা করার আগে ব্যবহারকারী বর্তমান ট্যাবটি নির্বাচন করেছেন কিনা তা পরীক্ষা করার পরামর্শ দেওয়া হয়। এটি ক্যাপচার হ্যান্ডেল ব্যবহার করে সম্পন্ন করা যেতে পারে। এছাড়াও ব্রাউজারকে preferCurrentTab ব্যবহার করে ব্যবহারকারীকে স্ব-ক্যাপচারের দিকে ঠেলে দিতে বলাও সম্ভব।
স্বচ্ছতা
getDisplayMedia() এর মাধ্যমে অ্যাপটি যে ভিডিও ফ্রেমগুলি পায় তাতে একটি আলফা চ্যানেল থাকে না। যদি একটি অ্যাপ আংশিকভাবে স্বচ্ছ ক্যাপচার-টার্গেট সেট করে, তাহলে আলফা চ্যানেল ছিনিয়ে নেওয়ার কিছু সম্ভাব্য ফলাফল রয়েছে:
- রং পরিবর্তন হতে পারে। হালকা পটভূমিতে আঁকা আংশিকভাবে স্বচ্ছ লক্ষ্য-উপাদানগুলি আলফা চ্যানেল সরানো হলে গাঢ় দেখাতে পারে এবং অন্ধকার পটভূমিতে আঁকাগুলি হালকা দেখাতে পারে।
- যে রঙগুলি ব্যবহারকারীর কাছে অদৃশ্য বা অদৃশ্য ছিল যখন আলফা চ্যানেলটি তার সর্বাধিক সেট করা হয়েছিল, আলফা চ্যানেলটি সরানোর পরে প্রদর্শিত হবে৷ উদাহরণস্বরূপ, এটি ক্যাপচার করা ফ্রেমে অপ্রত্যাশিত কালো অঞ্চলের দিকে নিয়ে যেতে পারে, যদি স্বচ্ছ বিভাগগুলিতে RGBA কোড
rgba(0, 0, 0, 0)থাকে।
অযোগ্য ক্যাপচার লক্ষ্য
কোনো বৈধ ক্যাপচার-লক্ষ্যে একটি ট্র্যাক সীমাবদ্ধ করা সর্বদা সম্ভব। যাইহোক, কিছু নির্দিষ্ট অবস্থার অধীনে ফ্রেম তৈরি করা হবে না, উদাহরণস্বরূপ, যদি উপাদান বা পূর্বপুরুষ display:none । সাধারণ যুক্তি হল যে সীমাবদ্ধতা শুধুমাত্র এমন একটি উপাদানের ক্ষেত্রে প্রযোজ্য যা একটি একক, সমন্বিত, দ্বি-মাত্রিক, আয়তক্ষেত্রাকার এলাকা নিয়ে গঠিত, যার পিক্সেলগুলি কোনো পিতামাতা বা ভাইবোন উপাদান থেকে বিচ্ছিন্নভাবে যৌক্তিকভাবে নির্ধারণ করা যেতে পারে।
উপাদানটি নিষেধাজ্ঞার জন্য যোগ্য তা নিশ্চিত করার জন্য একটি গুরুত্বপূর্ণ বিবেচ্য বিষয় হল এটিকে অবশ্যই নিজস্ব স্ট্যাকিং প্রসঙ্গ গঠন করতে হবে। এটি নিশ্চিত করতে, আপনি আইসোলেশন সিএসএস প্রপার্টি নির্দিষ্ট করতে পারেন, এটিকে isolate সেট করতে পারেন।
<div id="captureTarget" style="isolation: isolate;"></iframe>
মনে রাখবেন যে লক্ষ্য উপাদানটি যেকোন নির্বিচারে সীমাবদ্ধতার জন্য যোগ্য এবং অযোগ্য হওয়ার মধ্যে টগল করতে পারে, উদাহরণস্বরূপ, যদি অ্যাপটি তার CSS বৈশিষ্ট্য পরিবর্তন করে। যুক্তিসঙ্গত ক্যাপচার লক্ষ্যগুলি ব্যবহার করা এবং অপ্রত্যাশিতভাবে তাদের বৈশিষ্ট্যগুলি পরিবর্তন করা এড়াতে এটি অ্যাপের উপর নির্ভর করে। লক্ষ্য উপাদানটি অযোগ্য হয়ে গেলে, লক্ষ্য উপাদানটি আবার সীমাবদ্ধতার জন্য যোগ্য না হওয়া পর্যন্ত নতুন ফ্রেমগুলি ট্র্যাকে নির্গত হবে না।
এলিমেন্ট ক্যাপচার সক্ষম করা হচ্ছে
এলিমেন্ট ক্যাপচার এপিআই ডেস্কটপে এলিমেন্ট ক্যাপচার পতাকার পিছনে Chrome এ উপলব্ধ এবং chrome://flags/#element-capture এ সক্ষম করা যেতে পারে।
এই বৈশিষ্ট্যটি ডেস্কটপে Chrome 121 থেকে একটি অরিজিন ট্রায়ালে প্রবেশ করছে , যা ডেভেলপারদের তাদের সাইটের দর্শকদের প্রকৃত ব্যবহারকারীদের কাছ থেকে ডেটা সংগ্রহ করতে বৈশিষ্ট্যটি সক্ষম করতে দেয়৷ অরিজিন ট্রায়াল সম্পর্কে আরও তথ্যের জন্য মূল ট্রায়াল দিয়ে শুরু করুন দেখুন।
নিরাপত্তা এবং গোপনীয়তা
নিরাপত্তা ট্রেডঅফ বুঝতে, এলিমেন্ট ক্যাপচার স্পেসিফিকেশনের গোপনীয়তা এবং নিরাপত্তা বিবেচনা বিভাগটি দেখুন।
ক্রোম ব্রাউজার ক্যাপচার করা ট্যাবগুলির প্রান্তের চারপাশে একটি নীল সীমানা আঁকে৷
ডেমো
আপনি গ্লিচে ডেমো চালিয়ে এলিমেন্ট ক্যাপচারের সাথে খেলতে পারেন। সোর্স কোড চেক আউট করতে ভুলবেন না.
প্রতিক্রিয়া
Chrome টিম এবং ওয়েব স্ট্যান্ডার্ড সম্প্রদায় এলিমেন্ট ক্যাপচারের সাথে আপনার অভিজ্ঞতার কথা শুনতে চায়৷
ডিজাইন সম্পর্কে বলুন
অঞ্চল ক্যাপচার সম্পর্কে এমন কিছু আছে যা আপনার প্রত্যাশা অনুযায়ী কাজ করে না? অথবা আপনার ধারণা বাস্তবায়নের জন্য আপনার প্রয়োজনীয় পদ্ধতি বা বৈশিষ্ট্যগুলি অনুপস্থিত আছে? নিরাপত্তা মডেল সম্পর্কে একটি প্রশ্ন বা মন্তব্য আছে?
- GitHub রেপোতে একটি বিশেষ সমস্যা ফাইল করুন, বা বিদ্যমান সমস্যাটিতে আপনার চিন্তা যোগ করুন।
বাস্তবায়নে সমস্যা?
আপনি কি Chrome এর বাস্তবায়নের সাথে একটি বাগ খুঁজে পেয়েছেন? অথবা বাস্তবায়ন বৈশিষ্ট থেকে ভিন্ন?
- https://new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা সম্ভব বিস্তারিত এবং পুনরুত্পাদনের জন্য সহজ নির্দেশাবলী অন্তর্ভুক্ত করতে ভুলবেন না। দ্রুত এবং সহজ রিপ্রো শেয়ার করার জন্য গ্লিচ দুর্দান্ত কাজ করে।