Vanilla integration

[Maygician]

Need separate feature bundles, that are easy to integrate in a vanilla project

[Maygician]

Or I'd appreciate a few hints on how to make em into callable functions.

[yume-chan]

1. Install the core package @yume-chan/adb
2. Install a backend for connection and a credential store for creating/retrieving ADB keys.
   • For browser environment, @yume-chan/adb-backend-webusb provides WebUSB connection and @yume-chan/adb-credential-web provides key creation using WebCrypto and storage using LocalStorage.
   • For Node.js, there is no official backend and credential store yet.
3. Each backend initialize differently, with @yume-chan/adb-backend-webusb:
   • Use AdbWebUsbBackend.requestDevice() to request access to a new device
   • Use AdbWebUsbBackend.getDevices() to get list of connected and authorized devices
4. Create Adb instance by calling const adb = new Adb(backend)
5. Connect to device by calling adb.connect(credentialStore)
6. Invoke ADB commands by calling methods on adb

See https://github.com/yume-chan/ya-webadb/blob/4399fedff84229a1daf24d6aa62bd3168c19eabd/apps/demo/components/connect.tsx for example.

[yume-chan]

I'm not a Webpack expert. Looks like you are using a pretty old version of Webpack which doesn't understand class fields. And you are transforming JS files in node_modules with babel, which is usually unnecessary (for latest Webpack version) and causes slower compilation.

If you really want to use this setup, configure your babel to downlevel transform to a even older ES version to get rid of the class fields.

[JulesLecuir]

Thanks, I will check that out!

[dave-bvr]

@yume-chan Thanks for the library! It's working great for me via the demo link as well as on my localhost, building with rush. When I try to integrate it into an existing project (React, built with Vite) I'm experiencing some issues. I'm able to pair and connect to different Android devices using your adb-backend-webusb and adb-credential-web modules, but just trying to import { Adb } from '@yume-chan/adb' and then instantiate it, throws this error at runtime:

dispatcher.ts:65 Uncaught TypeError: Cannot read properties of undefined (reading 'readable')
    at new AdbPacketDispatcher (dispatcher.ts:65:20)
    at new Adb (adb.ts:176:27)
    at ListDevices.jsx:19:13
AdbPacketDispatcher @ dispatcher.ts:65
Adb @ adb.ts:176
(anonymous) @ ListDevices.jsx:19

I can provide more detail about my local setup if it would be helpful. Thanks again!

[yume-chan]

@dave-bvr From your error stack you passed undefined into new Adb. Also you should only call new Adb if your connection is already authenticated (or doesn't need authentication, for example when using with a debug build of ADB daemon), call Adb.authenticate instead. Without your exact code I can't predict where it goes wrong, please open a new issue with related code if you still can't get it to work.

[dave-bvr]

Thanks @yume-chan! I actually think I was going wrong by following the example here:

ya-webadb/apps/demo/components/connect.tsx

Line 133 in 4399fed

const device = new Adb(selectedBackend, logger.logger);

but using it with the latest version of the npm module (0.0.17) in which adb's constructor expects 4 arguments instead of two. I rolled back to 0.0.10 and it seems to be working now.

[adnanaga]

Do you have an example on how to implement only scrcpy with clickable control ? I’m only trying to use Webadb and scrcpy

…

On Apr 3, 2022, at 8:12 AM, Simon Chan ***@***.***> wrote:  @adnanaga Yes, the Scrcpy client implementation is also published to NPM: ***@***.***/scrcpy — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.