import { AdbClient , WebUsbTransport , Options , KeyStore , Stream } from 'wadb' ; let transport ; let adbClient ; const connectButton = document . querySelector ( '#connect' ) ! ; const disconnectButton = document . querySelector ( '#disconnect' ) ! ; const startButton = ( document . querySelector ( '#start' ) as HTMLButtonElement ) ! ; const stopButton = ( document . querySelector ( '#stop' ) as HTMLButtonElement ) ! ; const screenshotButton = ( document . querySelector ( '#screencapture' ) as HTMLButtonElement ) ! ; const video = ( document . querySelector ( '#video' ) as HTMLVideoElement ) ! ; const screenshot = ( document . querySelector ( '#screenshot' ) as HTMLImageElement ) ! ; const download = ( document . querySelector ( '#download' ) as HTMLAnchorElement ) ! ; const status = document . querySelector ( '#status' ) ! ; const options = { debug : true , useChecksum : false , dump : false , keySize : 2048 , } ; class MyKeyStore implements KeyStore { private keys : CryptoKeyPair [ ] = [ ] ; async loadKeys ( ) { return this . keys ; } async saveKey ( key ) { this . keys . push ( key ) ; console . log ( 'Saving Key' + key ) ; } } const keyStore = new MyKeyStore ( ) ; connectButton . addEventListener ( 'click' , async ( _ ) => { try { transport = await WebUsbTransport . open ( options ) ; adbClient = new AdbClient ( transport , options , keyStore ) ; status . textContent = 'Accept prompt on device' ; const adbConnectionInformation = await adbClient . connect ( ) ; status . textContent = 'Connected and ready' ; console . log ( 'Connected: ' , adbConnectionInformation ) ; connectButton . classList . toggle ( 'hidden' ) ; disconnectButton . classList . toggle ( 'hidden' ) ; startButton . removeAttribute ( 'disabled' ) ; screenshotButton . removeAttribute ( 'disabled' ) ; stopButton . removeAttribute ( 'disabled' ) ; } catch ( e ) { console . error ( 'Connection Failed: ' , e ) ; status . textContent = 'Failed to connect to a device' ; } } ) ; disconnectButton . addEventListener ( 'click' , async ( _ ) => { try { if ( adbClient ) { try { await adbClient . disconnect ( ) ; } catch ( e ) { console . log ( 'Error disconnecting ADB Client: ' , e ) ; } adbClient = null ; } if ( transport ) { await transport . close ( ) ; transport = null ; } connectButton . classList . toggle ( 'hidden' ) ; disconnectButton . classList . toggle ( 'hidden' ) ; startButton . disabled = true ; stopButton . disabled = true ; screenshotButton . disabled = true ; status . textContent = 'Connect to a device to start' ; } catch ( e ) { console . error ( 'Disconnecting Failed: ' , e ) ; } } ) ; const RECORD_FILE_NAME = '/sdcard/webadb-record-2.mp4' ; let shell = null ; startButton . addEventListener ( 'click' , async ( ) => { shell = await Stream . open ( adbClient ! , `shell:screenrecord ${ RECORD_FILE_NAME }` , options ) ; status . textContent = 'Recording...' ; stopButton . classList . toggle ( 'hidden' ) ; startButton . classList . toggle ( 'hidden' ) ; } ) ; stopButton . addEventListener ( 'click' , async ( ) => { status . textContent = 'Finishing Recording...' ; await shell ! . close ( ) ; status . textContent = 'Pulling video...' ; setTimeout ( async ( ) => { console . log ( 'Starting ADB Pull' ) ; const result = await adbClient ! . pull ( RECORD_FILE_NAME ) ; const videoSrc = window . URL . createObjectURL ( result ) ; video ! . src = videoSrc ; download ! . href = videoSrc ; download . download = 'recording.mp4' ; stopButton . classList . toggle ( 'hidden' ) ; startButton . classList . toggle ( 'hidden' ) ; screenshot . classList . add ( 'hidden' ) ; video . classList . remove ( 'hidden' ) ; download . classList . remove ( 'hidden' ) ; status . textContent = 'Done! Connected and ready' ; } , 2000 ) ; } ) ; screenshotButton . addEventListener ( 'click' , async ( ) => { status . textContent = 'Generating Screenshot...' ; await adbClient ! . shell ( 'screencap -p /sdcard/screenshot.png' ) ; status . textContent = 'Pulling image...' ; setTimeout ( async ( ) => { console . log ( 'Starting ADB Pull' ) ; const result = await adbClient ! . pull ( '/sdcard/screenshot.png' ) ; const imageSrc = window . URL . createObjectURL ( result ) ; screenshot . src = imageSrc ; download . href = imageSrc ; download . download = 'screenshot.png' ; download . classList . remove ( 'hidden' ) ; screenshot . classList . remove ( 'hidden' ) ; video . classList . add ( 'hidden' ) ; status . textContent = 'Done! Connected and ready' ; } , 2000 ) ; } ) ;