Electron中Web Bluetooth API无法列出全部蓝牙设备问题排查

• 使用Electron扫描周边活跃蓝牙设备，点击窗口按钮后控制台仅输出部分设备，目标设备未被扫描到，请教无法找到该设备的原因
• 确认Electron中不会弹出设备选择弹窗是否正常

代码/配置 #

renderer.js #

async function testIt() {
  const device = await navigator.bluetooth.requestDevice({
    acceptAllDevices: true
  })
  document.getElementById('device-name').innerHTML = device.name || `ID: ${device.id}`
}

document.getElementById('clickme').addEventListener('click',testIt)

main.js #

const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      enableBlinkFeatures: 'Bluetooth', // Enable Bluetooth features
      contextIsolation: false, // Set to false to enable direct access for demo purposes
      nodeIntegration: true,
    },
  })

  mainWindow.webContents.on('select-bluetooth-device', (event, deviceList, callback) => {
    event.preventDefault()
    if (deviceList && deviceList.length > 0) {
      console.log(deviceList);     
    } 
  })

  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

package.json #

{
  "name": "test_bt",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^31.2.1"
  }
}

index.html #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Web Bluetooth API</title>
  </head>
  <body>
    <h1>Web Bluetooth API</h1>

    <button id="clickme">Test Bluetooth</button>

    <p>Currently selected bluetooth device: <strong id="device-name"></strong></p>

    <script src="./renderer.js"></script>
  </body>
</html>

preload.js #

const { contextBridge, ipcRenderer } = require('electron/renderer')

contextBridge.exposeInMainWorld('electronAPI', {
  cancelBluetoothRequest: () => ipcRenderer.send('cancel-bluetooth-request'),
  bluetoothPairingRequest: (callback) => ipcRenderer.on('bluetooth-pairing-request', () => callback()),
  bluetoothPairingResponse: (response) => ipcRenderer.send('bluetooth-pairing-response', response)
})

额外信息 #

笔记本连接目标设备时的设备信息：

Driver Name: bth.inf
Class Guid: {e0cbf06c-cd8b-4647-bb8a-263b43f0f974}
Driver Date: 06/21/2006
Driver Version: 10.0.19041.4412
Driver Provider: Microsoft
Driver Section: BthGenericDevice.NT
Driver Rank: 0xFF2000
Matching Device Id: BTHENUM\GENERIC_DEVICE
Outranked Drivers: 
Device Updated: false
Parent Device: BTH\MS_BTHBRB\6&13dbeec2&0&1

Qt中可正常列出并连接设备的代码：

_btSocket = new bluetoothSocket();
_btSocket->connectToService(_btDeviceInfo->address(), QBluetoothUuid::ServiceClassUuid::SerialPort);

版本信息：

node -v: v20.12.2
electron: 31.2.1
npm -v: 10.5.0

问题解答 #

1. 目标设备无法被扫描到的原因 #

你的目标设备是经典蓝牙（基于SPP串口服务），而Electron依赖的Web Bluetooth API（基于Chrome实现）在Windows平台仅支持**BLE（低功耗蓝牙）**设备，不支持经典蓝牙的扫描与连接。

从Qt代码中QBluetoothUuid::ServiceClassUuid::SerialPort可以明确，该设备使用的是经典蓝牙的串口协议，这类设备不在Web Bluetooth API的支持范围内，因此无法被扫描到。

补充排查点：

• 若目标设备是BLE设备但未广播GATT服务UUID，可尝试在requestDevice配置中明确指定设备的服务UUID，提升扫描成功率；
• 确保目标设备处于可发现模式（Web Bluetooth对设备可发现性的要求比Qt更严格）。

2. Electron不弹出设备选择弹窗是否正常 #

这是代码主动设置的结果，并非默认行为。

在main.js的select-bluetooth-device事件监听中，你调用了event.preventDefault()，这直接阻止了Electron触发默认的系统蓝牙设备选择弹窗。默认情况下，调用navigator.bluetooth.requestDevice会自动弹出系统级的设备选择窗口。

若需要恢复弹窗，只需移除event.preventDefault()，或在处理设备列表后调用callback选择设备，示例如下：

mainWindow.webContents.on('select-bluetooth-device', (event, deviceList, callback) => {
  if (deviceList && deviceList.length > 0) {
    console.log(deviceList);
    // 选择第一个设备并返回
    callback(deviceList[0].deviceId);
  } else {
    callback(''); // 取消选择
  }
})

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