Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I access the new Serial API on Google Chrome Beta 77+?

I would like to use the new Serial API on Chrome Beta (version 77+). However, it's unclear to me how to reference it.

I have built a Chrome App that can do serial communication, but apparently Google is discontinuing Chrome Apps. The Platform Status for Chrome suggests that the Serial API is available for Beta and Dev/Canary, but chrome.serial is undefined when I have typed it into the console.

Here is some functioning code from my Chrome App - it would be great to be able to re-use it for the web app:

let serialSettings = {
    bitrate: 115200,
    dataBits: 'eight',
    parityBit: 'no',
    stopBits: 'one',
    ctsFlowControl: false
};

function start() {
  portSelect = document.getElementById('portSelect');
  document.getElementById('disconnectButton').addEventListener("click", disconnectButtonHandler);
  chrome.serial.getDevices(function(devices) {
    buildPortSelect(devices) 
    openSelectedPort();
  });
};

//Leaving out buildPortSelect for brevity

function openSelectedPort() {
  let portSelect = document.getElementById('portSelect');
  let selectedPort = portSelect.options[portSelect.selectedIndex].value;
  let connectionInfoDisplay = document.getElementById('connectionInfoDisplay');
  for (let i = 0; i < state.eligiblePorts.length; i++) {
    if (selectedPort == state.eligiblePorts[i].path) {
      connectionInfoDisplay.innerText = "Connected to: " + selectedPort;
      chrome.serial.connect(selectedPort, serialSettings, onConnect);
      break;
    }
  }
}

let onConnect = function(connectionInfo) {
   // The serial port has been opened. Save its id to use later.
  connectionId = connectionInfo.connectionId;
}

start();

I would like to be able to use chrome.serial.getDevices() and chrome.serial.connect() as before, but these don't work. Is there an alternative syntax?

like image 385
eric02138 Avatar asked Aug 21 '19 15:08

eric02138


1 Answers

I found a few issues with your code:

  • To access the serial property, instead of chrome.serial, use navigator.serial
  • The snippet below compiles, however, due to what I assume to be security restriction of 'StackSnippet' service, we are not able to simulate navigator.serial usage completely.

let serialSettings = {
  bitrate: 115200,
  dataBits: "eight",
  parityBit: "no",
  stopBits: "one",
  ctsFlowControl: false
};

function start() {
  var portSelect = document.getElementById("portSelect");
  portSelect.addEventListener("click", async e => {
    e.preventDefault();
    console.log("Selecting port");
    // Request a port/device from user
    const port = await navigator.serial.requestPort();

    // Open and begin reading.
    await port.open({
      baudrate: 115200
    });

    const reader = port.in.getReader();
    while (true) {
      const { done, data } = await reader.read();
      if (done) break;
      console.log(data);
    }
  });

  document.getElementById("disconnectButton").addEventListener("click", e => {
    e.preventDefault();
    console.log("Clicked disconnect");
  });

  navigator.serial.getPorts(function(devices) {
    buildPortSelect(devices);
    openSelectedPort();
  });
}

//Leaving out buildPortSelect for brevity

function openSelectedPort() {
  let portSelect = document.getElementById("portSelect");
  let selectedPort = portSelect.options[portSelect.selectedIndex].value;
  let connectionInfoDisplay = document.getElementById("connectionInfoDisplay");
  for (let i = 0; i < state.eligiblePorts.length; i++) {
    if (selectedPort == state.eligiblePorts[i].path) {
      connectionInfoDisplay.innerText = "Connected to: " + selectedPort;
      navigator.serial.connect(selectedPort, serialSettings, onConnect);
      break;
    }
  }
}

const onConnect = function(connectionInfo) {
  // The serial port has been opened. Save its id to use later.
  connectionId = connectionInfo.connectionId;
};

start();
<html>

<body>
  <button id="portSelect" type="button">Select a port</button>
  <div id="connectionInfoDisplay">Connection Information</div>
  <button id="disconnectButton" type="button">Disconnect</button>
</body>

</html>
like image 148
Peter Avatar answered Sep 30 '22 07:09

Peter