Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix bluetooth support issue for chrome on android #4227

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

kikoqiu
Copy link

@kikoqiu kikoqiu commented Oct 26, 2024

Fix bluetooth support issue for chrome on android
Add usb otg serial support for chrome on android.

Bluetooth verified with speedybee bluetooth fc on android 14.
Serial polyfill works on android 11, fails on android 14.
The reason might be this. #4227 (comment)

Copy link

netlify bot commented Oct 26, 2024

Deploy Preview for origin-betaflight-app ready!

Name Link
🔨 Latest commit b11c321
🔍 Latest deploy log https://app.netlify.com/sites/origin-betaflight-app/deploys/673c3bda63b0fd0008982072
😎 Deploy Preview https://deploy-preview-4227.dev.app.betaflight.com
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@PSi86
Copy link

PSi86 commented Oct 26, 2024

Thanks for working on this! Samsung S21 Chrome Browser: App shows up but no serial devices are shown and clicking the "Connect" button does nothing.
Screenshot_20241026_151213_Chrome

@nerdCopter
Copy link
Member

nerdCopter commented Oct 26, 2024

same result as @PSi86
(using OTG cable)

@guowei681
Copy link

guowei681 commented Oct 27, 2024

I use Samsung TAB S8+ and the connection is OK
image
image
image
Using this configurator to connect to Other Bluetooth at the same time also works fine:
image
image
image
image
Under Windows, opening the connection through Google Chrome works fine
image
image
image

@kikoqiu
Copy link
Author

kikoqiu commented Oct 27, 2024

Thanks for working on this! Samsung S21 Chrome Browser: App shows up but no serial devices are shown and clicking the "Connect" button does nothing. Screenshot_20241026_151213_Chrome

@PSi86 @nerdCopter The original UI code has some issues for portrait mode on small screens. So just use landscape mode and the port select will display.
I think it might be better leave it for the author of the ui code.

src/js/protocols/bluetooth.js Outdated Show resolved Hide resolved
src/js/protocols/bluetooth.js Outdated Show resolved Hide resolved
src/js/protocols/bluetooth.js Outdated Show resolved Hide resolved
src/js/protocols/bluetooth.js Outdated Show resolved Hide resolved
src/js/protocols/bluetooth.js Outdated Show resolved Hide resolved
src/js/protocols/bluetooth.js Outdated Show resolved Hide resolved
src/js/utils/checkBrowserCompatibilty.js Outdated Show resolved Hide resolved
src/js/utils/checkBrowserCompatibilty.js Outdated Show resolved Hide resolved
@PSi86
Copy link

PSi86 commented Oct 28, 2024

Using Portrait mode or a bigger screen, indeed the device selector shows up and an stm32f405 is correctly detected when plugged in via USB. The request for permission to access the device is shown. Upon accepting this and then clicking "Connect" the button again nothing happens. Same behaviour on Samsung Galaxy S21 and Galaxy Tab S9 FE.
Screenshot_20241028_001036_Chrome

@kikoqiu
Copy link
Author

kikoqiu commented Oct 28, 2024

Using Portrait mode or a bigger screen, indeed the device selector shows up and an stm32f405 is correctly detected when plugged in via USB. The request for permission to access the device is shown. Upon accepting this and then clicking "Connect" the button again nothing happens. Same behaviour on Samsung Galaxy S21 and Galaxy Tab S9 FE. !

That's an issue. The serial usb polyfill works on my old android phone but fails on my new android 14 phone.
The problem i believe is because of this bug. https://issues.chromium.org/issues/40137537
Some driver claimed the serial usb interface. And the webserial polyfill failed to claim it anymore.

On my phone I have an workaround, by using a native app to open the serial port,and then close it.
After that,I'm able to connect to the port using pwa configurator on chrome.
It's not a good solution, so maybe I need to remove the serial polyfill.

The bluetooth is tested on android 14 with a speedybee bluetooth fc, and it works well.

and usb otg serial support for chrome on android.

Update src/js/protocols/bluetooth.js
Co-authored-by: Mark Haslinghuis <[email protected]>
@kikoqiu kikoqiu force-pushed the pr-bluetooth-on-android branch from db51820 to 8a51391 Compare October 28, 2024 11:36
Co-authored-by: Mark Haslinghuis <[email protected]>
@LoakAudio
Copy link

LoakAudio commented Oct 28, 2024

Hi all,
I've found this PR yesterday and I'm very interested as I own a Samsung A9+ 5g tablet (Android 14).
I've tested with a Speedybee V3 BT adapter on a Flywoo F405 AIO and connection is ok. I can modify settings, save & restart.
Sometimes, playing with the 3D model in the "Setup" tab leads to a freeze of the 3D quad. Most of the time changing tab makes it working again, sometimes I have to close BFC, unplug the adapter and connect again. I don't know if this is related to this PR.

Comment on lines 145 to 147
if(this.port.addEventListener){
this.port.addEventListener("disconnect", this.handleDisconnect.bind(this));
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a bug? Why make this conditional as this removes disconnect event listener if true.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in the polyfill, the SerialPort class doesn't implement EventTarget, and the disconnent event will only be emitted by the Serial class.
In the configurator code, webSerial listens on both, however, it might not be essential. as the gui code would call disconnect in the disconnect event callback from the Serial class.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

without the test, there will be an exception thrown here.

src/js/webSerial.js Outdated Show resolved Hide resolved
@haslinghuis
Copy link
Member

This fix works for some Android devices but not all of them.

Was thinking capacitor was going to fix mobile usage of the app - but needs attention.

Co-authored-by: Mark Haslinghuis <[email protected]>
@kikoqiu
Copy link
Author

kikoqiu commented Nov 3, 2024

This fix works for some Android devices but not all of them.

Was thinking capacitor was going to fix mobile usage of the app - but needs attention.

Yes, this fix gets some limitations.
1, it only works with chrome on Android.
2, the serial polyfill only woroks on old android devices, new devices need some tricks to work.
3, bluetooth should work on most android devices.

might be a candicate for the pwa. but should be better to use a native wrapper.

@McGiverGim
Copy link
Member

This solution was tried here before #3948 and adding the library in the package file (here it has been manually added). But as you say it only works for some old devices and I think remember it didn't implement all the events we use so is not a complete solution neither.

We decided to go for a "complete" solution, with the use of Capacitor #3955 so the correct solution is to search for a library compatible with Capacitor and use it when executing in Android.

Was in my TODO list but I've no time at this moment.

@kikoqiu
Copy link
Author

kikoqiu commented Nov 4, 2024

This solution was tried here before #3948 and adding the library in the package file (here it has been manually added). But as you say it only works for some old devices and I think remember it didn't implement all the events we use so is not a complete solution neither.

We decided to go for a "complete" solution, with the use of Capacitor #3955 so the correct solution is to search for a library compatible with Capacitor and use it when executing in Android.

Was in my TODO list but I've no time at this moment.

The bluetooth part works well on chrome on android. So I think it's not bad to make it available for the PWA, and leave the full feature as a Capacitor app.

@McGiverGim
Copy link
Member

If bluetooth works in all / the major part of Android devices, it's ok for me to add this. I suppose that we will need to add the library later to be compatible with Apple devices, but this is a war for the future.

But for usb / serial devices, I think we need to add Capacitor for Android.

Copy link

sonarcloud bot commented Nov 19, 2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

7 participants