HTML এলিমেন্টের পরিচিতি

Mari Viana

Minh Le

প্রকাশিত: ২৯ জুন, ২০২৬

ক্রোম ১৪৪-এ <geolocation> এলিমেন্ট চালু হওয়ার পর, ক্যাপাবিলিটি এলিমেন্টস স্যুটের পরবর্তী কার্যকরী কন্ট্রোল হলো <usermedia> HTML এলিমেন্ট। ক্রোম ১৫১ থেকে উপলব্ধ এই এলিমেন্টটি, ক্যামেরা এবং মাইক্রোফোন স্ট্রিম অ্যাক্সেস করার জন্য সাধারণ অনুমতির অনুরোধ থেকে নির্দিষ্ট ও কার্যকরী কন্ট্রোলের দিকে রূপান্তরের পরবর্তী পর্যায়কে চিহ্নিত করে। স্ক্রিপ্ট-চালিত প্রম্পট থেকে সরে এসে একটি ডিক্লারেটিভ এবং ব্যবহারকারী-সক্রিয় অভিজ্ঞতার দিকে যাওয়ার মাধ্যমে, <usermedia> বয়লারপ্লেট কোড কমায়, নিরাপত্তা উন্নত করে এবং পূর্বে অ্যাক্সেস অস্বীকার করা ব্যবহারকারীদের জন্য একটি নির্বিঘ্ন পুনরুদ্ধারের পথ প্রদান করে, যা কার্যকরভাবে দীর্ঘদিনের অনুমতির ঘাটতির সমাধান করে।

অনুমতি ব্যবস্থাপনা থেকে সক্ষমতা নিয়ন্ত্রণ পর্যন্ত

<geolocation> -এর সফল প্রবর্তনের পর, Capability Elements স্যুটে চালু হতে চলা পরবর্তী বিশেষায়িত কন্ট্রোল হলো <usermedia> এলিমেন্ট। PEPC উদ্যোগের অংশ হিসেবে মূল এবং জেনেরিক <permission> প্রস্তাবনা থেকে এই পরিবর্তনটি ব্রাউজারকে বিভিন্ন হার্ডওয়্যার সক্ষমতার স্বতন্ত্র জটিলতা ও আচরণ আরও কার্যকরভাবে সামলাতে সাহায্য করে। যেখানে প্রাথমিক প্রস্তাবনাটি মূলত অনুমতি দেওয়া বা না দেওয়ার মতো পারমিশন স্টেটগুলো পরিচালনার উপর মনোযোগ দিয়েছিল, সেখানে Capability Elements ডেটা মিডিয়েটর হিসেবে কাজ করে।

<geolocation> এলিমেন্টটি আপনার সাইটে একটি লোকেশন অবজেক্ট সরবরাহ করে, এবং <usermedia> ক্যামেরা ও মাইক্রোফোন ব্যবহারের সম্পূর্ণ প্রক্রিয়াটি পরিচালনা করে। এটি ব্যবহারকারীর অভিপ্রায় শনাক্ত করে, ব্রাউজার প্রম্পট পরিচালনা করে এবং অ্যাপ্লিকেশনটিতে MediaStream অবজেক্টটি পৌঁছে দেয়। এই পরিবর্তনের ফলে আলাদাভাবে getUserMedia() কল করার প্রয়োজন হয় না, বাস্তবায়ন সহজ হয় এবং ব্রাউজারের কাছে ব্যবহারকারীর অভিপ্রায়ের একটি নির্ভরযোগ্য সংকেত নিশ্চিত হয়।

ধারণাটির বৈধতা

প্রাথমিক অরিজিন ট্রায়াল থেকে প্রাপ্ত বাস্তব তথ্য প্রমাণ করেছে যে, প্রাসঙ্গিক এবং ব্যবহারকারী-প্রবর্তিত অনুমতি নিয়ন্ত্রণ ব্যবস্থা ব্যবহারকারীর সফলতার হার উল্লেখযোগ্যভাবে উন্নত করে।

