要通過瀏覽器獲取usb設備信息，必須使用webusb api而非bom，且需用戶授權。首先，網頁必須運行在https環境下；其次，調用navigator.usb.requestdevice()必須由用戶手勢觸發，如點擊按鈕；接著，用戶需從彈出的對話框中手動選擇設備并授權；然后，通過返回的device對象可獲取廠商id、產品id、設備名稱等基本信息；最后，若需進一步通信，需打開設備、選擇配置并聲明接口，同時注意操作完成后釋放資源。
要直接用瀏覽器對象模型（BOM）來獲取用戶的USB設備詳細信息，說實話，這事兒沒那么簡單，甚至可以說，你直接想用BOM去“掃描”用戶的USB設備列表，那是不可能的。瀏覽器出于安全和隱私的考慮，對這種底層硬件訪問有著極其嚴格的限制。不過，如果你指的是通過瀏覽器環境下的API，那么現代瀏覽器確實提供了WebUSB API，它允許網頁在用戶明確授權的情況下，與特定的USB設備進行交互。這并非傳統意義上BOM的直接能力，而是瀏覽器提供的一項高級功能，它通過navigator.usb這個對象來暴露接口。
解決方案
利用WebUSB API與用戶的USB設備進行交互，獲取其基本信息。這個過程需要用戶的主動授權和明確的選擇，這是瀏覽器安全模型的核心。
async function getUsbDeviceInfo() { try { // 1. 請求用戶選擇一個USB設備 // 這一步必須由用戶手勢觸發，例如點擊按鈕 const device = await navigator.usb.requestDevice({ filters: [ // 你可以指定過濾器來限制用戶能選擇的設備類型 // 例如：{ vendorId: 0xABCD, productId: 0x1234 } // 如果不指定，用戶可以看到所有可用的USB設備 ] }); // 2. 獲取設備的基本信息 console.log(`設備名稱: ${device.productName || '未知名稱'}`); console.log(`廠商ID: 0x${device.vendorId.toString(16).toUpperCase()}`); console.log(`產品ID: 0x${device.productId.toString(16).toUpperCase()}`); console.log(`序列號: ${device.serialNumber || '無序列號'}`); console.log(`設備類: 0x${device.deviceClass.toString(16).toUpperCase()}`); console.log(`協議: 0x${device.deviceProtocol.toString(16).toUpperCase()}`); console.log(`子類: 0x${device.deviceSubclass.toString(16).toUpperCase()}`); // 3. 打開設備并配置（如果需要進一步通信） await device.open(); if (device.configuration === null) { await device.selectConfiguration(1); // 選擇第一個配置 } await device.claimInterface(0); // 聲明第一個接口 console.log('設備已成功打開并聲明接口。'); // 此時你可以開始與設備進行數據傳輸 // 例如：await device.transferIn(endpointNumber, length); // 或者：await device.transferOut(endpointNumber, data); } catch (error) { console.error('獲取USB設備信息或操作失敗:', error); if (error.name === 'NotFoundError') { console.log('用戶取消了設備選擇，或者沒有找到符合條件的設備。'); } else if (error.name === 'SecurityError') { console.log('可能不是https環境，或者權限被拒絕。'); } } finally { // 確保在操作完成后關閉設備，釋放資源 // if (device && device.opened) { // await device.close(); // console.log('設備已關閉。'); // } } } // 示例：通常會綁定到一個按鈕點擊事件 // document.getElementById('connectUsbButton').addEventListener('click', getUsbDeviceInfo);
要運行這段代碼，你的網頁必須運行在HTTPS環境下，并且navigator.usb對象可用（瀏覽器支持WebUSB API）。
WebUSB API的局限性與安全性考量
使用WebUSB API來獲取USB設備信息，聽起來很酷，但它并非沒有限制。實際上，這些限制正是為了保護用戶隱私和系統安全而設計的，這背后是瀏覽器安全模型的一次深刻體現。你不能像桌面應用那樣隨意枚舉所有連接的USB設備，更別提在用戶不知情的情況下讀取它們的詳細信息。
首先，必須是HTTPS環境。這是強制性的，HTTP下根本無法調用WebUSB API。其次，需要用戶手勢觸發。navigator.usb.requestDevice()這個方法，必須由用戶的主動行為（比如點擊一個按鈕）來調用。這意味著你不能在頁面加載時就偷偷摸摸地去探測用戶的USB設備。再次，用戶需要明確選擇和授權。當requestDevice()被調用時，瀏覽器會彈出一個對話框，列出符合你指定過濾條件的USB設備（如果沒有過濾器，則列出所有可訪問的設備），用戶必須手動選擇一個設備并點擊“連接”。如果用戶拒絕，或者沒有選擇任何設備，你的代碼就無法繼續。最后，你只能獲取有限的、非敏感的信息。通過device對象，你可以獲取到設備的廠商ID（vendorId）、產品ID（productId）、產品名稱（productName）、序列號（serialNumber）等基本信息。至于更深層次、更私密的設備固件信息或者設備內部狀態，除非設備本身提供了特定的USB接口和命令來暴露這些數據，否則瀏覽器是無法直接讀取的。這確保了惡意網站無法通過WebUSB API來指紋識別用戶或竊取數據。
常見的挑戰與解決方案
在實際開發中，你可能會遇到一些讓人頭疼的問題，這很正常。WebUSB雖然強大，但它畢竟是運行在瀏覽器沙箱里的。
一個常見的挑戰是瀏覽器兼容性。雖然主流瀏覽器如chrome、edge已經很好地支持WebUSB，但firefox和safari的支持度就差一些，或者說，Safari目前根本不支持。這意味著你的應用可能無法在所有用戶的瀏覽器上工作。對此，我的建議是，在調用WebUSB API之前，先進行特性檢測：if (‘usb’ in navigator)。如果不支持，就優雅地降級，比如提示用戶使用支持的瀏覽器，或者提供一個桌面應用作為替代方案。
另一個挑戰是設備的驅動問題。WebUSB API是與設備的USB驅動進行交互的。如果用戶的操作系統沒有安裝正確的驅動，或者驅動有問題，即使WebUSB API本身工作正常，也可能無法成功連接或通信。這通常不是前端代碼能解決的，但你可以在用戶遇到連接問題時，引導他們檢查設備驅動。
再來，設備狀態管理也容易出問題。USB設備可能會在任何時候被拔出，或者進入休眠狀態。你需要監聽navigator.usb.onconnect和navigator.usb.ondisconnect事件來處理設備的連接和斷開。當設備斷開時，你正在進行的任何傳輸都會失敗，需要妥善處理錯誤。同時，記得在完成操作后調用device.close()來釋放設備資源，避免資源泄露。
WebUSB API在實際場景中的應用潛力
盡管有上述限制，WebUSB API的出現依然為Web應用打開了一扇通往硬件世界的大門，它的應用潛力是相當可觀的。這不再是那種只能在本地桌面應用里才能玩轉的領域了。
一個非常直接且有用的場景是固件更新。設想一下，你的智能硬件產品需要更新固件，過去用戶可能需要下載一個桌面應用，或者通過特定的燒錄工具來完成。現在，你可以直接在瀏覽器里提供一個網頁，用戶連接設備后，通過WebUSB API直接上傳固件文件到設備，完成更新。這極大地簡化了用戶操作，提升了用戶體驗。
另一個例子是教育和創客領域。許多可編程的微控制器（如Arduino、micro:bit）和機器人套件都通過USB與電腦通信。WebUSB使得基于Web的編程環境可以直接與這些硬件交互，實時上傳代碼、接收傳感器數據。這對于在線編程教學、遠程實驗等場景來說，簡直是革命性的。孩子們可以在瀏覽器里編寫代碼，然后直接“燒錄”到他們的機器人上，看到實時的效果，這比安裝復雜的ide要友好得多。
此外，特定專業設備的數據采集與控制也是一個亮點。比如，某些醫療設備、測量儀器或工業控制器，它們通過USB接口與計算機連接。WebUSB使得Web應用能夠直接從這些設備中讀取數據，或者發送控制指令。這為遠程監控、數據可視化和基于Web的設備管理提供了新的可能性。當然，這通常需要設備廠商的支持，因為你需要了解設備的USB協議規范才能進行有效的通信。
所以，雖然“用BOM獲取USB設備信息”這個說法在字面上有些誤導，但通過WebUSB API，我們確實能在瀏覽器里實現與USB設備的深度交互，這對于構建更強大的Web應用來說，無疑是一個重要的里程碑。
