শর্তসাপেক্ষ ফোকাসের সাথে আরও ভালো স্ক্রিন শেয়ারিং

François Beaufort

Elad Alon

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

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

শর্তাধীন ফোকাস Chrome 109 থেকে উপলব্ধ।

পটভূমি

যখন একটি ওয়েব অ্যাপ একটি ট্যাব বা একটি উইন্ডো ক্যাপচার করা শুরু করে, তখন ব্রাউজার একটি সিদ্ধান্তের সম্মুখীন হয়—ক্যাপচার করা সারফেসটি কি সামনে আনা উচিত, নাকি ক্যাপচারিং পৃষ্ঠাটি ফোকাস করা উচিত? উত্তরটি getDisplayMedia() কল করার কারণের উপর নির্ভর করে এবং সারফেসটিতে ব্যবহারকারী নির্বাচন করা শেষ করে।

একটি অনুমানমূলক ভিডিও কনফারেন্সিং ওয়েব অ্যাপ বিবেচনা করুন। track.getSettings().displaySurface পড়ে এবং সম্ভাব্য ক্যাপচার হ্যান্ডেল পরীক্ষা করে, ভিডিও কনফারেন্সিং ওয়েব অ্যাপ বুঝতে পারে ব্যবহারকারী কী শেয়ার করতে বেছে নিয়েছে। তারপর:

• যদি ক্যাপচার করা ট্যাব বা উইন্ডোটি দূরবর্তীভাবে নিয়ন্ত্রণ করা যায়, তাহলে ভিডিও কনফারেন্স ফোকাসে রাখুন।
• অন্যথায়, ক্যাপচার করা ট্যাব বা উইন্ডোতে ফোকাস করুন।

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

শর্তসাপেক্ষ ফোকাস API ব্যবহার করে

একটি CaptureController ইনস্ট্যান্ট করুন এবং এটিকে getDisplayMedia() এ পাস করুন। getDiplayMedia() প্রত্যাবর্তিত প্রতিশ্রুতি সমাধানের পরপরই setFocusBehavior() এ কল করে, আপনি ক্যাপচার করা ট্যাব বা উইন্ডো ফোকাস করা হবে কিনা তা নিয়ন্ত্রণ করতে পারবেন। এটি শুধুমাত্র তখনই করা যেতে পারে যখন ব্যবহারকারী একটি ট্যাব বা একটি উইন্ডো শেয়ার করেন।

const controller = new CaptureController();

// Prompt the user to share a tab, a window or a screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

const [track] = stream.getVideoTracks();
const displaySurface = track.getSettings().displaySurface;
if (displaySurface == "browser") {
  // Focus the captured tab.
  controller.setFocusBehavior("focus-captured-surface");
} else if (displaySurface == "window") {
  // Do not move focus to the captured window.
  // Keep the capturing page focused.
  controller.setFocusBehavior("focus-capturing-application");
}

ফোকাস করার সিদ্ধান্ত নেওয়ার সময়, ক্যাপচার হ্যান্ডেলটি বিবেচনায় নেওয়া সম্ভব।

// Retain focus if capturing a tab dialed to example.com.
// Focus anything else.
const origin = track.getCaptureHandle().origin;
if (displaySurface == "browser" && origin == "https://example.com") {
  controller.setFocusBehavior("focus-capturing-application");
} else if (displaySurface != "monitor") {
  controller.setFocusBehavior("focus-captured-surface");
}

এমনকি getDisplayMedia() কল করার আগে ফোকাস করবেন কিনা তা সিদ্ধান্ত নেওয়াও সম্ভব।

// Focus the captured tab or window when capture starts.
const controller = new CaptureController();
controller.setFocusBehavior("focus-captured-surface");

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

আপনি প্রতিশ্রুতি সমাধানের আগে, অথবা প্রতিশ্রুতি সমাধানের পরপরই একবার নির্বিচারে setFocusBehavior() কল করতে পারেন। শেষ আহ্বানটি পূর্ববর্তী সমস্ত আহ্বানকে ওভাররাইড করে।

আরও স্পষ্টভাবে: - getDisplayMedia() ফেরত দেওয়া প্রতিশ্রুতি একটি মাইক্রোটাস্কে সমাধান করে। মাইক্রোটাস্ক সম্পূর্ণ হওয়ার পরে setFocusBehavior() কল করলে একটি ত্রুটি দেখা দেয়। - ক্যাপচার শুরু হওয়ার পর এক সেকেন্ডের বেশি setFocusBehavior() কল করা নো-অপ।

অর্থাৎ, নিম্নলিখিত দুটি স্নিপেটই ব্যর্থ হবে:

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

// Too late, because it follows the completion of the task
// on which the getDisplayMedia() promise resolved.
// This will throw.
setTimeout(() => {
  controller.setFocusBehavior("focus-captured-surface");
});

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

const start = new Date();
while (new Date() - start <= 1000) {
  // Idle for ≈1s.
}

// Because too much time has elapsed, the browser will have
// already decided whether to focus.
// This fails silently.
controller.setFocusBehavior("focus-captured-surface");

setFocusBehavior() কল করা নিম্নলিখিত ক্ষেত্রেও নিক্ষেপ করে:

• getDisplayMedia() দ্বারা প্রত্যাবর্তিত স্ট্রিমের ভিডিও ট্র্যাক "লাইভ" নয়।
• getDisplayMedia() প্রত্যাবর্তনের প্রতিশ্রুতি সমাধানের পরে, যদি ব্যবহারকারী একটি স্ক্রিন শেয়ার করেন (একটি ট্যাব বা একটি উইন্ডো নয়)।

নমুনা

আপনি গ্লিচে ডেমো চালিয়ে শর্তসাপেক্ষ ফোকাসের সাথে খেলতে পারেন। সোর্স কোড চেক আউট করতে ভুলবেন না.

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

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

if (
  "CaptureController" in window &&
  "setFocusBehavior" in CaptureController.prototype
) {
  // CaptureController.setFocusBehavior() is supported.
}

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

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

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

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

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

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

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

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

সমর্থন দেখান

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

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

সহায়ক লিঙ্ক

• স্পেসিফিকেশন
• ব্যাখ্যাকারী
• TAG পর্যালোচনা

স্বীকৃতি

এলেনা তারানেঙ্কোর নায়কের ছবি।

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