এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

অস্বাভাবিক HID ডিভাইসের সাথে সংযোগ করা হচ্ছে

WebHID API ওয়েবসাইটগুলিকে বিকল্প অক্জিলিয়ারী কীবোর্ড এবং বহিরাগত গেমপ্যাডগুলি অ্যাক্সেস করার অনুমতি দেয়৷

François Beaufort

হিউম্যান ইন্টারফেস ডিভাইসের (এইচআইডি) একটি দীর্ঘ লেজ রয়েছে, যেমন বিকল্প কীবোর্ড বা বহিরাগত গেমপ্যাড, যেগুলি খুব নতুন, খুব পুরানো, বা সিস্টেমের ডিভাইস ড্রাইভারদের দ্বারা অ্যাক্সেসযোগ্য নয়। WebHID API জাভাস্ক্রিপ্টে ডিভাইস-নির্দিষ্ট যুক্তি প্রয়োগ করার একটি উপায় প্রদান করে এটি সমাধান করে।

প্রস্তাবিত ব্যবহারের ক্ষেত্রে

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

অস্বাভাবিক HID ডিভাইসগুলি অ্যাক্সেস করার অক্ষমতা বিশেষভাবে বেদনাদায়ক যখন এটি বিকল্প সহায়ক কীবোর্ডের ক্ষেত্রে আসে (যেমন এলগাটো স্ট্রিম ডেক , জাবরা হেডসেট , এক্স-কি ) এবং বহিরাগত গেমপ্যাড সমর্থন। ডেস্কটপের জন্য ডিজাইন করা গেমপ্যাড প্রায়শই গেমপ্যাড ইনপুট (বোতাম, জয়স্টিক, ট্রিগার) এবং আউটপুট (এলইডি, রাম্বল) এর জন্য HID ব্যবহার করে। দুর্ভাগ্যবশত, গেমপ্যাড ইনপুট এবং আউটপুটগুলি ভালভাবে প্রমিত নয় এবং ওয়েব ব্রাউজারগুলির প্রায়শই নির্দিষ্ট ডিভাইসের জন্য কাস্টম লজিকের প্রয়োজন হয়। এটি টেকসই নয় এবং পুরানো এবং অস্বাভাবিক ডিভাইসগুলির দীর্ঘ লেজের জন্য দুর্বল সমর্থনের ফলে। এটি ব্রাউজারকে নির্দিষ্ট ডিভাইসের আচরণে quirks উপর নির্ভর করে।

পরিভাষা

HID দুটি মৌলিক ধারণা নিয়ে গঠিত: রিপোর্ট এবং রিপোর্ট বর্ণনাকারী। রিপোর্ট হল ডেটা যা একটি ডিভাইস এবং একটি সফ্টওয়্যার ক্লায়েন্টের মধ্যে বিনিময় করা হয়। রিপোর্ট বর্ণনাকারী তথ্যের বিন্যাস এবং অর্থ বর্ণনা করে যা ডিভাইসটি সমর্থন করে।

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

অ্যাপ্লিকেশান এবং HID ডিভাইসগুলি তিনটি রিপোর্ট প্রকারের মাধ্যমে বাইনারি ডেটা বিনিময় করে:

রিপোর্টের ধরন	বর্ণনা
ইনপুট রিপোর্ট	ডিভাইস থেকে অ্যাপ্লিকেশনে পাঠানো ডেটা (যেমন একটি বোতাম টিপানো হয়।)
আউটপুট রিপোর্ট	অ্যাপ্লিকেশন থেকে ডিভাইসে পাঠানো ডেটা (যেমন কীবোর্ড ব্যাকলাইট চালু করার অনুরোধ।)
ফিচার রিপোর্ট	ডেটা যা উভয় দিকে পাঠানো যেতে পারে। বিন্যাসটি ডিভাইস-নির্দিষ্ট।

একটি রিপোর্ট বর্ণনাকারী ডিভাইস দ্বারা সমর্থিত রিপোর্টের বাইনারি বিন্যাস বর্ণনা করে। এর গঠনটি অনুক্রমিক এবং শীর্ষ-স্তরের সংগ্রহের মধ্যে স্বতন্ত্র সংগ্রহ হিসাবে একসাথে প্রতিবেদনগুলিকে গোষ্ঠীভুক্ত করতে পারে। বর্ণনাকারীর বিন্যাস HID স্পেসিফিকেশন দ্বারা সংজ্ঞায়িত করা হয়।

