অঞ্চল ক্যাপচারের সাথে আরও ভাল ট্যাব ভাগ করা

François Beaufort

Elad Alon

ওয়েব প্ল্যাটফর্মটি ইতিমধ্যেই একটি ওয়েব অ্যাপকে বর্তমান ট্যাবের একটি ভিডিও ট্র্যাক ক্যাপচার করার অনুমতি দেয়৷ এটি এখন অঞ্চল ক্যাপচারের সাথে পাঠানো হয়, এই ভিডিও ট্র্যাকগুলি ক্রপ করার একটি প্রক্রিয়া৷ ওয়েব অ্যাপটি বর্তমান ট্যাবের একটি অংশকে তার আগ্রহের ক্ষেত্র হিসাবে মনোনীত করে এবং ব্রাউজারটি সেই এলাকার বাইরে সমস্ত পিক্সেল ক্রপ করে।

ওয়েব অ্যাপগুলি আগে ভিডিও ট্র্যাকগুলিকে "ম্যানুয়ালি" ক্রপ করতে পারত। অর্থাৎ, ওয়েব অ্যাপস প্রতিটি ফ্রেমকে সরাসরি ম্যানিপুলেট করতে পারে। এটি শক্তিশালী বা কার্যকরী ছিল না। অঞ্চল ক্যাপচার এই ত্রুটিগুলি সমাধান করে৷ ওয়েব অ্যাপ এখন ব্রাউজারকে তার হয়ে কাজ করার নির্দেশ দিতে পারে।

অঞ্চল ক্যাপচার সম্পর্কে

তাই আপনি Dynamic Content™ দিয়ে একটি ওয়েবসাইট তৈরি করেছেন৷ এটি সর্বকালের সেরা ওয়েব অ্যাপ, এবং লোকেরা প্রায়শই সহযোগিতামূলকভাবে এটি ব্যবহার করা বন্ধ করতে পারে না। একটি সম্ভাব্য পরবর্তী পদক্ষেপ হল ভার্চুয়াল কনফারেন্সিং ক্ষমতাগুলি এম্বেড করা। আপনি এটির সাথে যাওয়ার সিদ্ধান্ত নিন। আপনি একটি বিদ্যমান ভিডিও কনফারেন্সিং পরিষেবা প্রদানকারীর সাথে দল বেঁধেছেন, তাদের ওয়েব অ্যাপকে একটি ক্রস-অরিজিন আইফ্রেম হিসেবে এম্বেড করছেন। ভিডিও কনফারেন্সিং ওয়েব অ্যাপটি বর্তমান ট্যাবটিকে একটি ভিডিও ট্র্যাক হিসাবে ক্যাপচার করে এবং এটি দূরবর্তী অংশগ্রহণকারীদের কাছে প্রেরণ করে।

এত দ্রুত নয়... আপনি আসলেই লোকেদের নিজের ভিডিও তাদের কাছে ফেরত পাঠাতে চান না, এখন, আপনি কি? ভাল ফসল যে অংশ দূরে. কিন্তু কিভাবে? এমবেড করা iframe জানেন না কোন বিষয়বস্তু আপনি প্রকাশ করেন এবং কোথায়, তাই এটি কিছু সাহায্য ছাড়া ক্রপ করতে পারে না। আপনি, তাত্ত্বিকভাবে, উদ্দিষ্ট স্থানাঙ্কগুলি পাস করতে পারেন। কিন্তু ব্যবহারকারী উইন্ডোর আকার পরিবর্তন করলে কি হবে? ভিউপোর্ট স্ক্রোল? জুম ইন বা আউট? পৃষ্ঠার সাথে এমনভাবে ইন্টারঅ্যাক্ট করে যা লেআউট পরিবর্তন করে? এমনকি আপনি ক্যাপচারিং আইফ্রেমে নতুন স্থানাঙ্ক পাঠালেও, সময় সংক্রান্ত সমস্যাগুলি এখনও কিছু ভুল ফ্রেম তৈরি করতে পারে।

