Trang này được dịch bởi Cloud Translation API.

Truy cập vào thiết bị phần cứng trên web

Chọn API thích hợp để giao tiếp với thiết bị phần cứng mà bạn chọn.

François Beaufort

Mục tiêu của hướng dẫn này là giúp bạn chọn API tốt nhất để giao tiếp với thiết bị phần cứng (ví dụ: webcam, micrô, v.v.) trên web. "Tốt nhất" có nghĩa là công cụ này cung cấp cho bạn mọi thứ bạn cần với thời gian làm việc ngắn nhất. Nói cách khác, bạn biết trường hợp sử dụng chung mà bạn muốn giải quyết (ví dụ: truy cập video) nhưng không biết nên sử dụng API nào hoặc tự hỏi liệu có cách nào khác để đạt được mục tiêu đó hay không.

Một vấn đề mà tôi thường thấy các nhà phát triển web gặp phải là chuyển sang API cấp thấp mà không tìm hiểu về API cấp cao dễ triển khai hơn và mang lại trải nghiệm người dùng tốt hơn. Do đó, hướng dẫn này bắt đầu bằng cách đề xuất các API cấp cao hơn trước, nhưng cũng đề cập đến các API cấp thấp hơn trong trường hợp bạn xác định rằng API cấp cao hơn không đáp ứng nhu cầu của bạn.

🕹 Nhận sự kiện đầu vào từ thiết bị này

Hãy thử theo dõi các sự kiện Bàn phím và Con trỏ. Nếu thiết bị này là tay điều khiển trò chơi, hãy sử dụng Gamepad API để biết nút nào đang được nhấn và trục nào đang di chuyển.

Nếu không có lựa chọn nào trong số này phù hợp với bạn, thì API cấp thấp có thể là giải pháp. Hãy xem bài viết Khám phá cách giao tiếp với thiết bị để bắt đầu hành trình.

📸 Truy cập vào âm thanh và video trên thiết bị này

Sử dụng MediaDevices.getUserMedia() để nhận luồng âm thanh và video trực tiếp từ thiết bị này và tìm hiểu về cách quay video và âm thanh. Bạn cũng có thể điều khiển chế độ xoay, nghiêng và thu phóng của máy ảnh cũng như các chế độ cài đặt khác của máy ảnh như độ sáng và độ tương phản, thậm chí là chụp ảnh tĩnh. Bạn có thể dùng Web Audio để thêm hiệu ứng vào âm thanh, tạo hình ảnh âm thanh hoặc áp dụng hiệu ứng không gian (chẳng hạn như âm thanh khuếch đại). Ngoài ra, hãy xem cách phân tích hiệu suất của các ứng dụng Web Audio trong Chrome.

🖨 In vào thiết bị này

Sử dụng window.print() để mở hộp thoại trình duyệt cho phép người dùng chọn thiết bị này làm đích để in tài liệu hiện tại.

Nếu cách này không hiệu quả với bạn, API cấp thấp có thể là giải pháp. Hãy xem bài viết Khám phá cách giao tiếp với thiết bị để bắt đầu hành trình.

🔐 Xác thực bằng thiết bị này

Sử dụng WebAuthn để tạo thông tin xác thực khoá công khai mạnh, được chứng thực và trong phạm vi nguồn gốc bằng thiết bị bảo mật phần cứng này để xác thực người dùng. API này hỗ trợ việc sử dụng trình xác thực U2F hoặc FIDO2 qua Bluetooth, NFC và USB-roaming (còn gọi là khoá bảo mật) cũng như trình xác thực nền tảng, cho phép người dùng xác thực bằng vân tay hoặc màn hình khoá. Hãy xem bài viết Tạo ứng dụng WebAuthn đầu tiên.

Nếu thiết bị này là một loại thiết bị bảo mật phần cứng khác (ví dụ: ví tiền mã hoá), thì API cấp thấp có thể là giải pháp. Hãy xem phần Khám phá cách giao tiếp với thiết bị để bắt đầu hành trình.

🗄 Truy cập vào tệp trên thiết bị này

Sử dụng File System Access API (API truy cập hệ thống tệp) để đọc và lưu trực tiếp các thay đổi vào các tệp và thư mục trên thiết bị của người dùng. Nếu không có, hãy sử dụng File API (API Tệp) để yêu cầu người dùng chọn các tệp cục bộ trong hộp thoại trình duyệt, sau đó đọc nội dung của các tệp đó.

🧲 Truy cập vào cảm biến trên thiết bị này

Sử dụng API cảm biến chung để đọc các giá trị cảm biến thô từ cảm biến chuyển động (ví dụ: gia tốc kế hoặc con quay hồi chuyển) và cảm biến môi trường (ví dụ: ánh sáng xung quanh, đo từ trường). Nếu không có, hãy sử dụng các sự kiện DeviceMotion và DeviceOrientation để truy cập vào gia tốc kế, con quay hồi chuyển và la bàn tích hợp trong thiết bị di động.

Nếu không hiệu quả, API cấp thấp có thể là giải pháp. Hãy xem bài viết Khám phá cách giao tiếp với thiết bị để bắt đầu hành trình.

🛰 Truy cập toạ độ GPS trên thiết bị này

Sử dụng API Vị trí địa lý để lấy vĩ độ và kinh độ của vị trí hiện tại của người dùng trên thiết bị này.

Nếu không hiệu quả, API cấp thấp có thể là giải pháp. Hãy xem bài viết Khám phá cách giao tiếp với thiết bị để bắt đầu hành trình.

🔋 Kiểm tra pin trên thiết bị này

Sử dụng Battery API để nhận thông tin về mức pin của máy chủ lưu trữ và nhận thông báo khi mức pin hoặc trạng thái sạc thay đổi.

