如何通过JavaScript的navigator.serial.requestPort()获取串口对象的用户提示字符串？

当你调用navigator.serial.requestPort()让用户选择串口设备后，可以通过串口对象的getInfo()方法获取设备相关信息，其中就包含截图里显示的用户友好名称（即你所说的"用户提示字符串"）。

实现步骤 #

1. 调用requestPort()请求用户授权并选择串口，该方法返回Promise，resolve后得到SerialPort对象。
2. 通过SerialPort.getInfo()获取设备信息，其中usbProductName或usbVendorName对应弹窗里显示的设备名称。

示例代码：

async function fetchSerialDeviceName() {
  try {
    // 请求用户选择串口
    const port = await navigator.serial.requestPort();
    // 获取设备信息
    const deviceInfo = port.getInfo();
    // 提取用户可见的设备名称
    const userFriendlyName = deviceInfo.usbProductName || deviceInfo.usbVendorName || "未知设备";
    console.log("用户提示的设备名称：", userFriendlyName);
    return userFriendlyName;
  } catch (error) {
    console.error("获取串口设备失败：", error);
  }
}

关键说明 #

• getInfo()返回的对象包含usbVendorId、usbProductId、usbVendorName、usbProductName属性，其中usbProductName就是弹窗中显示的设备名称（如你截图里的"USB Serial Device"）。
• 部分设备可能未提供usbProductName，此时可以用usbVendorName作为备选，或者显示默认文本。
• 该API仅支持HTTPS环境或localhost，且必须由用户主动触发（比如点击按钮），无法自动调用。

内容的提问来源于stack exchange，提问作者Jack Zhou