WebHID का इस्तेमाल करें

ह्यूमन इंटरफ़ेस डिवाइस (एचआईडी), लोगों से इनपुट लेता है या उन्हें आउटपुट देता है. यह एचआईडी प्रोटोकॉल भी है. यह होस्ट और डिवाइस के बीच, दोनों तरफ़ से होने वाले कम्यूनिकेशन के लिए एक स्टैंडर्ड है. इसे इंस्टॉल करने की प्रोसेस को आसान बनाने के लिए डिज़ाइन किया गया है.

इस पेज पर, एपीआई के खास तौर पर एक्सटेंशन के बारे में जानकारी दी गई है. WebHID API के बारे में पूरी जानकारी के लिए, एमडीएन देखें.

हमारे सैंपल रिपॉज़िटरी में, WebHID के लिए सैंपल ऐप्लिकेशन मिल सकता है.

एक्सटेंशन में उपलब्धता

Chrome 117 या इसके बाद का वर्शन.

अनुमतियां

मेनिफ़ेस्ट फ़ाइल की अनुमतियों की ज़रूरत नहीं होती है. हालांकि, WebHID ब्राउज़र के उपयोगकर्ता की अनुमति वाले फ़्लो को ट्रिगर करता है.

मेनिफ़ेस्ट

इस एपीआई के लिए, मेनिफ़ेस्ट कुंजी की ज़रूरत नहीं है.

काम के कॉन्टेक्स्ट

इस एपीआई का इस्तेमाल, ज़्यादातर संदर्भों में किया जा सकता है. WebHID.requestDevice() तरीके का इस्तेमाल, एक्सटेंशन सेवा करने वाले वर्कर्स में नहीं किया जा सकता. विवरण के लिए अगला अनुभाग देखें.

जब इस एपीआई का इस्तेमाल एक्सटेंशन सेवा वर्कर में किया जाता है, तो डिवाइस के कनेक्शन सेशन से सेवा वर्कर चालू रहता है.

Chrome एक्सटेंशन के बीच अंतर

हालांकि, WebHID एक्सटेंशन सर्विस वर्कर के लिए उपलब्ध है, लेकिन WebHID.requestDevice() को एक्सटेंशन सर्विस वर्कर में नहीं बुलाया जा सकता. यह एक ऐसा प्रॉमिस है जो HIDDevice इंस्टेंस के साथ रिज़ॉल्व होता है. इस समस्या को हल करने के लिए, एक्सटेंशन सर्विस वर्कर के अलावा किसी दूसरे एक्सटेंशन पेज से requestDevice() को कॉल करें और एक्सटेंशन सर्विस वर्कर को मैसेज भेजें.

यह कोड, उपयोगकर्ता के जेस्चर की ज़रूरत वाले अनुमतियों के फ़्लो के हिस्से के तौर पर, requestDevice() को कॉल करके सामान्य पैटर्न को फ़ॉलो करता है. डिवाइस का ऐक्सेस मिलने पर, वह सेवा वर्कर को एक मैसेज भेजता है. इसके बाद, सेवा वर्कर getDevices() का इस्तेमाल करके डिवाइस को वापस पा सकता है.

popup.js:

myButton.addEventListener("click", async () => {
  await navigator.hid.requestDevice({
    filters: [{ vendorId: 0x1234, productId: 0x5678 }],
  });
  chrome.runtime.sendMessage("newDevice");
});

service-worker.js

chrome.runtime.onMessage.addListener(async (message) => {
  if (message === "newDevice") {
    const devices = await navigator.hid.getDevices();
    for (const device of devices) {
      // open device connection.
      await device.open();
    }
  }
});