how to use the beta webserial api that uses window.navigator API?

Ask the community
,
1

Hello.
Just getting started here at wix and velo.
Intention: Press a button to show available serial ports (using native webserial api). I have a project which works fine and uses webserial api. Migrate that and use it with wix system.

Note: Never used wix or velo before.

Intended workflow:

  1. Press a button. show available serial ports. (how to?)

  2. Select a serial port.

  3. When selected it opens the serial port.

Note: I have enabled web-serial api in my browser and it is supported.

I usually use the below code snippet to get the list of serial ports, which appears on the corner of my own webpage written in js (It uses window.navigator api)

export function serialBtn_click(event) {
    console.log("from HOME + Serial btn clicked!")

    serialBtnState = !serialBtnState;
    if(serialBtnState == true){
        $w('#serialBtn').label = 'OPENING ...'
        $w('#serialBtn').style.backgroundColor = "#6E6E6E"

        if (navigator.serial) {
            console.log('[SERIAL BUTTON PRESSED] Checking Web Serial Support...');
            console.log('Web Serial API Supported 🤗');
            
            connectSerial();
        }else{
            console.log('Web Serial API not supported ! 🧐');
        }
    }else{
        $w('#serialBtn').label = 'CONNECT'
        $w('#serialBtn').style.backgroundColor = "#000000"
    }
}

let port;
const defaultVID = 0x0403;
const customVID = 0x2BD3;
var filterVID;

async function connectSerial() {
    try {
        port = await navigator.serial.requestPort();
        // ... TBD next steps
    }catch (error) {
        console.log("Didn't connect to anything 💔");
        // serialConnected = false;
    }
}

First is how to use something as a replacement for:

port = await navigator.serial.requestPort();

In wix, to get the serial port list?
Is there an equivalent for window.navigator in wix velo?