• সিসকো লক্ষ্য করেছে যে, যেসব ব্যবহারকারী প্রাথমিকভাবে অনুমতি প্রত্যাখ্যান করেছিলেন, তাদের মধ্যে পুরোনো প্রম্পট ব্যবহার করে সফলভাবে অনুমতি দেওয়ার সম্ভাবনা ছিল মাত্র ১০% , কিন্তু নতুন উপাদানটি যুক্ত হওয়ার পর সেই হার বেড়ে ৬৫% -এর বেশি হয়ে গেছে।
• জুম জানিয়েছে যে, ব্যবহারকারীদের পুনরুদ্ধারের জন্য নির্দেশনা দিতে এই উপাদানটি ব্যবহার করার ফলে সিস্টেম-লেভেল ব্লকারের মতো ক্যামেরা বা মাইক্রোফোন ক্যাপচার ত্রুটি ৪৬.৯% কমেছে ।
• গুগল মিটে 'মাইক কাজ করছে না' সংক্রান্ত ফিডব্যাক ১৭% কমেছে এবং যেসব ব্যবহারকারী প্রথমে অ্যাক্সেস দিতে অস্বীকার করেছিলেন, তাদের ক্ষেত্রে সফলভাবে অনুমতি পুনরুদ্ধারের হার ১৩১% বেড়েছে ।

<usermedia> এলিমেন্টটি কেন ব্যবহার করা হয়?

<geolocation> দ্বারা প্রতিষ্ঠিত ধারার উপর ভিত্তি করে, <usermedia> এলিমেন্টটি শক্তিশালী সক্ষমতা অনুরোধ করার মূল প্রতিবন্ধকতাগুলোর সমাধান করে। মিডিয়া অনুরোধগুলো অপরিহার্য জাভাস্ক্রিপ্ট কলের উপর নির্ভর করে, যা প্রায়শই অপ্রাসঙ্গিক প্রম্পট চালু করে। আপনি যদি ভুলবশত আপনার সাইট ব্লক করে ফেলেন, তবে সেই সিদ্ধান্তটি পরিবর্তন করতে ব্রাউজার সেটিংসের গভীরে যেতে হয়, যা একটি "অনুমতির ফাঁক" এবং এর ফলে প্রায়শই কিছু ফিচার পরিত্যক্ত হয়ে যায়।

<usermedia> এলিমেন্টটি নিম্নলিখিত বিষয়গুলো প্রদানের মাধ্যমে এই সমস্যাগুলোর সমাধান করে:

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

বাস্তবায়ন

এই এলিমেন্টটি ইন্টিগ্রেট করতে প্রচলিত জাভাস্ক্রিপ্ট এপিআই-এর তুলনায় অনেক কম বয়লারপ্লেট কোডের প্রয়োজন হয়। <geolocation> এলিমেন্ট দ্বারা প্রতিষ্ঠিত ডিক্লারেটিভ প্যাটার্ন অনুসরণ করে, আপনি আপনার HTML-এ <usermedia> ট্যাগ যোগ করতে পারেন এবং setConstraints() মেথড ব্যবহার করে হার্ডওয়্যারের প্রয়োজনীয়তা কনফিগার করতে পারেন।

<usermedia id="media-ctrl">
  <button>Enable camera and microphone</button>
</usermedia>

const el = document.getElementById('media-ctrl');

// Specify hardware preferences before user interaction:
el.setConstraints({
    video: { width: 1280, height: 720 },
    audio: { echoCancellation: true }
});

// Handle successful stream acquisition:
el.addEventListener('stream', () => {
  videoPreview.srcObject = el.stream;
});

// Handle stream acquisition failure:
el.addEventListener('error', () => {
  console.error(`Access failed: ${el.error?.name}`);
});

// Handle prompt cancellation or dismissal:
el.addEventListener('cancel', () => {
  console.log('Permission prompt was dismissed by the user.');
});

