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 phù 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à tính năng này cung cấp cho bạn mọi thứ bạn cần với lượng công 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 vào video) nhưng không biết nên sử dụng API nào hoặc thắc mắc liệu có cách nào khác để đạt được điều đó hay không.

Một vấn đề mà tôi thường thấy các nhà phát triển web hay 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 (API cấp cao hơ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, 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 mình.

🕹 Nhận thông tin về sự kiện nhập từ thiết bị này

Hãy thử nghe các sự kiện Bàn phím và Pointer. 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 người dùng đang nhấn nút nào và trục nào đã 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ì giải pháp có thể là API cấp thấp. Hãy tham khảo 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 âm thanh và video trên thiết bị này

Sử dụng MediaDevices.getUserMedia() để nhận âm thanh và luồng video trực tiếp từ thiết bị này, đồng thời tìm hiểu về cách ghi lại âm thanh và video. 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 và thậm chí là chụp ảnh tĩnh. Bạn có thể dùng Âm thanh web để thêm hiệu ứng cho âm thanh, tạo hình ảnh trực quan âm thanh hoặc áp dụng hiệu ứng không gian (chẳng hạn như kéo). Bạn cũng có thể xem cách phân tích hiệu suất của ứng dụng Âm thanh trên web trong Chrome.

🖨 In trên 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ì có thể giải pháp là một API cấp thấ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.

🔐 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 mẽ, đã được chứng thực và ở 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. Phiên bản này hỗ trợ việc sử dụng trình xác thực qua Bluetooth, NFC và chuyển vùng USB (còn gọi là khoá bảo mật) hoặc FIDO2 (còn gọi là 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 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ì có thể giải pháp là API cấp thấp. Hãy xem 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 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 tệp cục bộ trong hộp thoại của trình duyệt, sau đó đọc nội dung của các tệp đó.

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

Sử dụng Generic Sensor API (API Cảm biến chung) để đọ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 and DeviceOrientation để truy cập vào gia tốc kế, con quay hồi chuyển và la bàn tích hợp sẵn trong thiết bị di động.

Nếu giải pháp này không hiệu quả với bạn, thì có thể giải pháp là API cấp thấ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 toạ độ GPS trên thiết bị này

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

🔋 Hãy kiểm tra pin trên thiết bị này

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

📲 Kết nối 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) để 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 Bản trình bày để hiển thị trang web trên màn hình thứ hai (ví dụ: màn hình phụ kết nối bằng cáp HDMI hoặc TV thông minh 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 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ù cổng TCP và UDP chưa có trên web, hãy tham khảo bài viết WebTransport để xử lý các kết nối mạng tương tác, hai chiều và đa kênh. Lưu ý là bạn cũng có thể 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 chọn API cấp thấp nào bạn nên sử dụng phụ thuộc vào bản chất của kết nối vật lý của bạn với thiết bị. Nếu là không dây, hãy kiểm tra Web NFC để biết các kết nối không dây ở phạm vi rất ngắn và Web Bluetooth cho các thiết bị không dây ở gần.

Với API NFC trên web, 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 by NXP cho phép bạn duyệt xem nội dung của thiết bị này để phục vụ cho các mục đích kỹ thuật đảo ngược.
Với Bluetooth cho 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. Thiết bị này sẽ khá dễ giao tiếp khi sử dụng dịch vụ Bluetooth GATT được chuẩn hoá (chẳng hạn như dịch vụ pin) vì hành vi của 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 về phần cứng cho thiết bị này hoặc kỹ thuật đảo ngược. 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 phần Kỹ thuật đảo ngược bóng đèn Bluetooth trong URI Shaked. Xin lưu ý rằng các thiết bị Bluetooth cũng có thể nói giao thức HID hoặc giao thức nối tiếp.

Nếu thiết bị 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à mã mô tả báo cáo thông qua bộ sưu tập là yếu tố then chốt để hiểu rõ hơn về thiết bị này. Điều này có thể 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 thiết kế đảo ngược. Bạn cũng có thể sử dụng ứng dụng web Trình khám phá HID để chuyển thông tin thiết bị HID sang định dạng mà con người có thể đọc được.
Với Web Serial, không có tài liệu của nhà cung cấp cho thiết bị này cũng như các lệnh mà thiết bị này hỗ trợ, thì rất khó nhưng vẫn có thể đoán được kết quả may mắn. Bạn có thể thiết kế đảo ngược thiết bị này bằng cách ghi lại lưu lượng truy cập USB thô qua các công cụ như Wireshark. Bạn cũng có thể sử dụng ứng dụng web của Thiết bị đầu cuối 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 cũng như lệnh USB mà thiết bị này hỗ trợ, thì rất khó nhưng vẫn có thể đoán được. Hãy xem video Khám phá WebUSB và tiềm năng thú vị của nó của SuzHinton. Bạn cũng có thể thiết kế đảo ngược 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ông cụ trình duyệt tích hợp sẵn như trang nội bộ about://usb-internals trong trình duyệt dựa trên Chromium.

Xác nhận

Cảm ơn Reilly Grant, Thomas Steiner và Kayce Basques đã đánh giá bài viết này.

Ảnh của Darya tryfanava trên Unsplash.