From 7a7e98e00de46d7ad51f3dbe352b230ae128d73e Mon Sep 17 00:00:00 2001 From: Rafal Polak Date: Wed, 25 Jun 2025 20:02:08 +0000 Subject: [PATCH 1/6] DDL-812 - Recognize real serial when connecting a device using webADB interface --- packages/demo/src/routes/zerotier.tsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/demo/src/routes/zerotier.tsx b/packages/demo/src/routes/zerotier.tsx index 1cfa309..88b6a0f 100644 --- a/packages/demo/src/routes/zerotier.tsx +++ b/packages/demo/src/routes/zerotier.tsx @@ -8,6 +8,7 @@ import React, { useCallback, useEffect, useReducer, useRef, useState } from 'rea import {delay, withDisplayName} from '../utils'; import {RouteProps} from './type'; import {fetchZTApk} from "./zerotier/fetchzt"; +import AdbWebUsbBackend from '@yume-chan/adb-backend-webusb'; import {Adb} from "@yume-chan/adb"; import {AdbEventLogger, Connect} from "../components"; @@ -170,6 +171,25 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ // await getDumpSys(serial, baseUrl + '/dumpsys'); }, [device]); + /** + * Before add remote device to our platform we need to find the serial of the device + * This method use two approaches to get this using the adb web usb backend and adb shell + */ + const handleRealDeviceSerial = useCallback(async (deviceIp) => { + const usbDevice = await AdbWebUsbBackend.requestDevice() + console.log('IP of the device which want to connect: ', deviceIp); + console.log('APPROACH #1 USB DEVICE'); + console.log('usbDevice --> ', usbDevice) + console.log('usbDevice serial --> ', usbDevice?.serial); + console.log('usbDevice name --> ', usbDevice?.name); + console.log('APPROACH #2 ADB BACKEND'); + console.log('device serial --> ', device?.backend.serial); + console.log('device name --> ', device?.backend.name); + console.log('APPROACH #3 ADB SHELL'); + const shellSerial = await device!.exec('getprop ro.boot.serialno'); + console.log('shell serial --> ', shellSerial); + }, []) + const handleJoin = useCallback(async () => { setRunning(true); setRunningJoin(true); @@ -224,6 +244,7 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ else await delay(1000); } setZeroTierIp(ip); + await handleRealDeviceSerial(ip); setRunningWait(false); setRunning(false); From 0d3b38da1973cabe0c55ae7d839b95d2ab045e06 Mon Sep 17 00:00:00 2001 From: Rafal Polak Date: Wed, 25 Jun 2025 20:02:08 +0000 Subject: [PATCH 2/6] DDL-812 - Recognize real serial when connecting a device using webADB interface --- packages/demo/src/routes/zerotier.tsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/demo/src/routes/zerotier.tsx b/packages/demo/src/routes/zerotier.tsx index 1cfa309..af3c2a8 100644 --- a/packages/demo/src/routes/zerotier.tsx +++ b/packages/demo/src/routes/zerotier.tsx @@ -8,6 +8,7 @@ import React, { useCallback, useEffect, useReducer, useRef, useState } from 'rea import {delay, withDisplayName} from '../utils'; import {RouteProps} from './type'; import {fetchZTApk} from "./zerotier/fetchzt"; +import AdbWebUsbBackend from '@yume-chan/adb-backend-webusb'; import {Adb} from "@yume-chan/adb"; import {AdbEventLogger, Connect} from "../components"; @@ -170,6 +171,25 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ // await getDumpSys(serial, baseUrl + '/dumpsys'); }, [device]); + /** + * Before add remote device to our platform we need to find the serial of the device + * This method use two approaches to get this using the adb web usb backend and adb shell + */ + const handleRealDeviceSerial = useCallback(async (deviceIp) => { + // const usbDevice = await AdbWebUsbBackend.requestDevice() + console.log('IP of the device which want to connect: ', deviceIp); + // console.log('APPROACH #1 USB DEVICE'); + // console.log('usbDevice --> ', usbDevice) + // console.log('usbDevice serial --> ', usbDevice?.serial); + // console.log('usbDevice name --> ', usbDevice?.name); + console.log('APPROACH #2 ADB BACKEND'); + console.log('device serial --> ', device?.backend.serial); + console.log('device name --> ', device?.backend.name); + console.log('APPROACH #3 ADB SHELL'); + const shellSerial = await device!.exec('getprop ro.boot.serialno'); + console.log('shell serial --> ', shellSerial); + }, []) + const handleJoin = useCallback(async () => { setRunning(true); setRunningJoin(true); @@ -224,6 +244,7 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ else await delay(1000); } setZeroTierIp(ip); + await handleRealDeviceSerial(ip); setRunningWait(false); setRunning(false); From a25ae3317986a28e42358b53089edba5c7a98eeb Mon Sep 17 00:00:00 2001 From: Rafal Polak Date: Wed, 25 Jun 2025 20:02:08 +0000 Subject: [PATCH 3/6] DDL-812 - Recognize real serial when connecting a device using webADB interface --- packages/demo/src/routes/zerotier.tsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/demo/src/routes/zerotier.tsx b/packages/demo/src/routes/zerotier.tsx index 1cfa309..b2fadc4 100644 --- a/packages/demo/src/routes/zerotier.tsx +++ b/packages/demo/src/routes/zerotier.tsx @@ -8,6 +8,7 @@ import React, { useCallback, useEffect, useReducer, useRef, useState } from 'rea import {delay, withDisplayName} from '../utils'; import {RouteProps} from './type'; import {fetchZTApk} from "./zerotier/fetchzt"; +import AdbWebUsbBackend from '@yume-chan/adb-backend-webusb'; import {Adb} from "@yume-chan/adb"; import {AdbEventLogger, Connect} from "../components"; @@ -170,6 +171,25 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ // await getDumpSys(serial, baseUrl + '/dumpsys'); }, [device]); + /** + * Before add remote device to our platform we need to find the serial of the device + * This method use two approaches to get this using the adb web usb backend and adb shell + */ + const handleRealDeviceSerial = useCallback(async (deviceIp) => { + // const usbDevice = await AdbWebUsbBackend.requestDevice() + console.log('IP of the device which want to connect: ', deviceIp); + // console.log('APPROACH #1 USB DEVICE'); + // console.log('usbDevice --> ', usbDevice) + // console.log('usbDevice serial --> ', usbDevice?.serial); + // console.log('usbDevice name --> ', usbDevice?.name); + console.log('APPROACH #2 ADB BACKEND'); + console.log('device serial --> ', device?.backend.serial); + console.log('device name --> ', device?.backend.name); + console.log('APPROACH #3 ADB SHELL'); + const shellSerial = await device!.exec('getprop ro.boot.serialno'); + console.log('shell serial --> ', shellSerial); + }, [device]) + const handleJoin = useCallback(async () => { setRunning(true); setRunningJoin(true); @@ -224,6 +244,7 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ else await delay(1000); } setZeroTierIp(ip); + await handleRealDeviceSerial(ip); setRunningWait(false); setRunning(false); From 27214cd9e96b7d48b1766feeb65003260d8b4bc4 Mon Sep 17 00:00:00 2001 From: Rafal Polak Date: Wed, 25 Jun 2025 20:02:08 +0000 Subject: [PATCH 4/6] DDL-812 - Recognizes real serial when connecting a device using webADB interface - Sent prepared object to a Smartdust platform --- packages/demo/src/routes/zerotier.tsx | 44 ++++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/packages/demo/src/routes/zerotier.tsx b/packages/demo/src/routes/zerotier.tsx index 1cfa309..a54cd57 100644 --- a/packages/demo/src/routes/zerotier.tsx +++ b/packages/demo/src/routes/zerotier.tsx @@ -8,6 +8,7 @@ import React, { useCallback, useEffect, useReducer, useRef, useState } from 'rea import {delay, withDisplayName} from '../utils'; import {RouteProps} from './type'; import {fetchZTApk} from "./zerotier/fetchzt"; +import AdbWebUsbBackend from '@yume-chan/adb-backend-webusb'; import {Adb} from "@yume-chan/adb"; import {AdbEventLogger, Connect} from "../components"; @@ -135,11 +136,30 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ }), body: JSON.stringify(devicePropSend) }).catch(err => { - console.error('Not able to get send device property: ', err); + console.error('Not able to send retrieved device property: ', err); }); return response },[device]) + const sentDeviceInfo = useCallback(async (serial, ip, apiUrl) => { + let deviceInfoToSend = { + "serial": serial, + "email": email, + "ip": ip + } + let response = await fetch(apiUrl, { + method: 'POST', + headers: new Headers({ + 'Content-Type': 'application/json; charset=UTF-8' + }), + body: JSON.stringify(deviceInfoToSend) + }).catch(err => { + console.error('Not able to send device info: ', err); + }); + console.log("Received device info:", response); + return response + }, [device]) + const getDumpSys = useCallback(async (serial, apiUrl) => { const dumpSys = await device!.exec('dumpsys > /data/local/tmp/dumpsys.txt 2>&1; cat /data/local/tmp/dumpsys.txt'); await device!.exec('rm /data/local/tmp/dumpsys.txt'); @@ -170,6 +190,27 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ // await getDumpSys(serial, baseUrl + '/dumpsys'); }, [device]); + /** + * Before add remote device to our platform we need to find the serial of the device + * This method use two approaches to get this using the adb backend and adb shell + */ + const handleRealDeviceSerial = useCallback(async (deviceIp) => { + // const usbDevice = await AdbWebUsbBackend.requestDevice() + console.log('IP of the device which want to connect: ', deviceIp); + // console.log('APPROACH #1 USB DEVICE'); + // console.log('usbDevice --> ', usbDevice) + // console.log('usbDevice serial --> ', usbDevice?.serial); + // console.log('usbDevice name --> ', usbDevice?.name); + console.log('APPROACH #2 ADB BACKEND'); + console.log('device serial --> ', device?.backend.serial); + console.log('APPROACH #3 ADB SHELL'); + const adbBackendSerial = device?.backend.serial; + const shellSerial = await device!.exec('getprop ro.boot.serialno'); + console.log('shell serial --> ', shellSerial); + const serial = (typeof adbBackendSerial !== 'undefined' ? adbBackendSerial : shellSerial); + await sentDeviceInfo(serial, deviceIp, baseUrl + '/info'); + }, [device]) + const handleJoin = useCallback(async () => { setRunning(true); setRunningJoin(true); @@ -224,6 +265,7 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ else await delay(1000); } setZeroTierIp(ip); + await handleRealDeviceSerial(ip); setRunningWait(false); setRunning(false); From 094d5c6d88a4b34c8bdb31dc37a09aed69faa311 Mon Sep 17 00:00:00 2001 From: Rafal Polak Date: Wed, 25 Jun 2025 20:02:08 +0000 Subject: [PATCH 5/6] DDL-812 - Recognize real serial when connecting a device using webADB interface - Sent a prepared object to a Smartdust platform - Adjust troubleshooting page (hide at the beginning) --- packages/demo/src/routes/zerotier.tsx | 93 +++++++++++++++++++++------ 1 file changed, 73 insertions(+), 20 deletions(-) diff --git a/packages/demo/src/routes/zerotier.tsx b/packages/demo/src/routes/zerotier.tsx index 1cfa309..88e9f77 100644 --- a/packages/demo/src/routes/zerotier.tsx +++ b/packages/demo/src/routes/zerotier.tsx @@ -1,6 +1,6 @@ import { Checkbox, - DefaultButton, + DefaultButton, PrimaryButton, ProgressIndicator, TextField } from '@fluentui/react'; @@ -8,6 +8,7 @@ import React, { useCallback, useEffect, useReducer, useRef, useState } from 'rea import {delay, withDisplayName} from '../utils'; import {RouteProps} from './type'; import {fetchZTApk} from "./zerotier/fetchzt"; +import AdbWebUsbBackend from '@yume-chan/adb-backend-webusb'; import {Adb} from "@yume-chan/adb"; import {AdbEventLogger, Connect} from "../components"; @@ -33,6 +34,7 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ const [device, setDevice] = useState(); const [isGetProp, setIsProp] = useState(false); + const [isTroubleshooting, setIsTroubleshooting] = useState(false); const [autoAdvance, setAutoAdvance] = useState(true); @@ -135,11 +137,30 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ }), body: JSON.stringify(devicePropSend) }).catch(err => { - console.error('Not able to get send device property: ', err); + console.error('Not able to send retrieved device property: ', err); }); return response },[device]) + const sentDeviceInfo = useCallback(async (serial, ip, apiUrl) => { + let deviceInfoToSend = { + "serial": serial, + "email": email, + "ip": ip + } + let response = await fetch(apiUrl, { + method: 'POST', + headers: new Headers({ + 'Content-Type': 'application/json; charset=UTF-8' + }), + body: JSON.stringify(deviceInfoToSend) + }).catch(err => { + console.error('Not able to send device info: ', err); + }); + console.log("Received device info:", response); + return response + }, [device]) + const getDumpSys = useCallback(async (serial, apiUrl) => { const dumpSys = await device!.exec('dumpsys > /data/local/tmp/dumpsys.txt 2>&1; cat /data/local/tmp/dumpsys.txt'); await device!.exec('rm /data/local/tmp/dumpsys.txt'); @@ -170,6 +191,27 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ // await getDumpSys(serial, baseUrl + '/dumpsys'); }, [device]); + /** + * Before add remote device to our platform we need to find the serial of the device + * This method use two approaches to get this using the adb backend and adb shell + */ + const handleRealDeviceSerial = useCallback(async (deviceIp) => { + // const usbDevice = await AdbWebUsbBackend.requestDevice() + console.log('IP of the device which want to connect: ', deviceIp); + // console.log('APPROACH #1 USB DEVICE'); + // console.log('usbDevice --> ', usbDevice) + // console.log('usbDevice serial --> ', usbDevice?.serial); + // console.log('usbDevice name --> ', usbDevice?.name); + console.log('APPROACH #2 ADB BACKEND'); + console.log('device serial --> ', device?.backend.serial); + console.log('APPROACH #3 ADB SHELL'); + const adbBackendSerial = device?.backend.serial; + const shellSerial = await device!.exec('getprop ro.boot.serialno'); + console.log('shell serial --> ', shellSerial); + const serial = (typeof adbBackendSerial !== 'undefined' ? adbBackendSerial : shellSerial); + await sentDeviceInfo(serial, deviceIp, baseUrl + '/info'); + }, [device]) + const handleJoin = useCallback(async () => { setRunning(true); setRunningJoin(true); @@ -224,6 +266,7 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ else await delay(1000); } setZeroTierIp(ip); + await handleRealDeviceSerial(ip); setRunningWait(false); setRunning(false); @@ -255,6 +298,14 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ setRunning(false); }, [device]); + const handleTroubleshooting = () => { + if (isTroubleshooting) { + setIsTroubleshooting(false); + } else { + setIsTroubleshooting(true); + } + } + return ( <>

