ক্যাপচার হ্যান্ডেলের সাথে আরও ভালো ট্যাব শেয়ার করা

François Beaufort

Elad Alon

ওয়েব প্ল্যাটফর্মটি এখন ক্যাপচার হ্যান্ডেলের সাথে পাঠানো হয়, একটি প্রক্রিয়া যা ক্যাপচার এবং ক্যাপচার করা ওয়েব অ্যাপগুলির মধ্যে সহযোগিতায় সহায়তা করে৷ ক্যাপচার হ্যান্ডেল একটি ক্যাপচারিং ওয়েব অ্যাপকে ergonomically এবং আত্মবিশ্বাসের সাথে ক্যাপচার করা ওয়েব অ্যাপ সনাক্ত করতে দেয়। (যদি ক্যাপচার করা ওয়েব অ্যাপটি অপ্ট-ইন করে থাকে।)

কয়েকটি উদাহরণ সুবিধাগুলি ব্যাখ্যা করে।

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

উদাহরণ 2: "হল অফ মিরর" প্রভাবটি ঘটে যখন একটি ক্যাপচার করা পৃষ্ঠটি ক্যাপচার করা অবস্থানে ফিরিয়ে দেওয়া হয়। উল্লেখযোগ্যভাবে, ব্যবহারকারী যদি একটি ভিডিও কনফারেন্সিং কল হচ্ছে এমন ট্যাবটি ক্যাপচার করতে বেছে নেয় এবং ভিডিও কনফারেন্সিং ওয়েব অ্যাপ স্থানীয় প্রিভিউ রেন্ডার করে, তাহলে এই ভয়ঙ্কর প্রভাব পরিলক্ষিত হবে। ক্যাপচার হ্যান্ডেল ব্যবহার করে, স্ব-ক্যাপচার সনাক্ত করা যায় এবং প্রশমিত করা যায়; উদাহরণস্বরূপ, ওয়েব অ্যাপ স্থানীয় পূর্বরূপ দমন করে।

ক্যাপচার হ্যান্ডেল সম্পর্কে

ক্যাপচার হ্যান্ডেল দুটি পরিপূরক অংশ নিয়ে গঠিত:

• ক্যাপচার করা ওয়েব অ্যাপ্লিকেশানগুলি navigator.mediaDevices.setCaptureHandleConfig() এর সাহায্যে কিছু উত্সের জন্য নির্দিষ্ট তথ্য প্রকাশ করতে অপ্ট-ইন করতে পারে৷
• ওয়েব অ্যাপ্লিকেশানগুলি ক্যাপচার করা তখন MediaStreamTrack অবজেক্টে getCaptureHandle() দিয়ে সেই তথ্য পড়তে পারে।

পাশ বন্দী

ওয়েব অ্যাপ্লিকেশনগুলি ক্যাপচারিং ওয়েব অ্যাপ্লিকেশনগুলিতে তথ্য প্রকাশ করতে পারে৷ এটি এই সদস্যদের নিয়ে গঠিত একটি ঐচ্ছিক বস্তুর সাথে navigator.mediaDevices.setCaptureHandleConfig() কল করে তা করে:

• handle : 1024 অক্ষর পর্যন্ত যেকোনো স্ট্রিং হতে পারে..
• exposeOrigin : true হলে, ক্যাপচার করা ওয়েব অ্যাপের উৎপত্তি ওয়েব অ্যাপস ক্যাপচার করার জন্য উন্মুক্ত হতে পারে।
• permittedOrigins : বৈধ মানগুলি হল (i) একটি খালি অ্যারে, (ii) একক আইটেম "*" সহ একটি অ্যারে, বা (iii) উত্সগুলির একটি অ্যারে৷ permittedOrigins এ যদি একক আইটেম "*" থাকে, তাহলে CaptureHandle সমস্ত ক্যাপচারিং ওয়েব অ্যাপ দ্বারা পর্যবেক্ষণযোগ্য। অন্যথায়, এটি কেবলমাত্র এমন ওয়েব অ্যাপস ক্যাপচার করার জন্য পর্যবেক্ষণযোগ্য যেগুলির উত্স permittedOrigins রয়েছে৷