মূল বৈশিষ্ট্য এবং গুণাবলী

• stream : একটি পঠনযোগ্য প্রপার্টি যা ব্যবহারকারী সফলভাবে অ্যাক্সেস প্রদান করার পর MediaStream অবজেক্টটি সরবরাহ করে।
• setConstraints() : একটি মেথড যা ডেভেলপারদেরকে ব্যবহারকারীর হস্তক্ষেপের পূর্বে হার্ডওয়্যার প্রেফারেন্স, যেমন deviceId বা resolution, আপডেট করার সুযোগ দেয়।
• error : একটি পঠন-যোগ্য প্রপার্টি যা অনুরোধ ব্যর্থ হলে বা খারিজ করা হলে একটি DOMException (উদাহরণস্বরূপ, একটি NotAllowedError ) রিটার্ন করে।
• onstream : একটি ইভেন্ট হ্যান্ডলার যা মিডিয়া ট্র্যাকগুলি অধিগ্রহণ করার সাথে সাথেই সক্রিয় হয়।
• onerror : একটি ইভেন্ট হ্যান্ডলার যা স্ট্রিম অধিগ্রহণের প্রচেষ্টা ব্যর্থ হলে সক্রিয় হয়।
• oncancel : একটি ইভেন্ট হ্যান্ডলার যা অনুমতি গ্রহণের সময় ব্যবহারকারী অনুমতির অনুরোধটি বাতিল বা খারিজ করলে সক্রিয় হয়।

স্টাইলিং সীমাবদ্ধতা

ব্যবহারকারীর আস্থা নিশ্চিত করতে এবং প্রতারণামূলক ডিজাইন প্যাটার্ন প্রতিরোধ করতে, <usermedia> এলিমেন্টটি অন্যান্য Capability Element-এর মতোই কঠোর স্টাইলিং সীমাবদ্ধতা প্রয়োগ করে:

• পাঠযোগ্যতা: অনুরোধটি যাতে সর্বদা পাঠযোগ্য থাকে, তা নিশ্চিত করার জন্য ব্রাউজার টেক্সট এবং ব্যাকগ্রাউন্ডের রঙে পর্যাপ্ত কনট্রাস্ট (কমপক্ষে ৩:১) পরীক্ষা করে। এলিমেন্টটিকে বিভ্রান্তিকরভাবে স্বচ্ছ হওয়া থেকে বিরত রাখতে আপনাকে অবশ্যই আলফা চ্যানেল ( opacity ) 1 এ সেট করতে হবে।
• আকার ও ব্যবধান: ব্রাউজার width , height এবং font-size এর জন্য সর্বনিম্ন ও সর্বোচ্চ সীমা নির্ধারণ করে। এলিমেন্টটি যাতে দৃষ্টিকটু না হয়, সেজন্য এটি নেগেটিভ মার্জিন বা আউটলাইন অফসেট নিষ্ক্রিয় করে রাখে।
• দৃশ্যগত অখণ্ডতা: ব্রাউজার বিকৃতকারী প্রভাব সীমিত করে। উদাহরণস্বরূপ, transform শুধুমাত্র ২ডি ট্রান্সলেশন এবং আনুপাতিক স্কেলিং সমর্থন করে।
• CSS সিউডো-ক্লাস: এলিমেন্টটি স্টেট-ভিত্তিক স্টাইলিং সমর্থন করে, যেমন :granted (যা পারমিশন সক্রিয় হলে এবং স্ট্রিমটি অ্যাকোয়ার করা হলে সক্রিয় হয়), সেইসাথে :hover এবং :active-এর মতো স্ট্যান্ডার্ড ইন্টার‍্যাকশন স্টেটগুলোও সমর্থন করে।

প্রগতিশীল উন্নয়ন এবং স্থানান্তর কৌশল

