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 được 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. Theo "tốt nhất" Ý tôi là vậy cung cấp cho bạn mọi thứ bạn cần trong thời gian 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 bạn không biết cần sử dụng API nào hoặc tự hỏi liệu có cách nào khác để sử dụng API này 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à việc nhảy vào API cấp thấp mà không cần tìm hiểu về API cấp cao hơn dễ triển khai và cung cấp 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 API cấp cao hơn trước, nhưng cũng đề cập đến API cấp thấp hơn trong trường hợp bạn có 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 nhập từ thiết bị này

Hãy thử nghe các sự kiện trên Keyboard (Bàn phím) và Pointer (Con trỏ). Nếu thiết bị này là một trò chơi tay điều khiển, hãy sử dụng API Gamepad để 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 nêu trên 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 của bạn.

📸 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ừ trên thiết bị của bạn và tìm hiểu về cách ghi lại âm thanh và video. Bạn cũng có thể kiểm soát tính năng 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ể sử 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ư xoay). Xem cách định cấu hình hiệu suất của ứng dụng Âm thanh trên web trong Chrome của Google.

🖨 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ị làm đích để in tài liệu hiện tại.

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

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

Sử dụng WebAuthn để tạo một khoá công khai mạnh, đã đượ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. Chiến dịch này hỗ trợ việc sử dụng trình xác thực U2F hoặc FIDO2 Bluetooth, NFC và chuyển vùng USB — cũng được gọi là khoá bảo mật – cũng là trình xác thực nền tảng, giú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ụ: wallet tiền mã hoá), API cấp thấp có thể là giải pháp. 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 mình.

🗄 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 trực tiếp các thay đổi vào tệp và các 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 trình duyệt rồi đọc nội dung trong số các tệp đó.

🧲 Truy cập vào các 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, từ kế). Nếu không có, hãy sử dụng DeviceMotion và DeviceOrientation các sự kiện để 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 thiết bị di động.

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

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

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

🔋 Kiểm tra pin của thiết bị này

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

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

số 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 để 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 để kết xuất trang web trên màn hình thứ hai (ví dụ: màn hình phụ màn hình 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. Trong khi TCP và Cổng UDP không có trên web, hãy tham khảo WebTransport để xử lý kết nối mạng tương tác, hai chiều và đa kênh. Lưu ý rằng WebRTC cũng có thể được sử dụng để giao tiếp dữ liệu theo thời gian thực với các trình duyệt khác thông qua giao thức ngang hàng.

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

Quyết định loại API cấp thấp nào bạn nên sử dụng được xác định theo bản chất của kết nối vật lý của bạn với thiết bị. Nếu mạng không dây, hãy kiểm tra NFC trên web để kết nối không dây tầm ngắn và Web Bluetooth hoặc Web Serial để sử dụng ở lân cận thiết bị không dây.

Bằng NFC trên web, đọc và ghi vào thiết bị này khi ở gần thiết bị này 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 để sử dụng kỹ thuật đảo ngược .
Kết nối với thiết bị này qua Bluetooth năng lượng thấp bằng tính năng Web Bluetooth kết nối. Giao tiếp nên khá dễ dàng khi sử dụng các dịch vụ Bluetooth GATT được chuẩn hoá (chẳng hạn như dịch vụ pin) làm dịch vụ là được ghi chép rõ ràng. 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ế đảo 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ụ tích hợp sẵn trên trình duyệt chẳng hạn như trang nội bộ about://bluetooth-internals trong Chromium cho trình duyệt đó. Hãy tham khảo bài viết Công nghệ đảo ngược bóng đèn Bluetooth của URI bị rung. Xin lưu ý rằng các thiết bị Bluetooth cũng có thể dùng giao thức HID hoặc nối tiếp giao thức.
Sử dụng chế độ Chuyển đổi tuần tự qua Bluetooth, hãy kết nối với các dịch vụ RFCOMM trên các thiết bị đã ghép nối Các thiết bị Bluetooth cổ điển như Cấu hình cổng nối tiếp (SPP) đã chuẩn hoá. Để tuỳ chỉnh dựa trên RFCOMM, bạn cần tham khảo tài liệu của nhà cung cấp về mã nhận dạng duy nhấ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, bạn có thể nắm được 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ố quan trọng giúp bạn dễ hiểu về thiết bị này. Thông tin này có thể là 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 nó. Bạn cũng có thể sử dụng HID Ứng dụng web Explorer để 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 và nội dung lệnh mà thiết bị này hỗ trợ, rất khó nhưng vẫn có thể nếu may mắn phỏng đoán. Bạn có thể dùng kỹ thuật đảo ngược thiết bị này bằng cách thu thập dữ liệu USB thô lưu lượng truy cập bằng các công cụ như Wireshark. Bạn cũng có thể sử dụng Thiết bị đầu cuối nối tiếp ứng dụng web để thử nghiệm với thiết bị này xem thiết bị có sử dụng giao thức có thể đọc được hay không.
Với WebUSB mà không có tài liệu rõ ràng về thiết bị này cũng như USB nào lệnh mà thiết bị này hỗ trợ, rất khó nhưng vẫn có thể nếu may mắn phỏng đoán. Xem video Khám phá WebUSB và tiềm năng thú vị của WebUSB của Suz Gợi ý. Bạn cũng có thể thiết kế đảo ngược thiết bị này bằng cách chụp USB thô lưu lượng truy cập 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 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 DaryaTryfanava trên Unsplash.