এর পরে অঞ্চল ক্যাপচার ব্যবহার করা যাক. আপনার পৃষ্ঠায় একটি 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);

ভিডিও কনফারেন্সিং ওয়েব অ্যাপ ব্রাউজারকে প্রধান ওয়েব অ্যাপ থেকে প্রাপ্ত ক্রপ টার্গেটের সাথে সেলফ-ক্যাপচার ভিডিও ট্র্যাকে cropTo() কল করে CropTarget দ্বারা সংজ্ঞায়িত এলাকায় ট্র্যাক ক্রপ করতে বলে।

// 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 (যে উপাদান থেকে ক্রপ টার্গেট নেওয়া হয়েছিল) এর কনট্যুরগুলিতে ক্রপ করা শুরু করতে track.cropTo(cropTarget) এ কল করুন।

সফল হলে, প্রতিশ্রুতিটি সমাধান করা হবে যখন এটি নিশ্চিত করা যেতে পারে যে পরবর্তী সমস্ত ভিডিও ফ্রেমে পিক্সেলগুলি থাকবে যা mainContentArea এর বাউন্ডিং বক্সের মধ্যে পড়ে৷

ব্যর্থ হলে, প্রতিশ্রুতি প্রত্যাখ্যান করা হবে। এটি ঘটবে যদি:

• CropTarget অন্য ট্যাবে মিন্ট করা হয়েছে। (আপাতত - সাথে থাকুন।)
• CropTarget একটি উপাদান থেকে উদ্ভূত হয়েছে যেটি আর বিদ্যমান নেই।
• ট্র্যাক ক্লোন আছে. ( ইস্যু 1509418 দেখুন।)
• বর্তমান ট্র্যাক একটি স্ব-ক্যাপচার ভিডিও ট্র্যাক নয়; নীচে দেখুন

cropTo() পদ্ধতিটি যেকোন ট্যাব-ক্যাপচার ভিডিও ট্র্যাকে প্রকাশ করা হয়, এবং শুধুমাত্র স্ব-ক্যাপচারের জন্য নয়। তাই ট্র্যাক ক্রপ করার চেষ্টা করার আগে ব্যবহারকারী বর্তমান ট্যাবটি নির্বাচন করেছেন কিনা তা পরীক্ষা করার পরামর্শ দেওয়া হয়। এটি ক্যাপচার হ্যান্ডেল ব্যবহার করে সম্পন্ন করা যেতে পারে। এছাড়াও ব্রাউজারকে 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-এর সাধারণ ক্রপিংয়ের চেয়ে আলাদা নিরাপত্তা এবং গোপনীয়তার প্রয়োজনীয়তা রয়েছে।

নিরাপত্তা এবং গোপনীয়তা

অঞ্চল ক্যাপচার এমন একটি ওয়েব অ্যাপকে অনুমতি দেয় যা ইতিমধ্যেই ট্যাবের সমস্ত পিক্সেল পর্যবেক্ষণ করছে, স্বেচ্ছায় সেই পিক্সেলগুলির মধ্যে কিছু সরিয়ে ফেলতে। এটি স্পষ্টভাবে নিরাপদ, কারণ নতুন কোনো তথ্য পাওয়া যাবে না।

দূরবর্তী অংশগ্রহণকারীদের কাছে কোন তথ্য পাঠানো হয় তা সীমিত করতে অঞ্চল ক্যাপচার ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, হয়ত আপনি কিছু স্লাইড শেয়ার করতে চান, কিন্তু আপনার স্পিকার নোট নয়৷

মনে রাখবেন যে স্থানীয়ভাবে, অঞ্চল ক্যাপচার কোনো নিরাপত্তা গ্যারান্টি যোগ করে না। অন্য নথিতে একটি ট্র্যাক হস্তান্তর করার সময়, প্রাপ্ত নথিটি এখনও ট্র্যাকটি আনক্রপ করতে পারে এবং ক্যাপচার করা ট্যাবের সমস্ত পিক্সেলগুলিতে অ্যাক্সেস পেতে পারে৷

