WebCodecs Decoder

Decode and render H.264, H.265 and AV1 streams in Web browsers using WebCodecs API, the new Web standard for hardware-accelerated video decoding.

It's fast, uses less hardware resources, and supports more profiles and levels. However, it's only available in recent versions of Chrome and Safari.

npm

npm install @yume-chan/scrcpy-decoder-webcodecs

Yarn

yarn add @yume-chan/scrcpy-decoder-webcodecs

pnpm

pnpm add @yume-chan/scrcpy-decoder-webcodecs

Feature detection

To check if the WebCodecs API is available, you can check if VideoDecoder is defined:

const isSupported = globalThis.VideoDecoder !== undefined;

VideoDecoder.isConfigSupported is a static method that checks if a given codec configuration is supported.

It accepts a codec parameter string, for example "hev1.1.60.L153.B0.0.0.0.0.0" for H.265 and "av01.0.05M.08" for AV1.

const result = await VideoDecoder.isConfigSupported({
  codec: "hev1.1.60.L153.B0.0.0.0.0.0",
});
const isHevcSupported = result.supported === true;

You can decide which video codec to use based on the results.

Usage

The usage is same as the Tiny H264 decoder:

import { WebCodecsDecoder } from "@yume-chan/scrcpy-decoder-webcodecs";

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

videoPacketStream // from above
  .pipeTo(decoder.writable)
  .catch(() => {});

note

See Tiny H264 decoder usage for more information.

Microsoft Edge on Windows

By default, Chromium browsers uses FFMpeg internally for WebCodecs API. However, Microsoft Edge, when running on Windows, uses Media Foundation decoders instead.

Decoding H.265 requires the HEVC Video Extensions ($0.99) or HEVC Video Extensions from Device Manufacturer (free but not available anymore) app from Microsoft Store. But it has been reported that its output frames has incorrect sizes.

Upcoming changes

Incorrect H.265 frame sizes in Microsoft Edge will be fixed in the next release.

Decoding AV1 requires the AV1 Video Extension (free) app from Microsoft Store.