@yume-chan/scrcpy-decoder-tinyh264

Decode and render H.264 streams using TinyH264, the old Android H.264 software decoder (now deprecated and removed), compiled into WebAssembly and wrapped in a Web Worker.

The video stream will be decoded into YUV frames on CPU, then converted to RGB using a WebGL shader (using GPU). It's slow, but works on most browsers.

WARNING: The public API is UNSTABLE. Open a GitHub discussion if you have any questions.

Compatibility

| Chrome | Firefox | Safari | Performance | Supported H.264 profile/level | | ------ | ------- | ------ | ----------- | ----------------------------- | | 57 | 52 | 11 | Poor | Baseline level 4 |

Usage

The bundler you use must support the new Worker(new URL('./worker.js', import.meta.url)) syntax. It's known that Webpack 5 works.

Limit profile/level

Because it only supports Baseline level 4 codec, but many newer devices default to higher profiles/levels, you can limit it by using the codecOptions option:

new ScrcpyOptions1_24({
    codecOptions: new CodecOptions({
        profile: TinyH264Decoder.maxProfile,
        level: TinyH264Decoder.maxLevel,
    }),
});

However, it can fail on some very old devices that doesn't support even Baseline level 4 codec. You can retry without the codecOptions option if that happens.

Render the video

It draws frames onto decoder.renderer (a <canvas> element), you can insert it anywhere you want to display the video.

const decoder = new TinyH264Decoder();
document.body.appendChild(decoder.renderer);

videoPacketStream // from `@yume-chan/scrcpy`
    .pipeTo(decoder.writable)
    .catch(() => {});