有沒有辦法讓 Chrome “忘記”一個設備來測試 navigator.usb.requestDevice, navigator.serial.requestPort？

Question

我希望從使用WebUSB遷移到SerialAPI （這里很好地解釋了）。

當前代碼：

try {
    let device = await navigator.usb.requestDevice({
    filters: [{
            usbVendorId: RECEIVER_VENDOR_ID
        }]
    })
    this.connect(device)
} catch (error) {
    console.log(DEVICE_NAME + ': Permission Denied')
}

新代碼：

try {
    let device = await navigator.serial.requestPort({
    filters: [{
            usbVendorId: RECEIVER_VENDOR_ID
        }]
    })
    this.connect(device)
} catch (error) {
    console.log(DEVICE_NAME + ': Permission Denied')
}

新代碼似乎可以工作，但我認為這是因為瀏覽器已經通過舊代碼請求了設備。

我嘗試重新啟動 Chrome 並清除所有瀏覽歷史記錄。 甚至關閉了 USB 聲明頁面並使用另一個應用程序聲明了該設備（在此期間它返回DOMException: Unable to claim interface錯誤），但 Chrome 似乎不想再次詢問。 它只是愉快地使用先前的連接流式傳輸數據。

我希望使用 SerialAPI 可以避免與其他進程爭奪 USB，或者至少輸給它們。

更新

我忘記了：

Failed to execute 'requestPort' on 'Serial': "Must be handling a user gesture to show a permission request"

這是否意味着用戶需要使用按鈕通過 SerialUSB 連接到設備？ 我認為使用 WebUSB 我能夠使連接 window 自動彈出。

Answer 1

對於這兩個 API，如更新中所述，需要用戶手勢才能調用requestDevice()或requestPort()方法。 無法自動彈出此提示。 （如果存在錯誤，請告知 Chrome 團隊，以便我們修復它。）

通過 WebUSB API 和 Web 序列號 API 授予站點的權限當前單獨跟蹤，因此通過一個設備訪問設備的權限不會自動轉換為另一個。

目前沒有辦法以編程方式忘記設備權限。 這將需要已被放棄的navigator.permissions.revoke()方法。 但是，您可以通過在訪問站點時單擊地址欄中的“鎖定”圖標或轉到 chrome://settings/content/usbDevices（對於 USB 設備）和 chrome://settings/ 手動撤銷訪問設備的權限content/serialPorts（用於串行端口）。

Answer 2

要讓 Chrome “忘記”之前通過 navigator.usb.requestDevice API 配對的 WebUSB 設備：

0. 打開與您想忘記的設備配對的頁面
1. 點擊地址欄中的圖標
2. 單擊設備旁邊的 x。 如果未列出任何內容，則此 web 頁面沒有配對設備。

Answer 3

新代碼不起作用。 這似乎是因為 Chrome已經通過舊代碼與端口配對。 “新代碼”不可能起作用，因為正如 Kalido 的評論中所指出的，SerialAPI（由於其強大的功能）需要用戶手勢來連接。

我用來實際連接和獲取數據的代碼基本上是由 OP 中上述鏈接的幾部分組成的：

navigator.serial.addEventListener('connect', e => {
  // Add |e.target| to the UI or automatically connect.
  console.log("connected");
});

navigator.serial.addEventListener('disconnect', e => {
  // Remove |e.target| from the UI. If the device was open the disconnection can
  // also be observed as a stream error.
  console.log("disconnected");
});

console.log(navigator.serial);

document.addEventListener('DOMContentLoaded', async () => {

    const connectButton = document.querySelector('#connect') as HTMLInputElement;

    if (connectButton) {
        connectButton.addEventListener('click', async () => {
            try {
        
                // Request Keiser Receiver from the user.
                const port = await navigator.serial.requestPort({
                    filters: [{ usbVendorId: 0x2341, usbProductId: not_required }]
                });
            
                try {
                    // Open and begin reading.
                    await port.open({ baudRate: 115200 });
                
                } catch (e) {
                    console.log(e);
                }
                while (port.readable) {
                  const reader = port.readable.getReader();

                  try {
                    while (true) {
                      const { value, done } = await reader.read();
                      if (done) {
                        // Allow the serial port to be closed later.
                        reader.releaseLock();
                        break;
                      }
                      if (value) {
                        console.log(value);
                      }
                    }
                  } catch (error) {
                    // TODO: Handle non-fatal read error.
                    console.log(error);
                  }
                }
            } catch (e) {
              console.log("Permission to access a device was denied implicitly or explicitly by the user.");
              console.log(e);
              console.log(port);
            }
        }
}

設備特定的供應商和產品 ID 顯然會因設備而異。 在上面的示例中，我插入了一個 Arduino 供應商 ID。

它沒有回答如何讓 Chrome “忘記”的問題，但由於需要手勢，我不確定在使用 SerialAPI 時這是否相關。

希望有更多經驗的人能夠發布更多信息的答案。