একটি HID ব্যবহার একটি সাংখ্যিক মান যা একটি প্রমিত ইনপুট বা আউটপুট উল্লেখ করে। ব্যবহারের মানগুলি একটি ডিভাইসের উদ্দেশ্যযুক্ত ব্যবহার এবং প্রতিটি ক্ষেত্রের উদ্দেশ্য তার প্রতিবেদনে বর্ণনা করার অনুমতি দেয়। উদাহরণস্বরূপ, একটি মাউসের বাম বোতামের জন্য সংজ্ঞায়িত করা হয়েছে। ব্যবহারগুলিকে ব্যবহারের পৃষ্ঠাগুলিতেও সংগঠিত করা হয়, যা ডিভাইসের উচ্চ-স্তরের বিভাগ বা প্রতিবেদনের একটি ইঙ্গিত প্রদান করে।

WebHID API ব্যবহার করে

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

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

if ("hid" in navigator) {
  // The WebHID API is supported.
}

একটি HID সংযোগ খুলুন

ওয়েবএইচআইডি এপিআই ডিজাইন অনুসারে অ্যাসিঙ্ক্রোনাস যাতে ইনপুটের জন্য অপেক্ষা করার সময় ওয়েবসাইট UI ব্লক করা থেকে বিরত থাকে। এটি গুরুত্বপূর্ণ কারণ HID ডেটা যে কোনো সময় প্রাপ্ত হতে পারে, এটি শোনার জন্য একটি উপায় প্রয়োজন৷

একটি HID সংযোগ খুলতে, প্রথমে একটি HIDDevice অবজেক্ট অ্যাক্সেস করুন৷ এর জন্য, আপনি হয় ব্যবহারকারীকে navigator.hid.requestDevice() কল করে একটি ডিভাইস নির্বাচন করার জন্য অনুরোধ করতে পারেন, অথবা navigator.hid.getDevices() থেকে একটি চয়ন করতে পারেন যা ওয়েবসাইটটিকে আগে অ্যাক্সেস দেওয়া হয়েছে এমন ডিভাইসগুলির একটি তালিকা প্রদান করে৷

navigator.hid.requestDevice() ফাংশন একটি বাধ্যতামূলক অবজেক্ট নেয় যা ফিল্টার সংজ্ঞায়িত করে। এগুলি একটি USB ভেন্ডর আইডেন্টিফায়ার ( vendorId ), একটি USB পণ্য শনাক্তকারী ( productId ), একটি ব্যবহার পৃষ্ঠার মান ( usagePage ), এবং একটি ব্যবহার মান ( usage ) এর সাথে সংযুক্ত যেকোন ডিভাইসের সাথে মেলাতে ব্যবহৃত হয়৷ আপনি সেগুলি ইউএসবি আইডি রিপোজিটরি এবং এইচআইডি ব্যবহারের টেবিল ডকুমেন্ট থেকে পেতে পারেন।

এই ফাংশন দ্বারা প্রত্যাবর্তিত একাধিক HIDDevice অবজেক্ট একই শারীরিক ডিভাইসে একাধিক HID ইন্টারফেস উপস্থাপন করে।

// Filter on devices with the Nintendo Switch Joy-Con USB Vendor/Product IDs.
const filters = [
  {
    vendorId: 0x057e, // Nintendo Co., Ltd
    productId: 0x2006 // Joy-Con Left
  },
  {
    vendorId: 0x057e, // Nintendo Co., Ltd
    productId: 0x2007 // Joy-Con Right
  }
];

// Prompt user to select a Joy-Con device.
const [device] = await navigator.hid.requestDevice({ filters });

// Get all devices the user has previously granted the website access to.
const devices = await navigator.hid.getDevices();

একটি ওয়েবসাইটে একটি HID ডিভাইস প্রম্পটের স্ক্রিনশট৷ — একটি নিন্টেন্ডো সুইচ জয়-কন নির্বাচন করার জন্য ব্যবহারকারীর প্রম্পট।

আপনি navigator.hid.requestDevice() এ ঐচ্ছিক exclusionFilters কী ব্যবহার করতে পারেন ব্রাউজার পিকার থেকে কিছু ডিভাইস বাদ দিতে যা উদাহরণের জন্য ত্রুটিপূর্ণ বলে পরিচিত।

// Request access to a device with vendor ID 0xABCD. The device must also have
// a collection with usage page Consumer (0x000C) and usage ID Consumer
// Control (0x0001). The device with product ID 0x1234 is malfunctioning.
const [device] = await navigator.hid.requestDevice({
  filters: [{ vendorId: 0xabcd, usagePage: 0x000c, usage: 0x0001 }],
  exclusionFilters: [{ vendorId: 0xabcd, productId: 0x1234 }],
});