<geolocation> দ্বারা প্রতিষ্ঠিত ডিজাইন প্যাটার্ন অনুসরণ করে, <usermedia> এলিমেন্টটি এমনভাবে তৈরি করা হয়েছে যাতে এটি স্বাভাবিকভাবে কাজ করতে পারে। যে ব্রাউজারগুলো এই এলিমেন্টটি সমর্থন করে না, তারা এটিকে একটি HTMLUnknownElement হিসেবে গণ্য করবে এবং এর চাইল্ড এলিমেন্টগুলোকে রেন্ডার করবে। এর ফলে আপনি সকল ব্যবহারকারীর জন্য একটি ফলব্যাক অভিজ্ঞতা প্রদান করতে পারেন।

কাস্টম ফলব্যাক প্যাটার্ন

জাভাস্ক্রিপ্টে <usermedia> এলিমেন্টের সমর্থন প্রোগ্রাম্যাটিকভাবে শনাক্ত করুন:

if ('HTMLUserMediaElement' in window) {
  // Use modern <usermedia> element logic
} else {
  // Fallback to legacy getUserMedia() API
}

লিগ্যাসি getUserMedia() API ট্রিগার করতে <usermedia> এলিমেন্টের ভিতরে একটি স্ট্যান্ডার্ড বাটন যোগ করার জন্য এই ডিটেকশন লজিকটি ব্যবহার করুন:

<usermedia id="stream-handler">
    <button id="fallback-stream-handler">
        Enable Camera and Mic
    </button>
</usermedia>

// Function for handling video/audio streams:
function handleStream (event) {
  /* ... */
}

if ('HTMLUserMediaElement' in window) {
  // In this case, we have <usermedia> element support:
  const streamHandler = document.getElementById('stream-handler');

  streamHandler.addEventListener('stream', event => {
    handleStream(event);
  });
} else {
  // <usermedia> element support is missing, so fall back instead:
  const fallbackStreamHandler = document.getElementById('fallback-stream-handler');

  fallbackStreamHandler.addEventListener('click', event => {
    navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(handleStream);
  });
}

উৎস পরীক্ষার অংশগ্রহণকারীদের জন্য অভিবাসন

যেসব ডেভেলপার অরিজিন ট্রায়াল চলাকালীন পরীক্ষামূলক এবং জেনেরিক <permission> এলিমেন্টটি ইন্টিগ্রেট করেছিলেন, তাদের জন্য <usermedia> তে রূপান্তর প্রক্রিয়াটি ন্যূনতম রাখার জন্য ডিজাইন করা হয়েছে।

1. ট্যাগ আপডেট: <permission type="camera microphone"> এর পরিবর্তে <usermedia> ব্যবহার করুন, যাতে পূর্ববর্তী <permission> এলিমেন্টকে টার্গেট করা সমস্ত সিলেক্টর <usermedia> এলিমেন্ট ব্যবহার করার জন্য আপডেট হয়।
2. বৈশিষ্ট্য সনাক্তকরণ: HTMLPermissionElement থেকে HTMLUserMediaElement এ যাচাইকরণ আপডেট করুন

সামনের রোডম্যাপ

যদিও <usermedia> এলিমেন্টটি সম্মিলিত অডিও এবং ভিডিও অনুরোধগুলি পরিচালনা করে, ভবিষ্যতের ক্যাপাবিলিটি এলিমেন্টগুলির রোডম্যাপে অন্তর্ভুক্ত রয়েছে:

• <camera> : বিশেষভাবে শুধুমাত্র ভিডিও ধারণের ক্ষেত্রে ব্যবহৃত হয়।
• <microphone> : বিশেষভাবে শুধুমাত্র অডিও-সংক্রান্ত পরিস্থিতির উপর আলোকপাত করে।

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

সম্পর্কিত লিঙ্ক

• সক্ষমতা উপাদানসমূহ: <usermedia> এলিমেন্ট এক্সপ্লেনার
• স্পেসিফিকেশন
• <geolocation> HTML এলিমেন্টের পরিচিতি