WebHID की मदद से Stadia कंट्रोलर से बात करना

फ़्लैश किया गया Stadia कंट्रोलर, स्टैंडर्ड गेमपैड की तरह काम करता है. इसका मतलब है कि Gamepad API का इस्तेमाल करके, इसके सभी बटन ऐक्सेस नहीं किए जा सकते. WebHID की मदद से, अब वे बटन ऐक्सेस किए जा सकते हैं जो मौजूद नहीं हैं.

Thomas Steiner

Stadia के बंद होने के बाद, कई लोगों को डर था कि कंट्रोलर बेकार हो जाएगा और उसे लैंडफ़िल में फेंक दिया जाएगा. हालांकि, Stadia की टीम ने कस्टम फ़र्मवेयर उपलब्ध कराकर, Stadia कंट्रोलर को खोलने का फ़ैसला लिया है. इस फ़र्मवेयर को Stadia ब्लूटूथ मोड पेज पर जाकर, अपने कंट्रोलर पर फ़्लैश किया जा सकता है. इससे आपका Stadia कंट्रोलर, स्टैंडर्ड गेमपैड के तौर पर दिखता है. इसे यूएसबी केबल या ब्लूटूथ की मदद से वायरलेस तरीके से कनेक्ट किया जा सकता है. Stadia के ब्लूटूथ पेज पर WebHID और WebUSB का इस्तेमाल किया जाता है. इस पेज को Project Fugu API Showcase पर दिखाया गया है. हालांकि, इस लेख में इस बारे में नहीं बताया गया है. इस पोस्ट में, हम आपको बताना चाहते हैं कि WebHID की मदद से, Stadia कंट्रोलर से कैसे बात की जा सकती है.

Stadia कंट्रोलर को स्टैंडर्ड गेमपैड के तौर पर इस्तेमाल करना

फ़्लैश होने के बाद, कंट्रोलर ऑपरेटिंग सिस्टम के लिए स्टैंडर्ड गेमपैड के तौर पर दिखता है. स्टैंडर्ड गेमपैड पर सामान्य बटन और ऐक्सिस के क्रम के लिए, नीचे दिया गया स्क्रीनशॉट देखें. Gamepad API के स्पेसिफ़िकेशन के मुताबिक, स्टैंडर्ड गेमपैड में 0 से 16 बटन होते हैं. इसलिए, कुल 17 बटन होते हैं. डी-पैड को चार बटन माना जाता है. गेमपैड टेस्टर के डेमो पर Stadia कंट्रोलर आज़माने पर, आपको पता चलेगा कि यह आसानी से काम करता है.

हालांकि, Stadia कंट्रोलर पर बटन की संख्या 19 है. गेमपैड टेस्टर में एक-एक करके बटन को आज़माने पर, आपको पता चलेगा कि Assistant और कैप्चर करें बटन काम नहीं करते. गेमपैड स्पेसिफ़िकेशन में बताए गए गेमपैड buttons एट्रिब्यूट की वैल्यू के लिए कोई तय सीमा नहीं है. हालांकि, Stadia कंट्रोलर एक स्टैंडर्ड गेमपैड के तौर पर दिखता है. इसलिए, सिर्फ़ बटन 0 से 16 को मैप किया जाता है. आपके पास अब भी अन्य बटन इस्तेमाल करने का विकल्प है, लेकिन ज़्यादातर गेम में इन बटन का इस्तेमाल नहीं किया जा सकता.

WebHID की मदद से

WebHID API की मदद से, 17 और 18 नंबर वाले बटन को ऐक्सेस किया जा सकता है. अगर ज़रूरत हो, तो Gamepad API की मदद से पहले से उपलब्ध सभी बटन और ऐक्सिस का डेटा भी पाया जा सकता है. पहला चरण यह पता लगाना है कि Stadia कंट्रोलर, ऑपरेटिंग सिस्टम को अपनी रिपोर्ट कैसे भेजता है. ऐसा करने का एक तरीका यह है कि किसी भी पेज पर Chrome DevTools कंसोल खोलें और WebHID API से डिवाइसों की बिना फ़िल्टर की गई सूची का अनुरोध करें. इसके बाद, आपको आगे की जांच के लिए Stadia कंट्रोलर को मैन्युअल तरीके से चुनना होगा. डिवाइसों की बिना फ़िल्टर की गई सूची पाने के लिए, खाली filters विकल्पों का कलेक्शन पास करें.

