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?
I found a few issues with your code:
chrome.serial
, use navigator.serial
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With