update now can connect adb but scrcpy still bug

client-electron/.eslintrc.cjs

@@ -28,5 +28,6 @@ module.exports = {
       { allowConstantExport: true },
     ],
     "@typescript-eslint/consistent-type-imports": "error",
+    "react-hooks/exhaustive-deps": "off",
   },
 }

client-electron/.prettierrc

@@ -5,5 +5,6 @@
   "bracketSpacing": true,
   "arrowParens": "avoid",
   "endOfLine": "lf",
-  "tabWidth": 2
+  "tabWidth": 2,
+  "proseWrap": "preserve"
 }

client-electron/electron/adb/adbDaemonUSB.ts

@@ -1,19 +0,0 @@
-// import type { AdbDaemonWebUsbDevice } from '@yume-chan/adb-daemon-webusb'
-// import { AdbDaemonWebUsbDeviceManager } from '@yume-chan/adb-daemon-webusb'
-import { webusb } from 'usb'
-
-// const WebUsb: WebUSB = new WebUSB({ allowAllDevices: true })
-// const Manager: AdbDaemonWebUsbDeviceManager = new AdbDaemonWebUsbDeviceManager(
-//   WebUsb
-// )
-
-export function getDevices() {
-  //   const devices: AdbDaemonWebUsbDevice[] = await Manager.getDevices()
-  //   if (!devices.length) {
-  //     alert('No device connected')
-  //   }
-
-  webusb.requestDevice({ filters: [] }).then(device => {
-    console.log(device)
-  })
-}

client-electron/src/components/Header.tsx