নিম্নলিখিত উদাহরণটি দেখায় যে কীভাবে একটি এলোমেলোভাবে তৈরি করা UUID একটি হ্যান্ডেল হিসাবে প্রকাশ করা যায় এবং যে কোনও ক্যাপচারিং ওয়েব অ্যাপের উত্স।

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

নোট করুন যে ক্যাপচার করা ওয়েব অ্যাপটি ক্যাপচার করা হচ্ছে কিনা তা জানে না। যদি না, অর্থাৎ, ক্যাপচারিং ওয়েব অ্যাপ CaptureHandle তথ্য ব্যবহার করে ক্যাপচার করা ওয়েব অ্যাপের সাথে যোগাযোগ স্থাপন করতে (একজন কর্মীর মাধ্যমে মেসেজিং ব্যবহার করে, অথবা একটি শেয়ার্ড ক্লাউড অবকাঠামো ব্যবহার করে)।

পাশ ক্যাপচারিং

ক্যাপচারিং ওয়েব অ্যাপটিতে একটি ভিডিও MediaStreamTrack রয়েছে, এবং সেই MediaStreamTrack এ getCaptureHandle() কল করে ক্যাপচার হ্যান্ডেলের তথ্য পড়তে পারে। কোনো ক্যাপচার হ্যান্ডেল উপলব্ধ না থাকলে বা ক্যাপচারিং ওয়েব অ্যাপটিকে এটি পড়ার অনুমতি না থাকলে এই কলটি null হয়ে যায়। যদি একটি ক্যাপচার হ্যান্ডেল উপলব্ধ থাকে, এবং ক্যাপচারিং ওয়েব অ্যাপটি permittedOrigins এ যোগ করা হয়, এই কলটি নিম্নলিখিত সদস্যদের সাথে একটি বস্তু ফেরত দেয়:

• handle : navigator.mediaDevices.setCaptureHandleConfig() সহ ক্যাপচার করা ওয়েব অ্যাপ দ্বারা সেট করা স্ট্রিং মান।
• origin : ক্যাপচার করা ওয়েব অ্যাপের উৎপত্তি যদি exposeOrigin true সেট করা থাকে। অন্যথায়, এটি সংজ্ঞায়িত করা হয় না।

নিম্নলিখিত উদাহরণ দেখায় কিভাবে একটি ভিডিও ট্র্যাক থেকে ক্যাপচার হ্যান্ডেল তথ্য পড়তে হয়।

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

একটি MediaStreamTrack অবজেক্টে "capturehandlechange" ইভেন্টগুলি শুনে CaptureHandle পরিবর্তনগুলি মনিটর করুন। পরিবর্তন ঘটে যখন:

• ক্যাপচার করা ওয়েব অ্যাপটি navigator.mediaDevices.setCaptureHandleConfig() কল করে।
• ক্যাপচার করা ওয়েব অ্যাপে একটি ক্রস-ডকুমেন্ট নেভিগেশন ঘটে।

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

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

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

মনে রাখবেন navigator.mediaDevices.setCaptureHandleConfig() শুধুমাত্র নিরাপদ ব্রাউজিং প্রসঙ্গে (শুধুমাত্র HTTPS) শীর্ষ-স্তরের প্রধান ফ্রেমে উপলব্ধ।

নমুনা

আপনি নমুনা চালিয়ে ক্যাপচার হ্যান্ডেলের সাথে খেলতে পারেন।

ডেমো

কিছু ডেমো এখানে উপলব্ধ:

• রিমোট কন্ট্রোল
• সেলফ ক্যাপচার ডিটেকশন

বৈশিষ্ট্য সনাক্তকরণ

getCaptureHandle() সমর্থিত কিনা তা পরীক্ষা করতে, ব্যবহার করুন:

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

navigator.mediaDevices.setCaptureHandleConfig() সমর্থিত কিনা তা পরীক্ষা করতে, ব্যবহার করুন:

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

এরপর কি

এখানে অদূর ভবিষ্যতে কী আশা করা যায় তার এক ঝলক দেখুন যা ওয়েবে স্ক্রিন শেয়ারিং উন্নত করবে:

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

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

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

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

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

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

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

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

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

সমর্থন দেখান

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

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

সহায়ক লিঙ্ক

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

স্বীকৃতি

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