Nếu không hiệu quả, API cấp thấp có thể là giải pháp. Hãy xem bài viết Khám phá cách giao tiếp với thiết bị để bắt đầu hành trình.

📞 Giao tiếp với thiết bị này qua mạng

Trong mạng cục bộ, hãy sử dụng Remote Playback API (API phát từ xa) để truyền âm thanh và/hoặc video trên thiết bị phát từ xa (ví dụ: TV thông minh hoặc loa không dây) hoặc sử dụng Presentation API (API trình bày) để hiển thị trang web trên màn hình thứ hai (ví dụ: màn hình phụ được kết nối bằng cáp HDMI hoặc TV thông minh được kết nối không dây).

Nếu thiết bị này hiển thị một máy chủ web, hãy sử dụng Fetch API (API Tìm nạp) và/hoặc WebSockets để tìm nạp một số dữ liệu từ thiết bị này bằng cách nhấn vào các điểm cuối thích hợp. Mặc dù không có ổ cắm TCP và UDP trên web, hãy xem WebTransport để xử lý các kết nối mạng tương tác, hai chiều và đa kênh. Xin lưu ý rằng bạn cũng có thể sử dụng WebRTC để giao tiếp dữ liệu theo thời gian thực với các trình duyệt khác bằng giao thức ngang hàng.

🧱 Khám phá cách giao tiếp với thiết bị

Quyết định về việc bạn nên sử dụng API cấp thấp nào được xác định theo bản chất của kết nối thực tế với thiết bị. Nếu là kết nối không dây, hãy xem Web NFC cho các kết nối không dây cự ly rất ngắn và Web Bluetooth hoặc Web Serial cho các thiết bị không dây ở gần.

Với NFC trên web, hãy đọc và ghi vào thiết bị này khi thiết bị này ở gần thiết bị của người dùng (thường là 5–10 cm, 2–4 inch). Các công cụ như NFC TagInfo của NXP cho phép bạn duyệt qua nội dung của thiết bị này cho mục đích kỹ thuật đảo ngược.
Với Bluetooth trên web, hãy kết nối với thiết bị này qua kết nối Bluetooth Năng lượng thấp. Bạn có thể dễ dàng giao tiếp với dịch vụ này khi sử dụng các dịch vụ GATT Bluetooth được chuẩn hoá (chẳng hạn như dịch vụ pin) vì hành vi của các dịch vụ này được ghi chép đầy đủ. Nếu không, tại thời điểm này, bạn phải tìm một số tài liệu phần cứng cho thiết bị này hoặc thiết kế ngược thiết bị. Bạn có thể sử dụng các công cụ bên ngoài như nRF Connect for Mobile và các công cụ trình duyệt tích hợp sẵn như trang nội bộ about://bluetooth-internals trong các trình duyệt dựa trên Chromium. Hãy xem bài viết Kỹ thuật đảo ngược bóng đèn Bluetooth của Uri Shaked. Xin lưu ý rằng các thiết bị Bluetooth cũng có thể sử dụng giao thức HID hoặc giao thức nối tiếp.
Với tính năng Giao tiếp nối tiếp qua Bluetooth, hãy giao tiếp với các dịch vụ RFCOMM trên các thiết bị Bluetooth cổ điển đã ghép nối, chẳng hạn như Hồ sơ cổng nối tiếp (SPP) được chuẩn hoá. Tuy nhiên, đối với các dịch vụ dựa trên RFCOMM tuỳ chỉnh, bạn cần tham khảo tài liệu của nhà cung cấp thiết bị để biết UUID dịch vụ cần truyền đến requestPort().

Nếu có dây, hãy kiểm tra các API này theo thứ tự cụ thể sau:

Với WebHID, bạn cần hiểu rõ báo cáo HID và nội dung mô tả báo cáo thông qua bộ sưu tập để nắm bắt được thiết bị này. Việc này có thể gây khó khăn nếu không có tài liệu của nhà cung cấp cho thiết bị này. Các công cụ như Wireshark có thể giúp bạn kỹ thuật đảo ngược. Bạn cũng có thể sử dụng ứng dụng web HID Explorer để kết xuất thông tin về thiết bị HID sang định dạng mà con người có thể đọc được.
Với Web Serial, nếu không có tài liệu của nhà cung cấp cho thiết bị này và các lệnh mà thiết bị này hỗ trợ, thì việc đoán được lệnh sẽ rất khó nhưng vẫn có thể thực hiện được nếu bạn may mắn. Bạn có thể tiến hành kỹ thuật đảo ngược thiết bị này bằng cách ghi lại lưu lượng truy cập USB thô bằng các công cụ như Wireshark. Bạn cũng có thể sử dụng ứng dụng web Cổng nối tiếp để thử nghiệm với thiết bị này nếu thiết bị sử dụng giao thức mà con người có thể đọc được.
Với WebUSB, nếu không có tài liệu rõ ràng về thiết bị này và các lệnh USB mà thiết bị này hỗ trợ, thì việc đoán được lệnh sẽ rất khó nhưng vẫn có thể thực hiện được. Xem video Khám phá WebUSB và tiềm năng thú vị của WebUSB của Suz Hinton. Bạn cũng có thể kỹ thuật đảo ngược thiết bị này bằng cách ghi lại lưu lượng truy cập USB thô và kiểm tra trình mô tả USB bằng các công cụ bên ngoài như Wireshark và các công cụ trình duyệt tích hợp sẵn như trang nội bộ about://usb-internals trong các trình duyệt dựa trên Chromium.

Lời cảm ơn

Cảm ơn Reilly Grant, Thomas Steiner và Kayce Basques đã xem xét bài viết này.

Ảnh chụp của Darya Tryfanava trên Unsplash.