@@ -1,6 +1,6 @@
 const Header: React.FC = () => {
   return (
-    <header className="fixed bg-black w-full z-0 px-4 shadow-sm shadow-slate-500/40 pl-[20rem]">
+    <header className="fixed bg-black w-full z-40 px-4 shadow-sm shadow-slate-500/40 pl-[20rem]">
       <h2>Header</h2>
     </header>
   )

client-electron/src/hooks/useAdb.ts

@@ -1,3 +1,4 @@
+import { type Adb } from '@yume-chan/adb'
 import {
   type AdbDaemonWebUsbDevice,
   AdbDaemonWebUsbDeviceManager
@@ -5,14 +6,18 @@ import {
 import { create } from 'zustand'
 
 interface ADB {
+  adb: Adb | undefined
   manager: AdbDaemonWebUsbDeviceManager | undefined
   device: AdbDaemonWebUsbDevice | undefined
+  setAdb: (adb: Adb | undefined) => void
   setDevice: (device: AdbDaemonWebUsbDevice | undefined) => void
 }
 
 const useAdb = create<ADB>(set => ({
+  adb: undefined,
   manager: AdbDaemonWebUsbDeviceManager.BROWSER,
   device: undefined,
+  setAdb: adb => set({ adb }),
   setDevice: device => set({ device })
 }))
 

client-electron/src/layouts/MainLayout.tsx

@@ -33,7 +33,7 @@ const MainLayout = () => {
     <div>
       <Sidebar />
       <Header />
-      <main className="fixed pt-14 px-4 pl-[21rem]">
+      <main className="fixed pt-[5rem] pl-[21rem]">
         <Outlet />
       </main>
     </div>

client-electron/src/pages/Android.tsx

@@ -2,176 +2,172 @@ import { useShallow } from 'zustand/react/shallow'
 import { ADB_DEFAULT_DEVICE_FILTER } from '@yume-chan/adb-daemon-webusb'
 import AdbWebCredentialStore from '@yume-chan/adb-credential-web'
 import { Adb, AdbDaemonTransport } from '@yume-chan/adb'
-import useAdb from '../hooks/adb'
+import useAdb from '../hooks/useAdb'
 import type { AdbScrcpyVideoStream } from '@yume-chan/adb-scrcpy'
 import { AdbScrcpyClient, AdbScrcpyOptions2_1 } from '@yume-chan/adb-scrcpy'
 import { WebCodecsDecoder } from '@yume-chan/scrcpy-decoder-webcodecs'
 import {
   ScrcpyLogLevel1_18,
-  ScrcpyOptions2_1,
+  ScrcpyOptions2_2,
   ScrcpyVideoCodecId
 } from '@yume-chan/scrcpy'
-import { useState } from 'react'
-
-const ScreenStream: React.FC<{ child: HTMLCanvasElement }> = ({
-  child
-}: {
-  child: HTMLCanvasElement
-}) => {
-  return <div ref={ref => ref?.appendChild(child)}></div>
-}
+import { useCallback, useRef, useState } from 'react'
+import {
+  ReadableStream,
+  WritableStream,
+  Consumable,
+  DecodeUtf8Stream
+} from '@yume-chan/stream-extra'
+import { useBeforeUnload } from 'react-router-dom'
 
 const AndroidPage: React.FC = () => {
-  const { manager, device, setDevice } = useAdb(
+  const { adb, manager, device, setAdb, setDevice } = useAdb(
     useShallow(state => ({
+      adb: state.adb,
       manager: state.manager,
       device: state.device,
+      setAdb: state.setAdb,
       setDevice: state.setDevice
     }))
   )
 
-  const [decoder, setDecoder] = useState<WebCodecsDecoder | undefined>()
-  const [client, setClient] = useState<AdbScrcpyClient | undefined>()
-  const [adbClient, setAdbClient] = useState<Adb | undefined>(undefined)
-
-  function attachDevice() {
-    manager
-      ?.requestDevice({
+  async function createNewConnection() {
+    device?.raw.forget()
+    setDevice(undefined)
+    const selectedDevice = await manager?.requestDevice({
       filters: [
         {
           ...ADB_DEFAULT_DEVICE_FILTER,
-            vendorId: 1478
+          serialNumber: 'd'
         }
       ]
     })
-      .then(selectedDevice => {
+
     if (!selectedDevice) {
       return
     } else {
       setDevice(selectedDevice)
     }
-      })
-  }
 
-  function disConnectDevice() {
-    device?.raw.forget()
-    setDevice(undefined)
-  }
-
-  //   function reboot() {
-  //     device?.connect().then(connection => {
-  //       const credentialStore: AdbWebCredentialStore = new AdbWebCredentialStore()
-
-  //       AdbDaemonTransport.authenticate({
-  //         serial: device?.serial,
-  //         connection,
-  //         credentialStore: credentialStore
-  //       }).then(transport => {
-  //         const adb: Adb = new Adb(transport)
-
-  //         adb.power.reboot().then(() => {
-  //           console.log('reboot success')
-  //         })
-  //       })
-  //     })
-  //   }
-
-  async function scrcpyConnect() {
-    // const url = new URL('../bin/scrcpy-server.bin', import.meta.url)
-    // const server: ArrayBuffer = await fetch(url).then(res => res.arrayBuffer())
-
-    const connection = await device?.connect()
+    const connection = await selectedDevice.connect()
 
     const credentialStore: AdbWebCredentialStore = new AdbWebCredentialStore()
 
     const transport = await AdbDaemonTransport.authenticate({
-      serial: device!.serial,
-      connection: connection!,
+      serial: selectedDevice.serial,
+      connection: connection,
       credentialStore: credentialStore
     })
 
     const adb: Adb = new Adb(transport)
-    setAdbClient(adb)
-    // await AdbScrcpyClient.pushServer(
-    //   adb,
-    //   new ReadableStream({
-    //     start(controller) {
-    //       controller.enqueue(new Consumable(new Uint8Array(server)))
-    //       controller.close()
-    //     }
-    //   })
-    // )
+    setAdb(adb)
+  }
 
-    await adb.subprocess.spawn(
-      'CLASSPATH=/data/local/tmp/scrcpy-server.jar app_process / com.genymobile.scrcpy.Server 2.1'
+  const [client, setClient] = useState<AdbScrcpyClient | undefined>()
+  const [decoder, setDecoder] = useState<WebCodecsDecoder | undefined>()
+  const screenRef = useRef<HTMLDivElement>(null)
+
+  // when user close or refresh the page, close the adb connection
+  useBeforeUnload(
+    useCallback(() => {
+      client?.close()
+      adb?.close()
+      device?.raw.forget()
+    }, [])
   )
 
-    const scrcpyOption = new ScrcpyOptions2_1({
+  async function scrcpyConnect() {
+    const server: ArrayBuffer = await fetch(
+      new URL('../scrcpy/scrcpy_server_v2.2', import.meta.url)
+    ).then(res => res.arrayBuffer())
+
+    await AdbScrcpyClient.pushServer(
+      adb!,
+      new ReadableStream({
+        start(controller) {
+          controller.enqueue(new Consumable(new Uint8Array(server)))
+          controller.close()
+        }
+      })
+    )
+
+    const res = await adb!.subprocess.spawn(
+      'CLASSPATH=/data/local/tmp/scrcpy-server.jar app_process / com.genymobile.scrcpy.Server 2.2'
+    )
+
+    res.stdout.pipeThrough(new DecodeUtf8Stream()).pipeTo(
+      new WritableStream({
+        write(chunk) {
+          console.log(chunk)
+        }
+      })
+    )
+
+    const scrcpyOption = new ScrcpyOptions2_2({
       audio: false,
       maxFps: 60,
       control: false,
       video: true,
       logLevel: ScrcpyLogLevel1_18.Debug,
-      videoCodec: 'h264',
       stayAwake: true,
       cleanup: true
     })
     const _client = await AdbScrcpyClient.start(
-      adb,
+      adb!,
       '/data/local/tmp/scrcpy-server.jar',
-      '2.1',
+      '2.2',
       new AdbScrcpyOptions2_1(scrcpyOption)
     )
 
+    const videoStream: AdbScrcpyVideoStream | undefined =
+      await _client?.videoStream
+    const _decoder = new WebCodecsDecoder(ScrcpyVideoCodecId.H264)
+    screenRef.current?.appendChild(_decoder.renderer)
+    videoStream?.stream.pipeTo(_decoder.writable)
+    setDecoder(_decoder)
     setClient(_client)
   }
 
-  async function scrcpyStream() {
-    const videoStream: AdbScrcpyVideoStream | undefined =
-      await client?.videoStream
-    const _decoder = new WebCodecsDecoder(ScrcpyVideoCodecId.H264)
-    videoStream?.stream.pipeTo(_decoder.writable)
-    setDecoder(_decoder)
+  function disconnectAdb() {
+    client?.close()
+    adb?.close()
+    setClient(undefined)
+    setAdb(undefined)
   }
 
   function scrcpyDisconnect() {
+    decoder?.dispose()
     client?.close()
     setClient(undefined)
     setDecoder(undefined)
   }
 
   function rebootDevice() {
-    adbClient?.power.reboot()
+    adb?.power.reboot()
   }
 
   return (
-    <div>
-      <h1>This is Android Page!!!!!!!</h1>
-      {device ? <h2>Device: {device.name}</h2> : <h2>No Device</h2>}
-      <div className="flex flex-row">
-        <button className="btn btn-primary" onClick={attachDevice}>
-          Attach Device
+    <>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="flex flex-col">
+          <button
+            className="btn btn-primary"
+            onClick={adb ? disconnectAdb : createNewConnection}
+          >
+            {adb ? 'Disconnect' : 'Connect'}
           </button>
-        <button className="btn btn-primary" onClick={disConnectDevice}>
-          Disconnect Device
-        </button>
-        <button className="btn btn-primary" onClick={rebootDevice}>
-          Reboot Device
+          <button
+            className="btn btn-primary"
+            onClick={adb && !client ? scrcpyConnect : scrcpyDisconnect}
+          >
+            {client ? 'Disconnect' : 'Connect'}
           </button>
+          {adb ? <button onClick={rebootDevice}>Reboot</button> : ''}
         </div>
-      <div className="flex flex-row">
-        <button className="btn btn-primary" onClick={scrcpyConnect}>
-          Scrcpy Connect
-        </button>
-        <button className="btn btn-primary" onClick={scrcpyStream}>
-          Scrcpy Stream
-        </button>
-        <button className="btn btn-primary" onClick={scrcpyDisconnect}>
-          Scrcpy Disconnect
-        </button>
-      </div>
-      {decoder ? <ScreenStream child={decoder.renderer} /> : ''}
+        <div className="bg-white">{adb && device ? device.name : ''}</div>
       </div>
+      <div ref={screenRef}></div>
+    </>
   )
 }