একটি HIDDevice অবজেক্টে ডিভাইস সনাক্তকরণের জন্য USB বিক্রেতা এবং পণ্য শনাক্তকারী থাকে। ডিভাইসের রিপোর্ট ফরম্যাটগুলির একটি শ্রেণীবিন্যাস বর্ণনা দিয়ে এর collections বৈশিষ্ট্যটি শুরু করা হয়েছে।

for (let collection of device.collections) {
  // An HID collection includes usage, usage page, reports, and subcollections.
  console.log(`Usage: ${collection.usage}`);
  console.log(`Usage page: ${collection.usagePage}`);

  for (let inputReport of collection.inputReports) {
    console.log(`Input report: ${inputReport.reportId}`);
    // Loop through inputReport.items
  }

  for (let outputReport of collection.outputReports) {
    console.log(`Output report: ${outputReport.reportId}`);
    // Loop through outputReport.items
  }

  for (let featureReport of collection.featureReports) {
    console.log(`Feature report: ${featureReport.reportId}`);
    // Loop through featureReport.items
  }

  // Loop through subcollections with collection.children
}

HIDDevice ডিভাইসগুলি ডিফল্টরূপে একটি "বন্ধ" অবস্থায় ফেরত দেওয়া হয় এবং ডেটা পাঠানো বা গ্রহণ করার আগে open() কল করে খুলতে হবে।

// Wait for the HID connection to open before sending/receiving data.
await device.open();

ইনপুট রিপোর্ট গ্রহণ

একবার HID সংযোগ স্থাপন হয়ে গেলে, আপনি ডিভাইস থেকে "inputreport" ইভেন্টগুলি শুনে ইনকামিং ইনপুট রিপোর্টগুলি পরিচালনা করতে পারেন৷ এই ইভেন্টগুলিতে HID ডেটা DataView অবজেক্ট ( data ), যে HID ডিভাইসটি এটির ( device ) এবং 8-বিট রিপোর্ট আইডি ইনপুট রিপোর্ট ( reportId ) এর সাথে যুক্ত।

লাল এবং নীল নিন্টেন্ডো সুইচ ফটো। — নিন্টেন্ডো সুইচ জয়-কন ডিভাইস।

পূর্ববর্তী উদাহরণের সাথে অবিরত, নীচের কোডটি আপনাকে দেখায় কিভাবে ব্যবহারকারী একটি জয়-কন রাইট ডিভাইসে কোন বোতাম টিপেছে তা সনাক্ত করতে হয় যাতে আপনি আশা করি বাড়িতে এটি চেষ্টা করতে পারেন।

device.addEventListener("inputreport", event => {
  const { data, device, reportId } = event;

  // Handle only the Joy-Con Right device and a specific report ID.
  if (device.productId !== 0x2007 && reportId !== 0x3f) return;

  const value = data.getUint8(0);
  if (value === 0) return;

  const someButtons = { 1: "A", 2: "X", 4: "B", 8: "Y" };
  console.log(`User pressed button ${someButtons[value]}.`);
});

আউটপুট রিপোর্ট পাঠান

একটি HID ডিভাইসে একটি আউটপুট রিপোর্ট পাঠাতে, আউটপুট রিপোর্টের সাথে যুক্ত 8-বিট রিপোর্ট আইডি ( reportId ) এবং BufferSource ( data ) হিসাবে device.sendReport() এ পাস করুন। রিপোর্ট পাঠানো হলে ফেরত দেওয়া প্রতিশ্রুতি সমাধান হয়ে যায়। যদি HID ডিভাইস রিপোর্ট আইডি ব্যবহার না করে, reportId 0 এ সেট করুন।

নীচের উদাহরণটি একটি জয়-কন ডিভাইসের ক্ষেত্রে প্রযোজ্য এবং আউটপুট রিপোর্টের সাথে এটিকে কীভাবে গর্জন করা যায় তা দেখায়।

// First, send a command to enable vibration.
// Magical bytes come from https://github.com/mzyy94/joycon-toolweb
const enableVibrationData = [1, 0, 1, 64, 64, 0, 1, 64, 64, 0x48, 0x01];
await device.sendReport(0x01, new Uint8Array(enableVibrationData));

// Then, send a command to make the Joy-Con device rumble.
// Actual bytes are available in the sample below.
const rumbleData = [ /* ... */ ];
await device.sendReport(0x10, new Uint8Array(rumbleData));

ফিচার রিপোর্ট পাঠান এবং গ্রহণ করুন