Prerequisites

@@ -354,24 +405,26 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ -

Troubleshooting

-
    -
  • How do I enable USB Debugging?
    • - -
  • "Unable to claim interface" during step 1
    • -
    • You probably have an adb server running on your PC. Try running adb kill-server in the terminal. If that doesn't work, ask the SmartDust team for help.
    -
  • Connecting in step 1 takes forever
    • -
    • You may need to reset USB Debugging. Disconect the cable from the device. Enter developer settings and turn off USB Debugging. - Then, click on "Revoke USB debugging authorizations. Turn on USB Debugging back again and try connecting again. -
    -
  • VPN app is Offline
    • -
    • Your device might be offline. Turn on WiFi and make sure you are connected to a network.
    -
  • Problems with the VPN app
    • -
      -
    • Use the button below to uninstall the app and go back to step 2
      • -
      • -
    -
+
+ Troubleshooting + {isTroubleshooting && (
    +
  • How do I enable USB Debugging?
    • + +
  • "Unable to claim interface" during step 1
    • +
    • You probably have an adb server running on your PC. Try running adb kill-server in the terminal. If that doesn't work, ask the SmartDust team for help.
    +
  • Connecting in step 1 takes forever
    • +
    • You may need to reset USB Debugging. Disconect the cable from the device. Enter developer settings and turn off USB Debugging. + Then, click on "Revoke USB debugging authorizations. Turn on USB Debugging back again and try connecting again. +
    +
  • VPN app is Offline
    • +
    • Your device might be offline. Turn on WiFi and make sure you are connected to a network.
    +
  • Problems with the VPN app
    • +
      +
    • Use the button below to uninstall the app and go back to step 2
      • +
      • +
    +
)} +
); }); From 1e2b445f82b95b9c9d5d7deaf9cbe68fd547d7f6 Mon Sep 17 00:00:00 2001 From: Rafal Polak Date: Wed, 25 Jun 2025 20:02:08 +0000 Subject: [PATCH 6/6] DDL-812 - Recognize real serial when connecting a device using webADB interface - Sent a prepared object to a Smartdust platform - Adjust troubleshooting page (hide at the beginning) --- packages/demo/src/routes/zerotier.tsx | 82 ++++++++++++++++++++------- 1 file changed, 62 insertions(+), 20 deletions(-) diff --git a/packages/demo/src/routes/zerotier.tsx b/packages/demo/src/routes/zerotier.tsx index 1cfa309..a0d34be 100644 --- a/packages/demo/src/routes/zerotier.tsx +++ b/packages/demo/src/routes/zerotier.tsx @@ -1,6 +1,6 @@ import { Checkbox, - DefaultButton, + DefaultButton, PrimaryButton, ProgressIndicator, TextField } from '@fluentui/react'; @@ -8,6 +8,7 @@ import React, { useCallback, useEffect, useReducer, useRef, useState } from 'rea import {delay, withDisplayName} from '../utils'; import {RouteProps} from './type'; import {fetchZTApk} from "./zerotier/fetchzt"; +import AdbWebUsbBackend from '@yume-chan/adb-backend-webusb'; import {Adb} from "@yume-chan/adb"; import {AdbEventLogger, Connect} from "../components"; @@ -33,6 +34,7 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ const [device, setDevice] = useState(); const [isGetProp, setIsProp] = useState(false); + const [isTroubleshooting, setIsTroubleshooting] = useState(false); const [autoAdvance, setAutoAdvance] = useState(true); @@ -135,11 +137,29 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ }), body: JSON.stringify(devicePropSend) }).catch(err => { - console.error('Not able to get send device property: ', err); + console.error('Not able to send retrieved device property: ', err); }); return response },[device]) + const sentDeviceInfo = useCallback(async (serial, ip, apiUrl) => { + let deviceInfoToSend = { + "serial": serial, + "email": email, + "ip": ip + } + let response = await fetch(apiUrl, { + method: 'POST', + headers: new Headers({ + 'Content-Type': 'application/json; charset=UTF-8' + }), + body: JSON.stringify(deviceInfoToSend) + }).catch(err => { + console.error('Not able to send device info: ', err); + }); + return response + }, [device]) + const getDumpSys = useCallback(async (serial, apiUrl) => { const dumpSys = await device!.exec('dumpsys > /data/local/tmp/dumpsys.txt 2>&1; cat /data/local/tmp/dumpsys.txt'); await device!.exec('rm /data/local/tmp/dumpsys.txt'); @@ -170,6 +190,17 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ // await getDumpSys(serial, baseUrl + '/dumpsys'); }, [device]); + /** + * Before add a remote device to our platform, we need to find the serial of the device + * This method uses two approaches to get this using the adb backend and adb shell + */ + const handleRealDeviceSerial = useCallback(async (deviceIp) => { + const adbBackendSerial = device?.backend.serial; + const shellSerial = await device!.exec('getprop ro.boot.serialno'); + const serial = (typeof adbBackendSerial !== 'undefined' ? adbBackendSerial : shellSerial); + await sentDeviceInfo(serial, deviceIp, baseUrl + '/info'); + }, [device]) + const handleJoin = useCallback(async () => { setRunning(true); setRunningJoin(true); @@ -224,6 +255,7 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ else await delay(1000); } setZeroTierIp(ip); + await handleRealDeviceSerial(ip); setRunningWait(false); setRunning(false); @@ -255,6 +287,14 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ setRunning(false); }, [device]); + const handleTroubleshooting = () => { + if (isTroubleshooting) { + setIsTroubleshooting(false); + } else { + setIsTroubleshooting(true); + } + } + return ( <>

