دسترسی به دستگاه های USB در وب

خوب، حالا بیایید ببینیم که ارتباط از طریق یک برد آردوینو سازگار با WebUSB از طریق پورت USB چقدر آسان است. دستورالعمل‌ها را در https://github.com/webusb/arduino بررسی کنید تا طرح‌های خود را WebUSB فعال کنید.

نگران نباشید، من تمام روش های دستگاه WebUSB را که در زیر ذکر شده است در ادامه این مقاله پوشش خواهم داد.

let device;

navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] })
.then(selectedDevice => {
    device = selectedDevice;
    return device.open(); // Begin a session.
  })
.then(() => device.selectConfiguration(1)) // Select configuration #1 for the device.
.then(() => device.claimInterface(2)) // Request exclusive control over interface #2.
.then(() => device.controlTransferOut({
    requestType: 'class',
    recipient: 'interface',
    request: 0x22,
    value: 0x01,
    index: 0x02})) // Ready to receive data
.then(() => device.transferIn(5, 64)) // Waiting for 64 bytes of data from endpoint #5.
.then(result => {
  const decoder = new TextDecoder();
  console.log('Received: ' + decoder.decode(result.data));
})
.catch(error => { console.error(error); });

به خاطر داشته باشید که کتابخانه WebUSB که من از آن استفاده می‌کنم فقط یک پروتکل نمونه (بر اساس پروتکل استاندارد سریال USB) را پیاده‌سازی می‌کند و تولیدکنندگان می‌توانند هر مجموعه و انواع نقطه‌های پایانی را که می‌خواهند ایجاد کنند. انتقال‌های کنترلی مخصوصاً برای دستورات پیکربندی کوچک خوب هستند، زیرا اولویت اتوبوس را دارند و ساختاری کاملاً مشخص دارند.

و در اینجا طرحی است که در برد آردوینو آپلود شده است.

// Third-party WebUSB Arduino library
#include <WebUSB.h>

WebUSB WebUSBSerial(1 /* https:// */, "webusb.github.io/arduino/demos");

#define Serial WebUSBSerial

void setup() {
  Serial.begin(9600);
  while (!Serial) {
    ; // Wait for serial port to connect.
  }
  Serial.write("WebUSB FTW!");
  Serial.flush();
}

void loop() {
  // Nothing here for now.
}

کتابخانه WebUSB Arduino شخص ثالث مورد استفاده در کد نمونه بالا اساساً دو کار را انجام می دهد:

• این دستگاه به عنوان یک دستگاه WebUSB عمل می کند که Chrome را قادر می سازد URL صفحه فرود را بخواند.
• این یک API سریال WebUSB را نشان می دهد که می توانید از آن برای لغو پیش فرض استفاده کنید.

دوباره به کد جاوا اسکریپت نگاه کنید. پس از انتخاب device توسط کاربر، device.open() تمام مراحل مربوط به پلتفرم را برای شروع یک جلسه با دستگاه USB اجرا می کند. سپس، باید یک پیکربندی USB موجود را با device.selectConfiguration() انتخاب کنم. به یاد داشته باشید که یک پیکربندی نحوه تغذیه دستگاه، حداکثر مصرف انرژی و تعداد رابط های آن را مشخص می کند. در مورد رابط‌ها، من همچنین نیاز به درخواست دسترسی انحصاری با device.claimInterface() دارم، زیرا داده‌ها تنها زمانی می‌توانند به یک رابط یا نقاط پایانی مرتبط منتقل شوند که واسط ادعا شود. در نهایت فراخوانی device.controlTransferOut() برای راه اندازی دستگاه Arduino با دستورات مناسب برای برقراری ارتباط از طریق WebUSB Serial API مورد نیاز است.

از آنجا، device.transferIn() یک انتقال انبوه به دستگاه انجام می دهد تا به آن اطلاع دهد که میزبان آماده دریافت داده های انبوه است. سپس، وعده با یک شیء result حاوی data DataView که باید به طور مناسب تجزیه شود، محقق می‌شود.

اگر با USB آشنایی دارید، همه اینها باید بسیار آشنا به نظر برسند.

من بیشتر می خواهم

WebUSB API به شما امکان می دهد با همه انواع انتقال/نقطه پایانی USB تعامل داشته باشید:

• انتقال‌های CONTROL که برای ارسال یا دریافت تنظیمات یا پارامترهای فرمان به یک دستگاه USB استفاده می‌شود، با controlTransferIn(setup, length) و controlTransferOut(setup, data) انجام می‌شود.
• انتقال‌های INTERRUPT که برای مقدار کمی از داده‌های حساس به زمان استفاده می‌شود، با همان روش‌هایی که انتقال‌های انبوه با transferIn(endpointNumber, length) و transferOut(endpointNumber, data) انجام می‌شود.
• انتقال‌های ISOCHRONOUS، که برای جریان‌های داده‌ای مانند ویدیو و صدا استفاده می‌شود، با isochronousTransferIn(endpointNumber, packetLengths) و isochronousTransferOut(endpointNumber, data, packetLengths) انجام می‌شود.
• انتقال انبوه، که برای انتقال حجم زیادی از داده های غیر حساس به زمان به روشی قابل اعتماد استفاده می شود، با transferIn(endpointNumber, length) و transferOut(endpointNumber, data) انجام می شود.