বৈশিষ্ট্য প্রতিবেদনগুলি হল একমাত্র প্রকারের HID ডেটা রিপোর্ট যা উভয় দিকে ভ্রমণ করতে পারে। তারা HID ডিভাইস এবং অ্যাপ্লিকেশনগুলিকে অ-প্রমিত HID ডেটা বিনিময় করার অনুমতি দেয়। ইনপুট এবং আউটপুট রিপোর্টের বিপরীতে, ফিচার রিপোর্ট নিয়মিতভাবে অ্যাপ্লিকেশন দ্বারা প্রাপ্ত বা পাঠানো হয় না।

কালো এবং রূপালী ল্যাপটপ কম্পিউটার ফটো. — ল্যাপটপ কীবোর্ড

একটি HID ডিভাইসে একটি বৈশিষ্ট্য প্রতিবেদন পাঠাতে, বৈশিষ্ট্য প্রতিবেদনের সাথে যুক্ত 8-বিট রিপোর্ট আইডি পাস করুন ( reportId ) এবং BufferSource ( data ) হিসাবে device.sendFeatureReport() এ। রিপোর্ট পাঠানো হলে ফেরত দেওয়া প্রতিশ্রুতি সমাধান হয়ে যায়। যদি HID ডিভাইস রিপোর্ট আইডি ব্যবহার না করে, reportId 0 এ সেট করুন।

নীচের উদাহরণটি আপনাকে দেখিয়েছে যে কীভাবে একটি Apple কীবোর্ড ব্যাকলাইট ডিভাইসের অনুরোধ করতে হয়, এটি খুলতে হয় এবং এটিকে ব্লিঙ্ক করতে হয় তা দেখিয়ে বৈশিষ্ট্য প্রতিবেদনের ব্যবহারকে ব্যাখ্যা করে৷

const waitFor = duration => new Promise(r => setTimeout(r, duration));

// Prompt user to select an Apple Keyboard Backlight device.
const [device] = await navigator.hid.requestDevice({
  filters: [{ vendorId: 0x05ac, usage: 0x0f, usagePage: 0xff00 }]
});

// Wait for the HID connection to open.
await device.open();

// Blink!
const reportId = 1;
for (let i = 0; i < 10; i++) {
  // Turn off
  await device.sendFeatureReport(reportId, Uint32Array.from([0, 0]));
  await waitFor(100);
  // Turn on
  await device.sendFeatureReport(reportId, Uint32Array.from([512, 0]));
  await waitFor(100);
}

একটি HID ডিভাইস থেকে একটি বৈশিষ্ট্য প্রতিবেদন পেতে, বৈশিষ্ট্য রিপোর্টের সাথে যুক্ত 8-বিট রিপোর্ট আইডি ( reportId ) device.receiveFeatureReport() এ পাস করুন। প্রত্যাবর্তিত প্রতিশ্রুতি একটি DataView অবজেক্টের সাথে সমাধান করে যা বৈশিষ্ট্য প্রতিবেদনের বিষয়বস্তু ধারণ করে। যদি HID ডিভাইস রিপোর্ট আইডি ব্যবহার না করে, reportId 0 এ সেট করুন।

// Request feature report.
const dataView = await device.receiveFeatureReport(/* reportId= */ 1);

// Read feature report contents with dataView.getInt8(), getUint8(), etc...

সংযোগ এবং সংযোগ বিচ্ছিন্ন শুনুন

ওয়েবসাইটটিকে একটি HID ডিভাইস অ্যাক্সেস করার অনুমতি দেওয়া হলে, এটি "connect" এবং "disconnect" ইভেন্টগুলি শুনে সক্রিয়ভাবে সংযোগ এবং সংযোগ বিচ্ছিন্ন ঘটনাগুলি গ্রহণ করতে পারে।

navigator.hid.addEventListener("connect", event => {
  // Automatically open event.device or warn user a device is available.
});

navigator.hid.addEventListener("disconnect", event => {
  // Remove |event.device| from the UI.
});

একটি HID ডিভাইসে অ্যাক্সেস প্রত্যাহার করুন

ওয়েবসাইটটি একটি HID ডিভাইস অ্যাক্সেস করার অনুমতিগুলি পরিষ্কার করতে পারে এটি HIDDevice ইন্সট্যান্সে forget() কল করে আর ধরে রাখতে আগ্রহী নয়৷ উদাহরণস্বরূপ, অনেক ডিভাইসের সাথে একটি শেয়ার্ড কম্পিউটারে ব্যবহৃত একটি শিক্ষামূলক ওয়েব অ্যাপ্লিকেশনের জন্য, প্রচুর পরিমাণে জমা হওয়া ব্যবহারকারী-উত্পাদিত অনুমতিগুলি একটি দুর্বল ব্যবহারকারীর অভিজ্ঞতা তৈরি করে।