ক্রোম ক্যাপচার করা ট্যাবগুলির প্রান্তগুলির চারপাশে একটি নীল সীমানা আঁকে৷ ক্রপ করার সময়, ক্রোম সাধারণত ক্রপ করা লক্ষ্যের চারপাশে নীল সীমানা আঁকে।

ডেমো

আপনি Glitch এ ডেমো চালিয়ে অঞ্চল ক্যাপচারের সাথে খেলতে পারেন। সোর্স কোড চেক আউট করতে ভুলবেন না.

ব্রাউজার সমর্থন

অঞ্চল ক্যাপচার শুধুমাত্র ডেস্কটপে Chrome 104 থেকে উপলব্ধ।

এরপর কি

ওয়েবে স্ক্রিন ভাগ করে নেওয়ার উন্নতি ঘটাতে অদূর ভবিষ্যতে কী আশা করা যায় সে সম্পর্কে এখানে একটি উঁকি দেওয়া হল:

• অঞ্চল ক্যাপচার অন্যান্য ট্যাবের ক্যাপচার সমর্থন করবে।
• শর্তসাপেক্ষ ফোকাস ক্যাপচারিং ওয়েব অ্যাপকে ব্রাউজারকে নির্দেশ দিতে দেয় যাতে হয় ক্যাপচার করা ডিসপ্লে সারফেসে ফোকাস স্যুইচ করতে, অথবা এই ধরনের ফোকাস পরিবর্তন এড়াতে।
• একটি উপাদান-স্তরের ক্যাপচার API প্রদান করা হতে পারে।

প্রতিক্রিয়া

Chrome টিম এবং ওয়েব স্ট্যান্ডার্ড সম্প্রদায় আপনার অঞ্চল ক্যাপচারের অভিজ্ঞতা সম্পর্কে শুনতে চায়৷

ডিজাইন সম্পর্কে বলুন

অঞ্চল ক্যাপচার সম্পর্কে এমন কিছু আছে যা আপনার প্রত্যাশা অনুযায়ী কাজ করে না? অথবা আপনার ধারণা বাস্তবায়নের জন্য আপনার প্রয়োজনীয় পদ্ধতি বা বৈশিষ্ট্যগুলি অনুপস্থিত আছে? নিরাপত্তা মডেল সম্পর্কে একটি প্রশ্ন বা মন্তব্য আছে?

• GitHub রেপোতে একটি বিশেষ সমস্যা ফাইল করুন, বা বিদ্যমান সমস্যাটিতে আপনার চিন্তা যোগ করুন।

বাস্তবায়নে সমস্যা?

আপনি কি Chrome এর বাস্তবায়নের সাথে একটি বাগ খুঁজে পেয়েছেন? অথবা বাস্তবায়ন বৈশিষ্ট থেকে ভিন্ন?

• https://new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা সম্ভব বিস্তারিত এবং পুনরুত্পাদনের জন্য সহজ নির্দেশাবলী অন্তর্ভুক্ত করতে ভুলবেন না। দ্রুত এবং সহজ রিপ্রো শেয়ার করার জন্য গ্লিচ দুর্দান্ত কাজ করে।

সমর্থন দেখান

আপনি কি অঞ্চল ক্যাপচার ব্যবহার করার পরিকল্পনা করছেন? আপনার সর্বজনীন সমর্থন Chrome টিমকে বৈশিষ্ট্যগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার বিক্রেতাদের দেখায় যে তাদের সমর্থন করা কতটা গুরুত্বপূর্ণ৷

@ChromiumDev- এ একটি টুইট পাঠান এবং আপনি এটি কোথায় এবং কীভাবে ব্যবহার করছেন তা আমাদের জানান।

সহায়ক লিঙ্ক

• স্পেসিফিকেশন
• ব্যাখ্যাকারী
• TAG পর্যালোচনা
• ক্রোমিয়াম বাগ
• ChromeStatus.com এন্ট্রি

স্বীকৃতি

এই নিবন্ধটি পর্যালোচনা করার জন্য জো মেডলিকে ধন্যবাদ।