Device Access

    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 associated with the device request.

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

    • index.html
    • main.js
    • renderer.js
    1. const {app, BrowserWindow} = require('electron')
    2. const path = require('path')
    4. function createWindow () {
    5.   const mainWindow = new BrowserWindow({
    6.     width: 800,
    7.     height: 600
    8.   })
    10.   mainWindow.webContents.on('select-bluetooth-device', (event, deviceList, callback) => {
    11.     event.preventDefault()
    12.     if (deviceList && deviceList.length > 0) {
    13.       callback(deviceList[0].deviceId)
    14.     } 
    15.   })
    17.   mainWindow.loadFile('index.html')
    18. }
    20. app.whenReady().then(() => {
    21.   createWindow()
    23.   app.on('activate', function () {
    24.     if (BrowserWindow.getAllWindows().length === 0) createWindow()
    25.   })
    26. })
    28. app.on('window-all-closed', function () {
    29.   if (process.platform !== 'darwin') app.quit()
    30. })
    1. async function testIt() {
    2.   const device = await navigator.bluetooth.requestDevice({
    3.     acceptAllDevices: true
    4.   })
    5.   document.getElementById('device-name').innerHTML = device.name || `ID: ${device.id}`
    6. }
    8. document.getElementById('clickme').addEventListener('click',testIt)

    Open in Fiddle

    • The can be used to select a HID device when a call to navigator.hid.requestDevice is made. Additionally the hid-device-added and 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.
    • can be used to disable HID access for specific origins.

    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:

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

    • index.html
    • main.js
    • renderer.js
    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    6.     <title>WebHID API</title>
    7.   </head>
    8.   <body>
    9.     <h1>WebHID API</h1>
    11.     <button id="clickme">Test WebHID</button>
    13.     <div id="granted-devices"></div>
    15.     <h3>HID devices automatically granted access via <i>select-hid-device</i></h3>
    16.     <div id="granted-devices2"></div>
    19.   </body>
    20. </html>
    1. const {app, BrowserWindow} = require('electron')
    2. const path = require('path')
    4. function createWindow () {
    5.   const mainWindow = new BrowserWindow({
    6.     width: 800,
    7.     height: 600
    8.   })
    10.   mainWindow.webContents.session.on('select-hid-device', (event, details, callback) => {
    11.     event.preventDefault()
    12.     if (details.deviceList && details.deviceList.length > 0) {
    13.       callback(details.deviceList[0].deviceId)
    14.     }
    15.   })
    17.   mainWindow.webContents.session.on('hid-device-added', (event, device) => {    
    18.     console.log('hid-device-added FIRED WITH', device)
    19.   })
    21.   mainWindow.webContents.session.on('hid-device-removed', (event, device) => {    
    22.     console.log('hid-device-removed FIRED WITH', device)
    23.   })
    25.   mainWindow.webContents.session.setPermissionCheckHandler((webContents, permission, requestingOrigin, details) => {
    26.     if (permission === 'hid' && details.securityOrigin === 'file:///') {
    27.       return true
    28.     }
    29.   })
    31.   mainWindow.webContents.session.setDevicePermissionHandler((details) => {
    32.     if (details.deviceType === 'hid' && details.origin === 'file://') {
    33.       return true
    34.     }
    35.   })
    37.   mainWindow.loadFile('index.html')
    38. }
    40. app.whenReady().then(() => {
    41.   createWindow()
    43.   app.on('activate', function () {
    44.     if (BrowserWindow.getAllWindows().length === 0) createWindow()
    45.   })
    46. })
    48. app.on('window-all-closed', function () {
    49.   if (process.platform !== 'darwin') app.quit()
    50. })

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

    • The serial-port-added and events on the Session can be used to handle devices being plugged in or unplugged during the navigator.serial.requestPort process.
    • ses.setDevicePermissionHandler(handler) can be used to provide default permissioning to devices without first calling for permission to devices via navigator.serial.requestPort. 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-serial-port event) and then read from that storage with setDevicePermissionHandler.
    • can be used to disable serial access for specific origins.

    This example demonstrates an Electron application that automatically selects serial devices through ses.setDevicePermissionHandler(handler) as well as demonstrating selecting the first available Arduino Uno serial device (if connected) through when the Test Web Serial button is clicked.

    • index.html
    • main.js
    • renderer.js
    1. <!DOCTYPE html>
    2. <html>
    3.     <meta charset="UTF-8">
    4.     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    5.     <title>Web Serial API</title>
    7.     <h1>Web Serial API</h1>
    9.     <button id="clickme">Test Web Serial API</button>
    11.     <p>Matching Arduino Uno device: <strong id="device-name""></strong></p>
    13.     <script src="./renderer.js"></script>
    14.   </body>
    15. </html>
    1. const {app, BrowserWindow} = require('electron')
    2. const path = require('path')
    4. function createWindow () {
    5.   const mainWindow = new BrowserWindow({
    6.     width: 800,
    7.     height: 600
    8.   })
    10.   mainWindow.webContents.session.on('select-serial-port', (event, portList, webContents, callback) => {
    11.     event.preventDefault()
    12.     if (portList && portList.length > 0) {
    13.       callback(portList[0].portId)
    14.     } else {
    15.       callback('') //Could not find any matching devices
    16.     }
    17.   })
    19.   mainWindow.webContents.session.on('serial-port-added', (event, port) => {
    20.     console.log('serial-port-added FIRED WITH', port)
    21.   })
    23.   mainWindow.webContents.session.on('serial-port-removed', (event, port) => {
    24.     console.log('serial-port-removed FIRED WITH', port)
    25.   })
    27.   mainWindow.webContents.session.setPermissionCheckHandler((webContents, permission, requestingOrigin, details) => {
    28.     if (permission === 'serial' && details.securityOrigin === 'file:///') {
    29.       return true
    30.     }
    31.   })
    33.   mainWindow.webContents.session.setDevicePermissionHandler((details) => {
    34.     if (details.deviceType === 'serial' && details.origin === 'file://') {
    35.       return true
    36.     }
    37.   })
    39.   mainWindow.loadFile('index.html')
    41.   mainWindow.webContents.openDevTools()
    42. }
    44. app.whenReady().then(() => {
    45.   createWindow()
    47.   app.on('activate', function () {
    48.     if (BrowserWindow.getAllWindows().length === 0) createWindow()
    49.   })
    50. })
    52. app.on('window-all-closed', function () {
    53.   if (process.platform !== 'darwin') app.quit()

    Open in Fiddle