title: Read USB serial port data with web serial api in javascript
body: <p>-I work on temperature and humidity reading device development. we have our own temperature and humidity reader device(USB-based COM(serial) port device). currently, we fetch the with standalone software which uses a virtual com port drive to communicate with the device. but, I want to read these recorded data in my web app using &quot;web serial API&quot;.</p>
  <p>when writing code to read that data, I am not able to fetch the data. I am following &quot;<a href="https://web.dev/serial/" rel="nofollow noreferrer">https://web.dev/serial/</a>&quot; this article for reading data.</p>
  <p>-should I use a virtual comport driver with web serial API to read the data or not?</p>
  <p>so what can I do for reading usb com port device data with &quot;web serial API&quot;.</p>
  <p>--this is my code for write and read data.</p>
  <pre><code>&lt;script&gt;
  class LineBreakTransformer {
        constructor() {
          this.chunks = &quot;&quot;;
        }
  
        transform(chunk, controller) {
          this.chunks += chunk;
          const lines = this.chunks.split(&quot;\r\n&quot;);
          this.chunks = lines.pop();
          lines.forEach((line) =&gt; controller.enqueue(line));
        }
  
        flush(controller) {
          controller.enqueue(this.chunks);
        }
    }
  async function onStartButtonClick() {
      try {
        const port = await navigator.serial.requestPort();
        console.log(&quot;req&quot;);
        await port.open({ baudRate: 19200,       
                          dataBits: 8,
                          stopBits: 1,
                          parity: &quot;none&quot;,
                          flowControl: &quot;none&quot;,
      });
      const {usbProductId, usbVendorId}=port.getInfo();
      document.getElementById(&quot;sdata&quot;).innerHTML=usbProductId+&quot; &quot;+ &quot; &lt;br&gt;&quot;+usbVendorId;
      
        console.log(&quot;opanning&quot;);
          
                          
  
                  const writer = port.writable.getWriter();
                   console.log(&quot;true is&quot;);
                  const data = new Uint8Array([0x32]); 
              
                  await writer.write(data);
                  console.log(&quot;succ&quot;);
  
          
              writer.releaseLock();
  
        while (port.readable) {
          
          const textDecoder = new TextDecoderStream();
          const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
          const reader = textDecoder.readable
          .pipeThrough(new TransformStream(new LineBreakTransformer()))
          .getReader();
          console.log(&quot;portreadable&quot;);
  
          try {
            while (true) {
              const { value, done } = await reader.read();
              if (done) {
                console.log(&quot;Canceled&quot;);
                break;
              }
              console.log(&quot;tryfun&quot;);
              console.log(value);
            }
          } catch (error) {
            console.log(&quot;Error: Read&quot;);
            console.log(error);
          } finally {
            reader.releaseLock();
          }
        }
      } catch (error) {
        console.log(&quot;Error: Open&quot;);
        console.log(error);
      }
  
       
    }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/gVnel.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gVnel.png" alt="enter image description here" /></a></p>