একটি একক HIDDevice ইনস্ট্যান্সে forget() কল করা একই শারীরিক ডিভাইসে সমস্ত HID ইন্টারফেসে অ্যাক্সেস প্রত্যাহার করবে।

// Voluntarily revoke access to this HID device.
await device.forget();

forget() Chrome 100 বা তার পরে উপলব্ধ রয়েছে, এই বৈশিষ্ট্যটি নিম্নলিখিতগুলির সাথে সমর্থিত কিনা তা পরীক্ষা করুন:

if ("hid" in navigator && "forget" in HIDDevice.prototype) {
  // forget() is supported.
}

দেব টিপস

Chrome-এ HID ডিবাগ করা অভ্যন্তরীণ পৃষ্ঠার সাথে সহজ, about://device-log যেখানে আপনি সমস্ত HID এবং USB ডিভাইস সম্পর্কিত ইভেন্টগুলি এক জায়গায় দেখতে পাবেন৷

HID ডিবাগ করতে অভ্যন্তরীণ পৃষ্ঠার স্ক্রিনশট। — HID ডিবাগ করতে Chrome-এ অভ্যন্তরীণ পৃষ্ঠা।

HID ডিভাইসের তথ্য মানব-পাঠযোগ্য বিন্যাসে ডাম্প করার জন্য HID এক্সপ্লোরারটি দেখুন। এটি প্রতিটি HID ব্যবহারের জন্য ব্যবহারের মান থেকে নাম পর্যন্ত ম্যাপ করে।

বেশিরভাগ লিনাক্স সিস্টেমে, HID ডিভাইসগুলিকে ডিফল্টরূপে শুধুমাত্র-পঠন অনুমতি দিয়ে ম্যাপ করা হয়। ক্রোমকে একটি HID ডিভাইস খোলার অনুমতি দিতে, আপনাকে একটি নতুন udev নিয়ম যোগ করতে হবে। নিম্নলিখিত বিষয়বস্তু সহ /etc/udev/rules.d/50-yourdevicename.rules এ একটি ফাইল তৈরি করুন:

KERNEL=="hidraw*", ATTRS{idVendor}=="[yourdevicevendor]", MODE="0664", GROUP="plugdev"

উপরের লাইনে, [yourdevicevendor] হল 057e যদি আপনার ডিভাইসটি একটি Nintendo Switch Joy-Con হয়। আরও নির্দিষ্ট নিয়মের জন্য ATTRS{idProduct} যোগ করা যেতে পারে। নিশ্চিত করুন যে আপনার user plugdev গ্রুপের সদস্য । তারপর, শুধু আপনার ডিভাইস পুনরায় সংযোগ করুন.

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

WebHID API Chrome 89-এ সমস্ত ডেস্কটপ প্ল্যাটফর্মে (ChromeOS, Linux, macOS এবং Windows) উপলব্ধ।

ডেমো

কিছু WebHID ডেমো web.dev/hid-examples- এ তালিকাভুক্ত করা হয়েছে। যাও দেখে নিন!

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

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

নিরাপত্তা ট্রেডঅফ বোঝার জন্য, WebHID স্পেকের নিরাপত্তা এবং গোপনীয়তা বিবেচনা বিভাগটি দেখুন।

এর উপরে, ক্রোম প্রতিটি শীর্ষ-স্তরের সংগ্রহের ব্যবহার পরিদর্শন করে এবং যদি একটি শীর্ষ-স্তরের সংগ্রহে একটি সুরক্ষিত ব্যবহার থাকে (যেমন জেনেরিক কীবোর্ড, মাউস), তাহলে একটি ওয়েবসাইট এতে সংজ্ঞায়িত কোনো প্রতিবেদন পাঠাতে বা গ্রহণ করতে সক্ষম হবে না যে সংগ্রহ। সুরক্ষিত ব্যবহারের সম্পূর্ণ তালিকা সর্বজনীনভাবে উপলব্ধ ।

মনে রাখবেন যে নিরাপত্তা-সংবেদনশীল HID ডিভাইসগুলি (যেমন শক্তিশালী প্রমাণীকরণের জন্য ব্যবহৃত FIDO HID ডিভাইসগুলি) Chrome-এ ব্লক করা আছে। ইউএসবি ব্লকলিস্ট এবং এইচআইডি ব্লকলিস্ট ফাইলগুলি দেখুন।

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

ক্রোম টিম WebHID API-এর সাথে আপনার চিন্তাভাবনা এবং অভিজ্ঞতা সম্পর্কে শুনতে পছন্দ করবে৷

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

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

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

বাস্তবায়নের সাথে একটি সমস্যা রিপোর্ট করুন

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

