Simplest Vue demo/TS demo that only implements the scrcpy function

[meetAndEgg]

Is there a simplest Vue demo/ts demo that only implements the scrcpy function? I've checked the andbrowser, but it's using an early version of your libraries and most of your API have changed. I have also cloned your whole project and successfully run it, but I'm just starting to learn the front-end, and it's a bit difficult for me to understand your source code. I tried to find the way you run the scrcpy server in your code or the latest API but I failed. I only find ScrcpyClient in andbrowser that seems to start a scrcpy server but as I said, the api has changed.
Besides, the libraries installed by npm install xxx seem different in your code(for example, I tried using your snippet in README.md in @yume-chan/scrcpy, but my libraires don't have the export in your code).

[meetAndEgg]

Hello 作者大大. I have written these codes to implements scrcpy in my vue project.

<template>
    <div>
        <el-button @click="handleClick">connect</el-button>
        <div ref="div"></div>
    </div>
</template>
<script lang="ts" setup>
import { AdbDaemonWebUsbDevice } from '@yume-chan/adb-daemon-webusb'
import { Adb, AdbDaemonTransport } from '@yume-chan/adb'
import AdbWebCredentialStore from '@yume-chan/adb-credential-web'
import { AdbDaemonWebUsbDeviceManager } from '@yume-chan/adb-daemon-webusb'
import {
    DEFAULT_SERVER_PATH,
    ScrcpyOptions2_0,
    ScrcpyVideoCodecId,
} from '@yume-chan/scrcpy'
import { AdbScrcpyClient, AdbScrcpyOptions2_0 } from '@yume-chan/adb-scrcpy'
import SCRCPY_SERVER_VERSION from '@yume-chan/scrcpy/bin/version.js'
import { WebCodecsDecoder } from '@yume-chan/scrcpy-decoder-webcodecs'
import { onMounted, ref } from 'vue'
const CredentialStore = new AdbWebCredentialStore()
let backend: AdbDaemonWebUsbDevice | undefined
const div = ref()
const decoder = new WebCodecsDecoder(ScrcpyVideoCodecId.H264)
onMounted(() => {
    div.value.appendChild(decoder.renderer)
})

const handleClick = async () => {
    if (!AdbDaemonWebUsbDeviceManager.BROWSER) {
        alert('WebUSB is not supported in this browser')
        return
    }

    if (!backend) {
        backend = await AdbDaemonWebUsbDeviceManager.BROWSER.requestDevice()
        if (!backend) {
            alert('No device selected')
            return
        }
    }

    const connection = await backend.connect()

    // tell user to accept connection on device
    const device = new Adb(
        await AdbDaemonTransport.authenticate({
            serial: backend.serial,
            connection,
            credentialStore: CredentialStore,
        })
    )
    const result = await device.subprocess.spawnAndWait("echo 'Hello, World!'")
    console.log(result.stdout)
    const client = await AdbScrcpyClient.start(
        device,
        DEFAULT_SERVER_PATH,
        // If server binary was downloaded manually, must provide the correct version
        SCRCPY_SERVER_VERSION,
        new AdbScrcpyOptions2_0(
            new ScrcpyOptions2_0({
                audio: false,
                control: false,
            })
        )
    )
    const { metadata: videoMetadata, stream: videoPacketStream } =
        await client.videoStream
    videoPacketStream // from `@yume-chan/scrcpy`
        .pipeTo(decoder.writable)
}
</script>

But an error happens when I click the button:

client.ts:188  Uncaught (in promise) Error: scrcpy server exited prematurely
    at client.ts:188:27
    at async AdbScrcpyClient.start (client.ts:186:29)
    at async handleClick (scrcpy.vue:69:1)

Why it happens? I guess this is related to the fact that I didn't download the . jar file of Scrcpy, because I don't how to download it T_T ( I can't find a .jar file in scrcpy releases). But when I run your project, I also didn't download the . jar file but it still run sucessfully. I see you have provided a fetch-scrcpy-server library but I can't install it using npm install. I am a beginner and if I miss anything very basic, please forgive my ignorance. Thanks a lot!

[yume-chan]

I can't find a .jar file in scrcpy releases)

It's called scrcpy-server-v{VERSION}, without extension.

But when I run your project, I also didn't download the . jar file but it still run sucessfully.

It uses fetch-scrcpy-server:

ya-webadb/apps/demo/package.json

Line 6 in d91fef0

"postinstall": "fetch-scrcpy-server 2.0 && node scripts/manifest.mjs",

I see you have provided a fetch-scrcpy-server library but I can't install it using npm install

The fetch-scrcpy-server script is in the @yume-chan/scrcpy package, but you do have to add gh-release-fetch@3 package. See the related section in README: https://www.npmjs.com/package/@yume-chan/scrcpy#fetch-scrcpy-server

Note that it doesn't work in Vite because of a bug in Vite:

• Fetch an imported asset URL responds with wrong content in dev mode vitejs/vite#13636

const client = await AdbScrcpyClient.start(

You are also missing the step before this that transfers the server binary to device: https://www.npmjs.com/package/@yume-chan/adb-scrcpy#push-server-binary

client.ts:188  Uncaught (in promise) Error: scrcpy server exited prematurely

This error contains the raw command output. You can read the output field to know exactly what went wrong.

ya-webadb/libraries/adb-scrcpy/src/client.ts

Lines 64 to 71 in d91fef0

	export class AdbScrcpyExitedError extends Error {
	public output: string[];
	public constructor(output: string[]) {
	super("scrcpy server exited prematurely");
	this.output = output;
	}
	}

(It will be added to the document)

[meetAndEgg]

Thanks! I have successfully finished this demo with your help. But when I tried to integrate this code into one class, an error happens. Please help me again T_T.