Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

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 phù hợp nhất để giao tiếp với một thiết bị phần cứng (ví dụ: webcam, micrô, v.v.) trên web. "Tốt nhất" nghĩa là cung cấp cho bạn mọi thứ bạn cần với ít công sức 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 bạn 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 đích đó 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 các API cấp thấp mà không tìm hiểu về các API cấp cao hơn, vốn 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 việc đề 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 đã di chuyển.

Nếu không có lựa chọn nào 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ị của bạn để 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() để lấy 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à ghi âm. Bạn cũng có thể điều khiển chế độ xoay, nghiêng và thu phóng của camera, cũng như các chế độ cài đặt khác của camera 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 trực quan cho âm thanh hoặc áp dụng hiệu ứng không gian (chẳng hạn như lia máy). Hãy xem cách phân tích hiệu suất của ứng dụng Web Audio trong Chrome.

🖨 In bằng 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 đến để in tài liệu hiện tại.

Nếu cách này không hiệu quả, thì bạn có thể dùng API cấp thấp. Hãy xem bài viết Khám phá cách giao tiếp với thiết bị của bạn để 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à có phạm vi 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 chuyển vùng qua Bluetooth, NFC và USB (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 phương thức khoá màn hình. Hãy xem bài viết Xây dựng ứ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 bài viết Khám phá cách giao tiếp với thiết bị để bắt đầu hành trình của bạn.

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

Sử dụng File System Access API để đọc và lưu các thay đổi trực tiếp vào 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 để yêu cầu người dùng chọn tệp trên máy từ hộp thoại của 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 Generic Sensor API (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, từ kế). 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 API này không 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ị của bạn để bắt đầu hành trình.

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

Sử dụng Geolocation API để 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.

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

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

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

Trong mạng cục bộ, hãy sử dụng API Phát từ xa để truyền phát â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 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áy chủ web, hãy sử dụng Fetch API và/hoặc WebSockets để tìm nạp một số dữ liệu từ thiết bị này bằng cách truy cập vào các điểm cuối thích hợp. Mặc dù các cổng TCP và UDP không có trên web, nhưng hãy xem WebTransport để xử lý các kết nối mạng tương tác, hai chiều và ghép kênh. Xin lưu ý rằng bạn cũng có thể dùng WebRTC để truyền 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.

🧱 Tìm hiểu cách giao tiếp với thiết bị của bạn

Việc quyết định nên sử dụng API cấp thấp nào được xác định dựa trên bản chất của kết nối vật lý với thiết bị. Nếu là kết nối không dây, hãy xem NFC trên web để biết các kết nối không dây trong phạm vi rất ngắn và Bluetooth trên web hoặc Serial trên web để biết các thiết bị không dây ở gần.

Với Web NFC, hãy đọc và ghi vào thiết bị này khi thiết bị ở 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 xem nội dung của thiết bị này cho mục đích kỹ thuật đảo ngược.
Với Web Bluetooth, 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. Việc giao tiếp với thiết bị này sẽ khá dễ dàng khi thiết bị 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 lại đầ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 về phần cứng cho thiết bị này hoặc đảo ngược kỹ thuật. 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ụ tích hợp sẵn trong trình duyệt chẳng hạn như trang nội bộ about://bluetooth-internals trong các trình duyệt dựa trên Chromium để làm việc đó. 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 Serial over Bluetooth (Nối tiếp qua Bluetooth), bạn có thể giao tiếp với các dịch vụ RFCOMM trên các thiết bị Bluetooth Classic đã ghép nối, chẳng hạn như Cấu hình 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 của 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, việc hiểu rõ báo cáo HID và phần mô tả báo cáo thông qua bộ sưu tập là yếu tố then chốt để bạn hiểu rõ thiết bị này. Việc này có thể gặp 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 đảo ngược kỹ thuật. Bạn cũng có thể sử dụng ứng dụng web HID Explorer để kết xuất thông tin 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 này sẽ khó khăn nhưng vẫn có thể thực hiện được nếu đoán đúng. Bạn có thể thực hiện kỹ thuật đảo ngược thiết bị này bằng cách thu thập 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 Serial Terminal để 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 này sẽ khó khăn nhưng vẫn có thể thực hiện được nếu đoán đúng. 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ể đảo ngược kỹ thuật thiết bị này bằng cách thu thập lưu lượng truy cập USB thô và kiểm tra bộ 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.

Xác nhận

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

Truy cập vào thiết bị phần cứng trên web Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.