Static web serial Polyfill NPM example please.

[hpssjellis]

@reillyeon @scheib

Can someone please post a static webpage demo that uses this polyfill npm from https://www.npmjs.com/package/web-serial-polyfill?activeTab=readme

I can't test my code very well unless I can get a base webpage working.

[hpssjellis]

So I found this for the webSerial Terminal program

https://googlechromelabs.github.io/serial-terminal/?polyfill

but I get this error. It does ask for access to the device, but gives the error failed to execute "claimInterface" I will look at the code and see what I can do with this.

[reillyeon]

It looks like you're using Chrome on Android. You are probably on a device that ships with the USB CDC-ACM driver enabled and so the kernel has claimed the interface but since Android doesn't provide any API for applications to actually use that driver it's not helpful. You could confirm this by capturing an Android bug report and extracting the kernel log. Can you tell me what Android device model this is? I have heard from developers running into this problem but not encountered it myself.

Chromium issue 1099521 tracks implementing an allowlist for interface classes where we will automatically try to take the interface away from any built-in drivers when a site requests that we claim the interface.

[hpssjellis]

Thanks for the reply @reillyeon I will look into getting the Android bug report. I use many Arduino's so I will see if any of the other ones work or if any other android phones work with them.

My Phone is a Samsung Galaxy S22 Ultra.

and I mainly work with the $115 usd Arduino PortentaH7 or the new $14 usd Seeedstudio XIAO esp32S3

WebSerial Android polyfill is an important part of bringing machine learning to these devices for the classroom. I will see what else I can do.

My testing site is at

https://hpssjellis.github.io/webMLserial/public/a06-android/index.html

[hpssjellis]

@reillyeon you are correct!

A pixel version 7 phone works fine. So it isn't my webpage or my Arduino code, it is my phone. That explains why everything worked a while ago and doesn't work now, I upgraded my phone. Dang!

So what now? Is there an app that disables the USB CDC-ACM driver so it can be claimed ? Do I submit the issue to https://bugs.chromium.org/p/chromium/issues/detail?id=1099521 and then wait for an update to Android chrome? I guess I can get an old phone to continue working on my project.

for linux this looks like an option https://stackoverflow.com/questions/47695160/failed-to-claim-interface-0-device-or-resource-busy/47724582#47724582

not sure if there is an android equivalent.

I had a problem with a device and found the usb_modeswitch command useful. Given the vendor and product id the device can be reset. E.g.:

usb_modeswitch -v 0x1d50 -p 0x60e3 --reset-usb

I have seen lists of product and vendor ID's I will have to go look for them.

Here is a link to one webpage about vendor and product id's

http://www.linux-usb.org/usb.ids

2341  Arduino SA
    0001  Uno (CDC ACM)
    0010  Mega 2560 (CDC ACM)
    0036  Leonardo Bootloader
    003b  Serial Adapter (CDC ACM)
    003d  Due Programming Port
    003e  Due
    003f  Mega ADK (CDC ACM)
    0042  Mega 2560 R3 (CDC ACM)
    0043  Uno R3 (CDC ACM)
    0044  Mega ADK R3 (CDC ACM)
    0045  Serial R3 (CDC ACM)
    0049  ISP
    8036  Leonardo (CDC ACM, HID)
    8038  Robot Control Board (CDC ACM, HID)
    8039  Robot Motor Board (CDC ACM, HID)

I can't seem to find anything for my Seeedstudio XIAO esp32s3 or for that mtter the PortentaH7n but it probably uses one of the other ocdes.

[reillyeon]

You'll need to wait for a Chrome update. Please comment on the Chromium issue so we can keep track of how many developers are affected by this issue.

[hpssjellis]

Done @reillyeon thanks for making this polyfill code, the issues are out of your control. I will find a working phone and move on with the rest of my project.

It would still be really useful to have a simply made, static webpage that does both webSerial and this polyfill using the npm you made. If you are interested I could submit a PR of a starting point with my page here, I could strip out the extras for my project and just have a basic Arduino connection webpage with Arduino sketch.

[reillyeon]

I'm thinking about removing the demo page from this repo and directing developers to the serial terminal project instead, and making its use of the polyfill more obvious.

[hpssjellis]

I'm thinking about removing the demo page from this repo and directing developers to the serial terminal project instead, and making its use of the polyfill more obvious.

@reillyeon The web serial terminal program at https://googlechromelabs.github.io/serial-terminal/?polyfill is a pain to have to change the url for desktop or Android. Is there any way it can be coded to auto switch to polyfill when navigator.serial is not detected, such as the code I use below?

document.getElementById('connectButton').addEventListener('click', () => {
  if (navigator.serial) {
    connectSerial();
  } else {
    document.getElementById('myDiv01').innerHTML = 'Web Serial API not supported. Switching to Polyfill<br>'
    myPoly();
  }
});