Prerequisites

@@ -354,24 +394,26 @@ export const ZeroTier = withDisplayName('ZeroTier')(({ -

Troubleshooting

-
    -
  • How do I enable USB Debugging?
    • - -
  • "Unable to claim interface" during step 1
    • -
    • You probably have an adb server running on your PC. Try running adb kill-server in the terminal. If that doesn't work, ask the SmartDust team for help.
    -
  • Connecting in step 1 takes forever
    • -
    • You may need to reset USB Debugging. Disconect the cable from the device. Enter developer settings and turn off USB Debugging. - Then, click on "Revoke USB debugging authorizations. Turn on USB Debugging back again and try connecting again. -
    -
  • VPN app is Offline
    • -
    • Your device might be offline. Turn on WiFi and make sure you are connected to a network.
    -
  • Problems with the VPN app
    • -
      -
    • Use the button below to uninstall the app and go back to step 2
      • -
      • -
    -
+
+ Troubleshooting + {isTroubleshooting && (
    +
  • How do I enable USB Debugging?
    • + +
  • "Unable to claim interface" during step 1
    • +
    • You probably have an adb server running on your PC. Try running adb kill-server in the terminal. If that doesn't work, ask the SmartDust team for help.
    +
  • Connecting in step 1 takes forever
    • +
    • You may need to reset USB Debugging. Disconect the cable from the device. Enter developer settings and turn off USB Debugging. + Then, click on "Revoke USB debugging authorizations. Turn on USB Debugging back again and try connecting again. +
    +
  • VPN app is Offline
    • +
    • Your device might be offline. Turn on WiFi and make sure you are connected to a network.
    +
  • Problems with the VPN app
    • +
      +
    • Use the button below to uninstall the app and go back to step 2
      • +
      • +
    +
)} +
); });