I am trying to read data from RFID card reader connected to serial port using javascript’s Web Serial API. I was able to connect to my card reader but the data logged doesn’t seem to be from my console logs. How do I capture this data.
Here is the code that I am using.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Serial Data Reader</title>
<style>
body {
font-family: Arial, sans-serif;
}
#status {
font-size: 16px;
}
#serial-data {
font-size: 18px;
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<h1>Serial Data from COM Port</h1>
<button id="connectBtn">Connect to Device</button>
<p id="status">Not connected</p>
<p id="serial-data">Waiting for data...</p>
<script>
let port;
let reader;
let writer;
let inputDone;
let inputStream;
let outputStream;
const statusElement = document.getElementById('status');
const serialDataElement = document.getElementById('serial-data');
const connectButton = document.getElementById('connectBtn');
// Request permission to access the serial device and open it
async function connectToDevice() {
try {
port = await navigator.serial.requestPort(); // Request the user to select a serial port
console.log("Port selected:", port); // Log port information
await port.open({ baudRate: 9600 }); // Open the serial port (adjust baud rate if needed)
// Setup the input and output streams
inputStream = port.readable;
outputStream = port.writable;
inputDone = inputStream.getReader();
statusElement.textContent = `Connected to ${port.getInfo().usbVendorId}:${port.getInfo().usbProductId}`;
// Start reading data from the device
readSerialData();
} catch (err) {
console.error('Error accessing serial port:', err);
statusElement.textContent = 'Error: Could not connect to device';
}
}
// Read data from the serial port
async function readSerialData() {
try {
// Continuously read data from the device
while (true) {
const { value, done } = await inputDone.read(); // Read the data
if (done) {
console.log("Stream done");
break;
}
// Log the raw data for debugging
console.log("Raw data received:", value);
// Check if the value is valid, and decode if it's a valid Uint8Array
if (value && value.length > 0) {
const receivedData = new TextDecoder().decode(value); // Decode the data
console.log("Decoded data:", receivedData); // Log the decoded data
serialDataElement.textContent = receivedData.trim(); // Show the data in the frontend
} else {
console.warn("Empty data received");
}
}
} catch (err) {
console.error('Error reading from the serial port:', err);
statusElement.textContent = 'Error: Failed to read data';
}
}
// Set up the button to connect to the device
connectButton.addEventListener('click', () => {
statusElement.textContent = 'Connecting to device...';
connectToDevice();
});
</script>
</body>
</html>
The output:
The data logged seems to be different from the data I was looking for. When I scan the card the data that is logged in another website is “1256111915”(card number) but in my console it logs as “733994570”.