const [device] = await navigator.hid.requestDevice({filters: []});

पिकर में, आखिरी से पहले वाली एंट्री, Stadia कंट्रोलर की तरह दिखती है.

"Stadia Controller rev. A" डिवाइस चुनने के बाद, Console में मिले HIDDevice ऑब्जेक्ट को लॉग करें. इससे Stadia कंट्रोलर का productId (37888, जो हेक्स में 0x9400 है) और vendorId (6353, जो हेक्स में 0x18d1 है) पता चलता है. अगर यूएसबी वेंडर आईडी की आधिकारिक टेबल में vendorID को देखा जाता है, तो आपको पता चलेगा कि 6353, Google Inc. से मैप होता है.

ऊपर बताए गए फ़्लो के अलावा, यूआरएल बार में chrome://device-log/ पर जाकर, साफ़ करें बटन दबाएं. इसके बाद, अपने Stadia कंट्रोलर को प्लग इन करें और रीफ़्रेश करें पर क्लिक करें. इससे आपको वही जानकारी मिलती है.

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

पिकर में दिखने वाली जानकारी को बेहतर बनाने के लिए, इन दो आईडी, vendorId और productId का इस्तेमाल करें. इसके लिए, सही WebHID डिवाइस को सही तरीके से फ़िल्टर करें.

const [stadiaController] = await navigator.hid.requestDevice({filters: [{
  vendorId: 6353,
  productId: 37888,
}]});

अब उस डिवाइस से जुड़ी सभी गड़बड़ियां हट गई हैं और सिर्फ़ Stadia कंट्रोलर दिख रहा है.

इसके बाद, open() तरीके को कॉल करके HIDDevice खोलें.

await stadiaController.open();

HIDDevice को फिर से लॉग करें और opened फ़्लैग को true पर सेट करें.

डिवाइस को खोलकर, इवेंट लिसनर अटैच करके आने वाले inputreport इवेंट सुनें.

stadiaController.addEventListener('inputreport', (e) => {
  console.log(e);
});

कंट्रोलर पर Assistant बटन को दबाकर छोड़ने पर, Console में दो इवेंट लॉग होते हैं. इन्हें "Assistant बटन को दबाने" और "Assistant बटन को छोड़ने" वाले इवेंट के तौर पर देखा जा सकता है. timeStamp के अलावा, पहली नज़र में दोनों इवेंट एक जैसे लगते हैं.

HIDInputReportEvent इंटरफ़ेस की reportId प्रॉपर्टी, इस रिपोर्ट के लिए एक बाइट का आइडेंटिफ़िकेशन प्रीफ़िक्स दिखाती है. अगर HID इंटरफ़ेस, रिपोर्ट आईडी का इस्तेमाल नहीं करता है, तो यह 0 दिखाती है. इस मामले में, यह 3 है. सीक्रेट पासकोड, data प्रॉपर्टी में मौजूद है. इसे 10 साइज़ के DataView के तौर पर दिखाया गया है. DataView, बाइनरी ArrayBuffer में कई तरह की संख्याओं को पढ़ने और लिखने के लिए, लो-लेवल इंटरफ़ेस उपलब्ध कराता है. इस तरीके से, ArrayBuffer से Uint8Array बनाकर, 8-बिट के अलग-अलग बिना साइन वाले इंटिजर देखे जा सकते हैं.

const data = new Uint8Array(event.data.buffer);

इसके बाद, इनपुट रिपोर्ट इवेंट का डेटा फिर से लॉग करने पर, चीज़ें ज़्यादा समझ में आने लगती हैं. साथ ही, "Assistant बटन दबाया गया" और "Assistant बटन छोड़ा गया" इवेंट को समझना आसान हो जाता है. ऐसा लगता है कि पहला इंटिजर (दोनों इवेंट में 8), बटन दबाने से जुड़ा है. वहीं, दूसरा इंटिजर (2 और 0), Assistant बटन दबाए जाने या न दबाए जाने से जुड़ा है.

