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

ফ্রাঁসোয়া বোফোর্ট
François Beaufort
GitHub
এলাদ আলোন

Browser Support

  • ক্রোম: ১০২।
  • প্রান্ত: ১০২।
  • ফায়ারফক্স সমর্থিত নয়।
  • সাফারি সমর্থিত নয়।

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

কয়েকটি উদাহরণ এর উপকারিতা তুলে ধরে।

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

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

প্রতিবিম্ব হলের প্রভাবের চিত্রণ

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

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

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

বন্দী পক্ষ

ওয়েব অ্যাপগুলো সম্ভাব্য তথ্য সংগ্রহকারী ওয়েব অ্যাপগুলোর কাছে তথ্য প্রকাশ করতে পারে। এটি করার জন্য, এটি navigator.mediaDevices.setCaptureHandleConfig() একটি ঐচ্ছিক অবজেক্টসহ কল ​​করে, যেটিতে নিম্নলিখিত মেম্বারগুলো থাকে:

  • handle : ১০২৪ অক্ষর পর্যন্ত যেকোনো স্ট্রিং হতে পারে।
  • 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 পরিবর্তনগুলো নিরীক্ষণ করুন। নিম্নলিখিত ক্ষেত্রে পরিবর্তন ঘটে:

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

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

ক্যাপচারিং এবং ক্যাপচার করা ওয়েব অ্যাপের মধ্যে সহযোগিতা আজ তাত্ত্বিকভাবে সম্ভব, উদাহরণস্বরূপ ক্যাপচার করা ওয়েব অ্যাপে 'ম্যাজিক পিক্সেল' বা ভিডিও স্ট্রিমে কিউআর কোড যুক্ত করার মাধ্যমে। ক্যাপচার হ্যান্ডেল একটি সহজ, আরও নির্ভরযোগ্য এবং আরও সুরক্ষিত ব্যবস্থা প্রদান করে। এটি ক্যাপচার করা ওয়েব অ্যাপকে দর্শক নির্বাচন করার সুযোগও দেয় – হয় নির্দিষ্ট অরিজিন অথবা সম্পূর্ণ ওয়েব নির্বাচন করা যায়।

উল্লেখ্য যে, 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.
}

এরপর কী?

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

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

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

ক্রোম টিম এবং ওয়েব স্ট্যান্ডার্ড কমিউনিটি ক্যাপচার হ্যান্ডেল নিয়ে আপনার অভিজ্ঞতা সম্পর্কে জানতে আগ্রহী।

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

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

  • গিটহাব রিপোতে একটি স্পেক ইস্যু ফাইল করুন, অথবা বিদ্যমান কোনো ইস্যুতে আপনার মতামত যোগ করুন।

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

আপনি কি ক্রোমের বাস্তবায়নে কোনো বাগ খুঁজে পেয়েছেন? নাকি এর বাস্তবায়ন স্পেসিফিকেশন থেকে ভিন্ন?

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

সমর্থন দেখান

আপনি কি ক্যাপচার হ্যান্ডেল ব্যবহার করার পরিকল্পনা করছেন? আপনার প্রকাশ্য সমর্থন ক্রোম টিমকে ফিচারগুলোকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার নির্মাতাদের দেখায় যে এগুলোর সমর্থন করা কতটা জরুরি।

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

কৃতজ্ঞতা স্বীকার

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