কিভাবে WebHID বাগ ফাইল করবেন তা দেখুন। আপনি যতটা পারেন বিশদ অন্তর্ভুক্ত করতে ভুলবেন না, বাগ পুনরুত্পাদনের জন্য সহজ নির্দেশাবলী প্রদান করুন এবং উপাদানগুলি Blink>HID এ সেট করুন। দ্রুত এবং সহজ রিপ্রো শেয়ার করার জন্য গ্লিচ দুর্দান্ত কাজ করে।

সমর্থন দেখান

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

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

সহায়ক লিঙ্ক

স্বীকৃতি

এই নিবন্ধটির পর্যালোচনার জন্য ম্যাট রেনল্ডস এবং জো মেডলিকে ধন্যবাদ। লাল এবং নীল নিন্টেন্ডো সুইচ ফটো সারা কুরফেসের , এবং কালো এবং রূপালী ল্যাপটপ কম্পিউটারের ছবি অথুল সাইরিয়াক অজয়ের আনস্প্ল্যাশে।

François Beaufort

প্রস্তাবিত ব্যবহারের ক্ষেত্রে

পরিভাষা

রিপোর্টের ধরন	বর্ণনা
ইনপুট রিপোর্ট	ডিভাইস থেকে অ্যাপ্লিকেশনে পাঠানো ডেটা (যেমন একটি বোতাম টিপানো হয়।)
আউটপুট রিপোর্ট	অ্যাপ্লিকেশন থেকে ডিভাইসে পাঠানো ডেটা (যেমন কীবোর্ড ব্যাকলাইট চালু করার অনুরোধ।)
ফিচার রিপোর্ট	ডেটা যা উভয় দিকে পাঠানো যেতে পারে। বিন্যাসটি ডিভাইস-নির্দিষ্ট।

WebHID API ব্যবহার করে

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

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

if ("hid" in navigator) {
  // The WebHID API is supported.
}

একটি HID সংযোগ খুলুন

// Filter on devices with the Nintendo Switch Joy-Con USB Vendor/Product IDs.
const filters = [
  {
    vendorId: 0x057e, // Nintendo Co., Ltd
    productId: 0x2006 // Joy-Con Left
  },
  {
    vendorId: 0x057e, // Nintendo Co., Ltd
    productId: 0x2007 // Joy-Con Right
  }
];

// Prompt user to select a Joy-Con device.
const [device] = await navigator.hid.requestDevice({ filters });

// Get all devices the user has previously granted the website access to.
const devices = await navigator.hid.getDevices();

// Request access to a device with vendor ID 0xABCD. The device must also have
// a collection with usage page Consumer (0x000C) and usage ID Consumer
// Control (0x0001). The device with product ID 0x1234 is malfunctioning.
const [device] = await navigator.hid.requestDevice({
  filters: [{ vendorId: 0xabcd, usagePage: 0x000c, usage: 0x0001 }],
  exclusionFilters: [{ vendorId: 0xabcd, productId: 0x1234 }],
});

for (let collection of device.collections) {
  // An HID collection includes usage, usage page, reports, and subcollections.
  console.log(`Usage: ${collection.usage}`);
  console.log(`Usage page: ${collection.usagePage}`);

  for (let inputReport of collection.inputReports) {
    console.log(`Input report: ${inputReport.reportId}`);
    // Loop through inputReport.items
  }

  for (let outputReport of collection.outputReports) {
    console.log(`Output report: ${outputReport.reportId}`);
    // Loop through outputReport.items
  }

  for (let featureReport of collection.featureReports) {
    console.log(`Feature report: ${featureReport.reportId}`);
    // Loop through featureReport.items
  }

  // Loop through subcollections with collection.children
}

// Wait for the HID connection to open before sending/receiving data.
await device.open();

ইনপুট রিপোর্ট গ্রহণ

device.addEventListener("inputreport", event => {
  const { data, device, reportId } = event;

  // Handle only the Joy-Con Right device and a specific report ID.
  if (device.productId !== 0x2007 && reportId !== 0x3f) return;

  const value = data.getUint8(0);
  if (value === 0) return;

  const someButtons = { 1: "A", 2: "X", 4: "B", 8: "Y" };
  console.log(`User pressed button ${someButtons[value]}.`);
});

আউটপুট রিপোর্ট পাঠান

// First, send a command to enable vibration.
// Magical bytes come from https://github.com/mzyy94/joycon-toolweb
const enableVibrationData = [1, 0, 1, 64, 64, 0, 1, 64, 64, 0x48, 0x01];
await device.sendReport(0x01, new Uint8Array(enableVibrationData));

// Then, send a command to make the Joy-Con device rumble.
// Actual bytes are available in the sample below.
const rumbleData = [ /* ... */ ];
await device.sendReport(0x10, new Uint8Array(rumbleData));