Assistant बटन के बजाय, कैप्चर करें बटन दबाएं. इससे आपको पता चलेगा कि बटन को दबाने पर दूसरा पूर्णांक 1 से 0 पर टॉगल हो जाता है और बटन को छोड़ने पर 0 से 1 पर टॉगल हो जाता है. इससे, एक बहुत ही आसान "ड्राइवर" लिखा जा सकता है, जिससे आपको छूटे हुए दो बटन का इस्तेमाल करने में मदद मिलती है.

stadia.addEventListener('inputreport', (event) => {
  if (!e.reportId === 3) {
    return;
  }
  const data = new Uint8Array(event.data.buffer);
  if (data[0] === 8) {
    if (data[1] === 1) {
      hidButtons[1].classList.add('highlight');
    } else if (data[1] === 2) {
      hidButtons[0].classList.add('highlight');
    } else if (data[1] === 3) {
      hidButtons[0].classList.add('highlight');
      hidButtons[1].classList.add('highlight');
    } else {
      hidButtons[0].classList.remove('highlight');
      hidButtons[1].classList.remove('highlight');
    }
  }
});

इस तरह के रिवर्स-इंजनियरिंग तरीके का इस्तेमाल करके, बटन और ऐक्सिस के हिसाब से, WebHID की मदद से Stadia कंट्रोलर से बात करने का तरीका पता लगाया जा सकता है. इसे समझने के बाद, बाकी काम मशीन के हिसाब से पूरा हो जाता है.

हालांकि, अब गेमपैड API की तरह आसानी से कनेक्ट करने की सुविधा नहीं है. सुरक्षा की वजहों से, आपको Stadia कंट्रोलर जैसे WebHID डिवाइस के साथ काम करने के लिए, हमेशा शुरुआती पिकर अनुभव को एक बार पूरा करना होगा. हालांकि, आने वाले समय में कनेक्ट करने के लिए, पहले से इस्तेमाल किए जा रहे डिवाइसों से फिर से कनेक्ट किया जा सकता है. इसके लिए, getDevices() तरीके को कॉल करें.

let stadiaController;
const [device] = await navigator.hid.getDevices();
if (device && device.vendorId === 6353 && device.productId === 37888) {
  stadiaController = device;
}

डेमो

मैंने एक डेमो बनाया है. इसमें, Gamepad API और WebHID API की मदद से Stadia कंट्रोलर को कंट्रोल किया जा रहा है. इस लेख में दिए गए स्निपेट के आधार पर बनाए गए सोर्स कोड को ज़रूर देखें. आसानी से समझने के लिए, मैंने सिर्फ़ A, B, X, और Y बटन (Gamepad API से कंट्रोल किए जाते हैं) और Assistant और Capture बटन (WebHID API से कंट्रोल किए जाते हैं) दिखाए हैं. कंट्रोलर की इमेज के नीचे, आपको WebHID का रॉ डेटा दिखेगा. इससे आपको कंट्रोलर के सभी बटन और ऐक्सिस के बारे में जानकारी मिलेगी.

मीटिंग में सामने आए नतीजे

नए फ़र्मवेयर की मदद से, Stadia कंट्रोलर को अब 17 बटन वाले स्टैंडर्ड गेमपैड के तौर पर इस्तेमाल किया जा सकता है. ज़्यादातर मामलों में, यह सामान्य वेब गेम को कंट्रोल करने के लिए काफ़ी है. अगर आपको किसी भी वजह से, कंट्रोलर के सभी 19 बटन का डेटा चाहिए, तो WebHID की मदद से, लो-लेवल इनपुट रिपोर्ट का ऐक्सेस पाया जा सकता है. इन रिपोर्ट को एक-एक करके रिवर्स इंजीनियर करके, इनका डेकोड किया जा सकता है. अगर इस लेख को पढ़ने के बाद, आपने पूरा WebHID ड्राइवर लिख लिया है, तो हमसे संपर्क करें. हम आपके प्रोजेक्ट को यहां लिंक करके खुशी से मदद करेंगे. वेबएचआईडी का आनंद लें!

आभार

इस लेख की समीक्षा फ़्रांस्वा बफ़ोर ने की है.