همچنین ممکن است بخواهید به پروژه WebLight مایک تسائو نگاهی بیندازید که یک نمونه اولیه از ساخت یک دستگاه LED کنترل شده با USB را ارائه می دهد که برای WebUSB API طراحی شده است (در اینجا از آردوینو استفاده نمی شود). سخت افزار، نرم افزار و سیستم عامل را خواهید یافت.

دسترسی به یک دستگاه USB را لغو کنید

وب‌سایت می‌تواند مجوزهای دسترسی به یک دستگاه USB را که دیگر به آن نیازی ندارد، با فراخوانی forget() در نمونه USBDevice پاک کند. به عنوان مثال، برای یک برنامه وب آموزشی که در یک رایانه مشترک با دستگاه‌های زیادی استفاده می‌شود، تعداد زیادی مجوزهای انباشته شده توسط کاربر تجربه کاربری ضعیفی ایجاد می‌کند.

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

از آنجایی که forget() در Chrome 101 یا جدیدتر موجود است، بررسی کنید که آیا این ویژگی با موارد زیر پشتیبانی می‌شود:

if ("usb" in navigator && "forget" in USBDevice.prototype) {
  // forget() is supported.
}

محدودیت در اندازه انتقال

برخی از سیستم‌عامل‌ها محدودیت‌هایی را برای اینکه چه مقدار داده می‌تواند بخشی از تراکنش‌های USB معلق باشد، اعمال می‌کنند. تقسیم داده‌های خود به تراکنش‌های کوچک‌تر و ارسال تنها چند مورد در یک زمان به جلوگیری از این محدودیت‌ها کمک می‌کند. همچنین میزان حافظه استفاده شده را کاهش می‌دهد و به برنامه شما اجازه می‌دهد تا پیشرفت را با تکمیل انتقال گزارش کند.

از آنجایی که چندین انتقال ارسال شده به یک نقطه پایانی همیشه به ترتیب انجام می شود، می توان با ارسال چند تکه در صف، توان عملیاتی را بهبود بخشید تا از تأخیر بین انتقال USB جلوگیری شود. هر بار که یک تکه به طور کامل ارسال می شود، به کد شما اطلاع می دهد که باید داده های بیشتری را همانطور که در مثال تابع کمکی در زیر مستند شده است، ارائه دهد.

const BULK_TRANSFER_SIZE = 16 * 1024; // 16KB
const MAX_NUMBER_TRANSFERS = 3;

async function sendRawPayload(device, endpointNumber, data) {
  let i = 0;
  let pendingTransfers = [];
  let remainingBytes = data.byteLength;
  while (remainingBytes > 0) {
    const chunk = data.subarray(
      i * BULK_TRANSFER_SIZE,
      (i + 1) * BULK_TRANSFER_SIZE
    );
    // If we've reached max number of transfers, let's wait.
    if (pendingTransfers.length == MAX_NUMBER_TRANSFERS) {
      await pendingTransfers.shift();
    }
    // Submit transfers that will be executed in order.
    pendingTransfers.push(device.transferOut(endpointNumber, chunk));
    remainingBytes -= chunk.byteLength;
    i++;
  }
  // And wait for last remaining transfers to complete.
  await Promise.all(pendingTransfers);
}

نکات

اشکال زدایی USB در Chrome با صفحه داخلی about://device-log که در آن می توانید همه رویدادهای مربوط به دستگاه USB را در یک مکان مشاهده کنید، آسان تر است.

صفحه داخلی about://usb-internals نیز مفید است و به شما امکان می دهد اتصال و قطع اتصال دستگاه های مجازی WebUSB را شبیه سازی کنید. این برای انجام تست UI بدون سخت افزار واقعی مفید است.

در اکثر سیستم های لینوکس، دستگاه های USB به طور پیش فرض با مجوزهای فقط خواندنی نقشه برداری می شوند. برای اینکه به Chrome اجازه دهید یک دستگاه USB را باز کند، باید یک قانون udev جدید اضافه کنید. یک فایل در /etc/udev/rules.d/50-yourdevicename.rules با محتوای زیر ایجاد کنید:

SUBSYSTEM=="usb", ATTR{idVendor}=="[yourdevicevendor]", MODE="0664", GROUP="plugdev"

برای مثال اگر دستگاه شما آردوینو باشد، [yourdevicevendor] 2341 است. ATTR{idProduct} همچنین می‌تواند برای یک قانون خاص‌تر اضافه شود. مطمئن شوید که user شما عضو گروه plugdev است. سپس، فقط دستگاه خود را دوباره وصل کنید.

منابع

• سرریز پشته: https://stackoverflow.com/questions/tagged/webusb
• مشخصات WebUSB API: http://wicg.github.io/webusb/
• وضعیت ویژگی کروم: https://www.chromestatus.com/feature/5651917954875392
• مشکلات مشخصات: https://github.com/WICG/webusb/issues
• اشکالات پیاده سازی: http://crbug.com?q=component:Blink>USB
• WebUSB ❤ ️Arduino: https://github.com/webusb/arduino
• IRC: #webusb در IRC W3C
• لیست پستی WICG: https://lists.w3.org/Archives/Public/public-wicg/
• پروژه WebLight: https://github.com/sowbug/weblight

با استفاده از هشتگ #WebUSB یک توییت به ChromiumDev@ ارسال کنید و به ما اطلاع دهید کجا و چگونه از آن استفاده می‌کنید.

قدردانی ها

با تشکر از جو مدلی برای بررسی این مقاله.