ফিচার রিপোর্ট পাঠান এবং গ্রহণ করুন

const waitFor = duration => new Promise(r => setTimeout(r, duration));

// Prompt user to select an Apple Keyboard Backlight device.
const [device] = await navigator.hid.requestDevice({
  filters: [{ vendorId: 0x05ac, usage: 0x0f, usagePage: 0xff00 }]
});

// Wait for the HID connection to open.
await device.open();

// Blink!
const reportId = 1;
for (let i = 0; i < 10; i++) {
  // Turn off
  await device.sendFeatureReport(reportId, Uint32Array.from([0, 0]));
  await waitFor(100);
  // Turn on
  await device.sendFeatureReport(reportId, Uint32Array.from([512, 0]));
  await waitFor(100);
}

// Request feature report.
const dataView = await device.receiveFeatureReport(/* reportId= */ 1);

// Read feature report contents with dataView.getInt8(), getUint8(), etc...

সংযোগ এবং সংযোগ বিচ্ছিন্ন শুনুন

navigator.hid.addEventListener("connect", event => {
  // Automatically open event.device or warn user a device is available.
});

navigator.hid.addEventListener("disconnect", event => {
  // Remove |event.device| from the UI.
});

একটি HID ডিভাইসে অ্যাক্সেস প্রত্যাহার করুন

// Voluntarily revoke access to this HID device.
await device.forget();

if ("hid" in navigator && "forget" in HIDDevice.prototype) {
  // forget() is supported.
}

দেব টিপস

KERNEL=="hidraw*", ATTRS{idVendor}=="[yourdevicevendor]", MODE="0664", GROUP="plugdev"

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

WebHID API Chrome 89-এ সমস্ত ডেস্কটপ প্ল্যাটফর্মে (ChromeOS, Linux, macOS এবং Windows) উপলব্ধ।

ডেমো

কিছু WebHID ডেমো web.dev/hid-examples- এ তালিকাভুক্ত করা হয়েছে। যাও দেখে নিন!

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

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

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

বাস্তবায়নের সাথে একটি সমস্যা রিপোর্ট করুন

সমর্থন দেখান

সহায়ক লিঙ্ক

স্বীকৃতি

François Beaufort

প্রস্তাবিত ব্যবহারের ক্ষেত্রে

পরিভাষা

রিপোর্টের ধরন	বর্ণনা
ইনপুট রিপোর্ট	ডিভাইস থেকে অ্যাপ্লিকেশনে পাঠানো ডেটা (যেমন একটি বোতাম টিপানো হয়।)
আউটপুট রিপোর্ট	অ্যাপ্লিকেশন থেকে ডিভাইসে পাঠানো ডেটা (যেমন কীবোর্ড ব্যাকলাইট চালু করার অনুরোধ।)
ফিচার রিপোর্ট	ডেটা যা উভয় দিকে পাঠানো যেতে পারে। বিন্যাসটি ডিভাইস-নির্দিষ্ট।

WebHID API ব্যবহার করে

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

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

if ("hid" in navigator) {
  // The WebHID API is supported.
}

একটি HID সংযোগ খুলুন

// Filter on devices with the Nintendo Switch Joy-Con USB Vendor/Product IDs.
const filters = [
  {
    vendorId: 0x057e, // Nintendo Co., Ltd
    productId: 0x2006 // Joy-Con Left
  },
  {
    vendorId: 0x057e, // Nintendo Co., Ltd
    productId: 0x2007 // Joy-Con Right
  }
];

// Prompt user to select a Joy-Con device.
const [device] = await navigator.hid.requestDevice({ filters });

// Get all devices the user has previously granted the website access to.
const devices = await navigator.hid.getDevices();

// Request access to a device with vendor ID 0xABCD. The device must also have
// a collection with usage page Consumer (0x000C) and usage ID Consumer
// Control (0x0001). The device with product ID 0x1234 is malfunctioning.
const [device] = await navigator.hid.requestDevice({
  filters: [{ vendorId: 0xabcd, usagePage: 0x000c, usage: 0x0001 }],
  exclusionFilters: [{ vendorId: 0xabcd, productId: 0x1234 }],
});

for (let collection of device.collections) {
  // An HID collection includes usage, usage page, reports, and subcollections.
  console.log(`Usage: ${collection.usage}`);
  console.log(`Usage page: ${collection.usagePage}`);

  for (let inputReport of collection.inputReports) {
    console.log(`Input report: ${inputReport.reportId}`);
    // Loop through inputReport.items
  }

  for (let outputReport of collection.outputReports) {
    console.log(`Output report: ${outputReport.reportId}`);
    // Loop through outputReport.items
  }

  for (let featureReport of collection.featureReports) {
    console.log(`Feature report: ${featureReport.reportId}`);
    // Loop through featureReport.items
  }

  // Loop through subcollections with collection.children
}

