Skip to main content

Device Access

Like Chromium based browsers, Electron provides access to device hardware through web APIs. For the most part these APIs work like they do in a browser, but there are some differences that need to be taken into account. The primary difference between Electron and browsers is what happens when device access is requested. In a browser, users are presented with a popup where they can grant access to an individual device. In Electron APIs are provided which can be used by a developer to either automatically pick a device or prompt users to pick a device via a developer created interface.

Web Bluetooth API#

The Web Bluetooth API can be used to communicate with bluetooth devices. In order to use this API in Electron, developers will need to handle the select-bluetooth-device event on the webContents associated with the device request.

Exemplo#

This example demonstrates an Electron application that automatically selects the first available bluetooth device when the Test Bluetooth button is clicked.

const {app, BrowserWindow} = require('electron')const path = require('path')
function createWindow () {  const mainWindow = new BrowserWindow({    width: 800,    height: 600  })
  mainWindow.webContents.on('select-bluetooth-device', (event, deviceList, callback) => {    event.preventDefault()    if (deviceList && deviceList.length > 0) {      callback(deviceList[0].deviceId)    }   })
  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()})
Open in Fiddle

WebHID API#

The WebHID API can be used to access HID devices such as keyboards and gamepads. Electron provides several APIs for working with the WebHID API:

  • The select-hid-device event on the Session can be used to select a HID device when a call to navigator.hid.requestDevice is made. Additionally the hid-device-added and hid-device-removed events on the Session can be used to handle devices being plugged in or unplugged during the navigator.hid.requestDevice process.
  • ses.setDevicePermissionHandler(handler) can be used to provide default permissioning to devices without first calling for permission to devices via navigator.hid.requestDevice. Additionally, the default behavior of Electron is to store granted device permision through the lifetime of the corresponding WebContents. If longer term storage is needed, a developer can store granted device permissions (eg when handling the select-hid-device event) and then read from that storage with setDevicePermissionHandler.
  • ses.setPermissionCheckHandler(handler) can be used to disable HID access for specific origins.

Blocklist#

By default Electron employs the same blocklist used by Chromium. If you wish to override this behavior, you can do so by setting the disable-hid-blocklist flag:

app.commandLine.appendSwitch('disable-hid-blocklist')

Exemplo#

This example demonstrates an Electron application that automatically selects HID devices through ses.setDevicePermissionHandler(handler) and through select-hid-device event on the Session when the Test WebHID button is clicked.

const {app, BrowserWindow} = require('electron')const path = require('path')
function createWindow () {  const mainWindow = new BrowserWindow({    width: 800,    height: 600  })    mainWindow.webContents.session.on('select-hid-device', (event, details, callback) => {    event.preventDefault()    if (details.deviceList && details.deviceList.length > 0) {      callback(details.deviceList[0].deviceId)    }  })
  mainWindow.webContents.session.on('hid-device-added', (event, device) => {        console.log('hid-device-added FIRED WITH', device)  })
  mainWindow.webContents.session.on('hid-device-removed', (event, device) => {        console.log('hid-device-removed FIRED WITH', device)  })
  mainWindow.webContents.session.setPermissionCheckHandler((webContents, permission, requestingOrigin, details) => {    if (permission === 'hid' && details.securityOrigin === 'file:///') {      return true    }  })
  mainWindow.webContents.session.setDevicePermissionHandler((details) => {    if (details.deviceType === 'hid' && details.origin === 'file://') {      return true    }  })    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()})
Open in Fiddle

Web Serial API#

The Web Serial API can be used to access serial devices that are connected via serial port, USB, or Bluetooth. In order to use this API in Electron, developers will need to handle the select-serial-port event on the Session associated with the serial port request.

There are several additional APIs for working with the Web Serial API:

Exemplo#

This example demonstrates an Electron application that automatically selects the first available Arduino Uno serial device (if connected) through select-serial-port event on the Session when the Test Web Serial button is clicked.

const {app, BrowserWindow} = require('electron')const path = require('path')
function createWindow () {  const mainWindow = new BrowserWindow({    width: 800,    height: 600  })    mainWindow.webContents.session.on('select-serial-port', (event, portList, webContents, callback) => {    event.preventDefault()    if (portList && portList.length > 0) {      callback(portList[0].portId)    } else {      callback('') //Could not find any matching devices    }  })
  mainWindow.webContents.session.on('serial-port-added', (event, port) => {    console.log('serial-port-added FIRED WITH', port)  })
  mainWindow.webContents.session.on('serial-port-removed', (event, port) => {    console.log('serial-port-removed FIRED WITH', port)  })
  mainWindow.webContents.session.setPermissionCheckHandler((webContents, permission, requestingOrigin, details) => {    if (permission === 'serial' && details.securityOrigin === 'file:///') {      return true    }  })
  mainWindow.webContents.session.setDevicePermissionHandler((details) => {    if (details.deviceType === 'serial' && details.origin === 'file://') {      return true    }  })    mainWindow.loadFile('index.html')
  mainWindow.webContents.openDevTools()}
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()})
Open in Fiddle