Thiết bị có giao diện người dùng (HID) lấy dữ liệu đầu vào hoặc cung cấp đầu ra cho con người. Đây cũng là giao thức HID, một tiêu chuẩn cho hoạt động giao tiếp hai chiều giữa máy chủ và thiết bị được thiết kế để đơn giản hoá quy trình cài đặt.
Trang này mô tả các khía cạnh của API dành riêng cho tiện ích. Hãy tham khảo MDN để biết thông tin đầy đủ về API WebHID.
Bạn có thể tìm thấy ứng dụng mẫu cho WebHID trong kho lưu trữ mẫu của chúng tôi.
Khả năng sử dụng trong các tiện ích
Chrome 117 trở lên.
Quyền
Bạn không cần quyền đối với tệp kê khai; tuy nhiên, WebHID sẽ kích hoạt quy trình cấp quyền cho người dùng của trình duyệt.
Tệp kê khai
Không cần khoá tệp kê khai cho API này.
Bối cảnh hỗ trợ
API này có thể được dùng trong hầu hết mọi ngữ cảnh. Không thể sử dụng phương thức WebHID.requestDevice() trong worker dịch vụ tiện ích. Xem phần tiếp theo để biết chi tiết.
Khi API này được sử dụng trong một worker dịch vụ tiện ích, phiên kết nối thiết bị sẽ duy trì worker dịch vụ.
Sự khác biệt giữa tiện ích của Chrome
Mặc dù WebHID có sẵn cho trình chạy dịch vụ tiện ích, nhưng bạn không thể gọi WebHID.requestDevice() (trả về một lời hứa phân giải bằng thực thể HIDDevice) trong trình chạy dịch vụ tiện ích. Để giải quyết vấn đề này, hãy gọi requestDevice() từ một trang tiện ích khác với trình chạy dịch vụ tiện ích và gửi thông báo đến trình chạy dịch vụ tiện ích.
Mã sau đây tuân theo một mẫu thông thường bằng cách gọi requestDevice() trong một luồng cấp quyền yêu cầu cử chỉ của người dùng. Khi thiết bị được thu nạp, thiết bị sẽ gửi thông báo đến worker dịch vụ. Sau đó, worker dịch vụ có thể truy xuất thiết bị bằng 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();
}
}
});