// Wait for the HID connection to open before sending/receiving data.
await device.open();

ইনপুট রিপোর্ট গ্রহণ

device.addEventListener("inputreport", event => {
  const { data, device, reportId } = event;

  // Handle only the Joy-Con Right device and a specific report ID.
  if (device.productId !== 0x2007 && reportId !== 0x3f) return;

  const value = data.getUint8(0);
  if (value === 0) return;

  const someButtons = { 1: "A", 2: "X", 4: "B", 8: "Y" };
  console.log(`User pressed button ${someButtons[value]}.`);
});

আউটপুট রিপোর্ট পাঠান

// First, send a command to enable vibration.
// Magical bytes come from https://github.com/mzyy94/joycon-toolweb
const enableVibrationData = [1, 0, 1, 64, 64, 0, 1, 64, 64, 0x48, 0x01];
await device.sendReport(0x01, new Uint8Array(enableVibrationData));

// Then, send a command to make the Joy-Con device rumble.
// Actual bytes are available in the sample below.
const rumbleData = [ /* ... */ ];
await device.sendReport(0x10, new Uint8Array(rumbleData));

ফিচার রিপোর্ট পাঠান এবং গ্রহণ করুন

const waitFor = duration => new Promise(r => setTimeout(r, duration));

// Prompt user to select an Apple Keyboard Backlight device.
const [device] = await navigator.hid.requestDevice({
  filters: [{ vendorId: 0x05ac, usage: 0x0f, usagePage: 0xff00 }]
});

// Wait for the HID connection to open.
await device.open();

// Blink!
const reportId = 1;
for (let i = 0; i < 10; i++) {
  // Turn off
  await device.sendFeatureReport(reportId, Uint32Array.from([0, 0]));
  await waitFor(100);
  // Turn on
  await device.sendFeatureReport(reportId, Uint32Array.from([512, 0]));
  await waitFor(100);
}

// Request feature report.
const dataView = await device.receiveFeatureReport(/* reportId= */ 1);

// Read feature report contents with dataView.getInt8(), getUint8(), etc...

সংযোগ এবং সংযোগ বিচ্ছিন্ন শুনুন

navigator.hid.addEventListener("connect", event => {
  // Automatically open event.device or warn user a device is available.
});

navigator.hid.addEventListener("disconnect", event => {
  // Remove |event.device| from the UI.
});

একটি HID ডিভাইসে অ্যাক্সেস প্রত্যাহার করুন

// Voluntarily revoke access to this HID device.
await device.forget();

if ("hid" in navigator && "forget" in HIDDevice.prototype) {
  // forget() is supported.
}

দেব টিপস

KERNEL=="hidraw*", ATTRS{idVendor}=="[yourdevicevendor]", MODE="0664", GROUP="plugdev"

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

WebHID API Chrome 89-এ সমস্ত ডেস্কটপ প্ল্যাটফর্মে (ChromeOS, Linux, macOS এবং Windows) উপলব্ধ।

ডেমো

কিছু WebHID ডেমো web.dev/hid-examples- এ তালিকাভুক্ত করা হয়েছে। যাও দেখে নিন!

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

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

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

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

ওয়েবএইচআইডি এপিআই গিথুব রেপোতে একটি নির্দিষ্ট সমস্যা ফাইল করুন বা কোনও বিদ্যমান ইস্যুতে আপনার চিন্তাভাবনা যুক্ত করুন।

বাস্তবায়নের সাথে একটি সমস্যা রিপোর্ট করুন

কীভাবে ওয়েবহিড বাগ ফাইল করবেন তা দেখুন। আপনি যতটা বিস্তারিত অন্তর্ভুক্ত করতে পারেন তা নিশ্চিত করুন, বাগটি পুনরুত্পাদন করার জন্য সহজ নির্দেশাবলী সরবরাহ করুন এবং উপাদানগুলি Blink>HID জন্য সেট করুন। দ্রুত এবং সহজ রিপ্রো শেয়ার করার জন্য গ্লিচ দুর্দান্ত কাজ করে।

সমর্থন দেখান

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

#WebHID হ্যাশট্যাগ ব্যবহার করে @ক্রোমিয়ামদেবকে একটি টুইট প্রেরণ করুন এবং আপনি কোথায় এবং কীভাবে এটি ব্যবহার করছেন তা আমাদের জানান।

সহায়ক লিঙ্ক

স্বীকৃতি

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