Blog

How to test WebCodecs support in a browser demo

Check whether a browser can use WebCodecs, confirm the codecs your demo needs, and catch secure-context or device limits before presenting.

Michael ReedHardware tests Tests 4 min read

Your WebCodecs demo works on your computer, but you do not know whether it will run in the browser or on the device you plan to present. A browser can expose the WebCodecs API while still lacking support for the exact codec or settings your demo needs.

Start by checking the browser, then test the API and the specific encoder or decoder configuration your demo uses. Browser Info reports the browser version, engine, codecs and supported features. A small check on your demo page can confirm whether its WebCodecs configuration is usable.

Check WebCodecs support

  1. Open Browser Info in the same browser you will use for the demo. Note the browser version and engine, then review its supported features and codec information. These details help you identify which environment you tested.
  2. Open the demo page itself and make sure it is served from a secure context, usually an HTTPS address. For local development, localhost is generally treated as secure. A page opened directly from a file may behave differently from the hosted demo.
  3. In the demo page's developer console, check whether the API your demo uses exists. For video encoding, enter typeof VideoEncoder. For video decoding, use typeof VideoDecoder. The result should be function. Check audio separately with typeof AudioEncoder or typeof AudioDecoder if your demo uses those APIs.
  4. Ask the browser about the exact configuration the demo needs. For example, to check a VP8 video encoder configuration, run VideoEncoder.isConfigSupported({codec: "vp8", width: 640, height: 480, bitrate: 1000000, framerate: 30}).then(result => console.log(result.supported, result.config)). Substitute your demo's codec, dimensions and other relevant settings. If the API is missing, this command will not work.
  5. Run the actual demo from start to finish. Confirm that frames are encoded or decoded, the output plays as expected, and there are no errors in the console. Repeat the checks in the browser and on the device you expect your audience to use.

What the result means

The API check returns function

The browser exposes that WebCodecs interface in the page you tested. This does not confirm that every codec, profile, frame size or bitrate is supported. Continue by checking the configuration your demo actually requests.

The API check returns undefined

That WebCodecs interface is not available to the page in this environment. Check that you tested the demo page, not a different tab, and confirm that it is running in a secure context. If both are correct, the browser or its current configuration may not provide that API.

The API exists, but the configuration reports false

The browser has the API, but it does not report support for that particular configuration. A different codec, profile, resolution or bitrate may work, but only change these values if your demo can use the alternative. Browser Info's codec list can offer clues, but a general codec listing is not proof that a specific WebCodecs configuration is supported.

The configuration reports support, but the demo still fails

The browser accepts the configuration, but that alone does not prove the whole workflow works. The demo may provide frames in the wrong format, use an incorrect codec string, mishandle errors, or expect more performance than the device can deliver. Check the console and test real input and output.

How to fix a failed check

  1. Test the right page. Run the API checks in the same tab and origin as the demo. A feature available on one page may not be available in a different context.
  2. Use a secure context. Serve a hosted demo over HTTPS, or use localhost for local testing. Reload the page after changing how it is served.
  3. Update the browser. Install an available browser update, restart it, then check the version again with Browser Info. Repeat the test on the actual presentation device, since its browser may be managed or older.
  4. Match the configuration to the demo. Check the codec string, dimensions, bitrate and frame rate against the values your code requests. Test a smaller frame size only as a diagnostic, not as proof that the original settings will work.
  5. Handle unsupported cases in the demo. Use the support result before configuring an encoder or decoder. Show a clear message or provide another supported workflow when the required configuration is unavailable.
  6. Test on the target hardware. If support is reported but processing is too slow or fails during a longer run, compare with another device. API support does not guarantee smooth real-time performance.

Why one green check is not enough

WebCodecs provides separate interfaces for tasks such as video encoding, video decoding, audio encoding and audio decoding. A browser may expose one interface but not another. Even within one interface, support can depend on the codec and its settings.

WebCodecs support is also different from ordinary media playback. A browser may play a video in a web page without exposing the encoder your demo needs. Likewise, seeing a codec in Browser Info does not confirm that a matching WebCodecs configuration will work. Treat the browser report as an overview, and the configuration check plus a real demo run as the practical test.

Record the browser version, device, codec and settings you tested so you can repeat the same check before the presentation.

More articles