scr
@yume-chan/scrcpy
npm i @yume-chan/scrcpy
scr

@yume-chan/scrcpy

ADB in your browser

by Simon Chan

0.0.16 (see all)License:MITTypeScript:Built-In
npm i @yume-chan/scrcpy
Readme

@yume-chan/scrcpy

TypeScript implementation of Scrcpy client.

It uses the official Scrcpy server releases.

WARNING: The public API is UNSTABLE. If you have any questions, please open an issue.

Download Server Binary

This package has a script fetch-scrcpy-server to help you download the official server binary.

The server binary is subject to Apache License 2.0.

Usage:

$ npx fetch-scrcpy-server <version>

For example:

$ npx fetch-scrcpy-server 1.21

You can also add it to the postinstall script of your package.json so it will run automatically when you do npm install:

"scripts": {
    "postinstall": "fetch-scrcpy-server 1.21",
},

It will download the binary to bin/scrcpy and write the version string to bin/version.js. You can import the version string with

import SCRCPY_SERVER_VERSION from '@yume-chan/scrcpy/bin/version';

And import the server binary with file-loader (Webpack 4) or Asset Modules (Webpack 5).

Option versions

Scrcpy server has no backward compatibility on options input format. Currently the following versions are supported:

versionstype
1.16~1.17ScrcpyOptions1_16
1.18~1.20ScrcpyOptions1_18
1.21ScrcpyOptions1_21
1.22ScrcpyOptions1_22
1.23ScrcpyOptions1_23
1.24ScrcpyOptions1_24

You must use the correct type according to the server version.

Video stream

The data from onVideoData event is a raw H.264 stream. You can process it as you want, or use the following built-in decoders to render it in browsers:

  • WebCodecs decoder: Uses the WebCodecs API. The video stream will be decoded into VideoFrames and drawn on a 2D canvas.
  • TinyH264 decoder: TinyH264 compiles the old Android H.264 software decoder (now deprecated and removed) into WebAssembly, and wrap it in Web Worker to prevent blocking the main thread. The video stream will be decoded into YUV frames, then converted to RGB using a WebGL shader.
NameChromeFirefoxSafariPerformanceSupported H.264 profile/level
WebCodecs decoder94NoNoHigh with Hardware accelerationHigh level 5
TinyH264 decoder575211PoorBaseline level 4

TinyH264 decoder needs some extra setup:

  1. tinyh264, yuv-buffer and yuv-canvas packages are peer dependencies. You must install them separately.
  2. The bundler you use must support the new Worker(new URL('./worker.js', import.meta.url)) syntax. It's known to work with Webpack 5.

Example usage:

const client = new ScrcpyClient(adb);
const decoder = new WebCodecsDecoder(); // Or `new TinyH264Decoder()`
client.onSizeChanged(size => decoder.setSize(size));
client.onVideoData(data => decoder.feed(data));
client.start(serverPath, serverVersion, new ScrcpyOptionsX_XX({
    ...options,
    codecOptions: new CodecOptions({
        profile: decoder.maxProfile,
        level: decoder.maxLevel,
    }),
}));
document.body.appendChild(decoder.element);

Downloads/wk

38

GitHub Stars

498

LAST COMMIT

3mos ago

MAINTAINERS

1

CONTRIBUTORS

5

OPEN ISSUES

12

OPEN PRs

1
VersionTagPublished
0.0.16
latest
1mo ago
No alternatives found
No tutorials found
Add a tutorial