Prepare Server

Scrcpy server is a Java application that runs on Android devices. Tango is compatible with many versions of Scrcpy server, but it doesn't include the server binary in the package. You need to download or build the server binary yourself.

The server binary is subject to Apache License 2.0.

Download from official releases

You can download the official server binary from Scrcpy GitHub releases and copy into your project.

Import the server binary

Depends on your runtime, bundler and framework, you may need to consume server.bin differently.

For full-stack JavaScript frameworks (Next.js, Nuxt, Solid Start, etc.), usually there are two ways to include a binary file:

1. Put it in public folder, and reference it using a fixed URL (e.g. https://your-domain.com/server.bin)
2. Import it in a JavaScript source file and let the bundler handle it

We recommend the second approach, because it's more flexible, less error-prone, and has better cache control.

Assume you have downloaded the server binary to src/server.bin, and you want to embed it into your app:

Webpack 5

JavaScript

src/index.ts

const url = new URL("./server.bin", import.meta.url);
const server = await fetch(url).then((res) => res.arrayBuffer());

TypeScript

src/index.ts

const url = new URL("./server.bin", import.meta.url);
const server: ArrayBuffer = await fetch(url).then((res) => res.arrayBuffer());

Vite

JavaScript

src/index.ts

const url = new URL("./server.bin", import.meta.url);
const server = await fetch(url).then((res) => res.arrayBuffer());

TypeScript

src/index.ts

const url = new URL("./server.bin", import.meta.url);
const server: ArrayBuffer = await fetch(url).then((res) => res.arrayBuffer());

Node.js

JavaScript

src/index.ts

import fs from "fs/promises";

const url = new URL("./server.bin", import.meta.url);
const server = await fs.readFile(url);

TypeScript

src/index.ts

import fs from "fs/promises";

const url = new URL("./server.bin", import.meta.url);
const server: Buffer = await fs.readFile(url);

Use @yume-chan/fetch-scrcpy-server

@yume-chan/fetch-scrcpy-server package provides a script to download the server binary and save the version string automatically.

npm

npm i -D @yume-chan/fetch-scrcpy-server

Yarn

yarn add --dev @yume-chan/fetch-scrcpy-server

pnpm

pnpm add -D @yume-chan/fetch-scrcpy-server

Usage:

npx fetch-scrcpy-server <version>

info

Because the package name (@yume-chan/fetch-scrcpy-server) and script name (fetch-scrcpy-server) are different, npx will not work unless the package is installed.

For example:

npx fetch-scrcpy-server 2.1

The server binary is written to server.bin and the version is written to version.js in this package's root directory (in your node_modules).

Note for Scrcpy 2.2

Usually the version number is X.Y.Z, but for Scrcpy 2.2, due to a packaging error (from Scrcpy side), the server expects the version number to be v2.2 instead of just 2.2.

npx fetch-scrcpy-server 2.2 writes the version as 2.2, causing the server to fail to start. A workaround is added to the package that, by specifying the version as v2.2, the script will write v2.2 to the version file.

npx fetch-scrcpy-server v2.2

Importing this package will give you two variables:

• BIN: A URL to the server binary. It can be used in fetch or fs.readFile similar to the manual approach.
• VERSION: A string containing the downloaded server version. It's required when starting the server.

Webpack 5

JavaScript

import { BIN, VERSION } from "@yume-chan/fetch-scrcpy-server";

console.log(VERSION); // 2.1
const server = await fetch(BIN).then((res) => res.arrayBuffer());

TypeScript

import { BIN, VERSION } from "@yume-chan/fetch-scrcpy-server";

console.log(VERSION); // 2.1
const server: ArrayBuffer = await fetch(BIN).then((res) => res.arrayBuffer());

Vite

JavaScript

import { BIN, VERSION } from "@yume-chan/fetch-scrcpy-server";

console.log(VERSION); // 2.1
const server = await fetch(BIN).then((res) => res.arrayBuffer());

TypeScript

import { BIN, VERSION } from "@yume-chan/fetch-scrcpy-server";

console.log(VERSION); // 2.1
const server: ArrayBuffer = await fetch(BIN).then((res) => res.arrayBuffer());

Node.js

JavaScript

import fs from "fs/promises";
import { BIN, VERSION } from "@yume-chan/fetch-scrcpy-server";

console.log(VERSION); // 2.1
const server = await fs.readFile(BIN);

TypeScript

import fs from "fs/promises";
import { BIN, VERSION } from "@yume-chan/fetch-scrcpy-server";

console.log(VERSION); // 2.1
const server: Buffer = await fs.readFile(BIN);

Run the script automatically

After installing the package, you can add it to your package.json, so every time you run npm install, the script will be executed automatically.

package.json

{
  "name": "...",
  "devDependencies": {
    "@yume-chan/fetch-scrcpy-server": "^0.0.24"
  },
  "scripts": {
    "postinstall": "fetch-scrcpy-server 2.1"
  }
}

Build the server yourself

You can also build the server binary yourself. This is useful if you want to modify the server, or if you want to use the latest version from Scrcpy Git repository.

The easiest way is to use Android Studio.

1. Clone Scrcpy

   Shell

   $ git clone https://github.com/Genymobile/scrcpy.git

2. Open the root folder in Android Studio

3. (Optional) Change Build Variant to release from Build -> Select Build Variant menu item

4. Select Build -> Make Project menu item

The server binary will be written to server/build/outputs/apk/debug/server-debug.apk (debug variant) or server/build/outputs/apk/release/server-release-unsigned.apk (release variant).

note

Check Scrcpy documentation for more details on building both the client and server.