Skip to main content
Version: 10.4.0

WASM support (experimental)

When compiling the THEOplayer Flutter SDK for WEB, you can now specify WASM support.

Flutter Compatibility​

Use Flutter 3.35.3 or later for the best performance and compatibility. (earlier versions could have rendering issues with the video element)

Run or build your app​

To run the app with Wasm for development or testing, use the --wasm flag with the flutter run command.

flutter run -d chrome --wasm

To build a web application with Wasm, add the --wasm flag to the existing flutter build web command.

flutter build web --wasm

The command produces output into the build/web directory relative to the package root, just like flutter build web.

Changes required in your app​

Bootstrapping​

Make sure your app's web/index.html is updated to the latest Flutter web app initialization (it was introduced from Flutter 3.22).

It depends on your project structure, but most of the times this only means you need to make sure that flutter_bootstrap.js is properly included in your index.html.

Include THEOplayer WEB SDK as asset​

Define the path of the folder that contains THEOplayer Web SDK as an asset in your pubspec.yaml file to make sure the Javascript files will be included.

For example, if the THEOplayer WEB SDK is located under web/theoplayer, then

  assets:
    - web/theoplayer/

Browser support​

Not all browsers support the Flutter WASM renderer. Please always check the status of the compatibility here.

Host it on a compatible server​

Extra configuration is needed on the server-side to make sure WebAssembly runs properly.

During debugging the flutter run -d chrome --wasm command will serve your webapp properly, but once you build a release version and host it on your own server, you need to make sure the server is configured properly.

For example don't expect that any basic web serving command e.g. (python3 -m http.server 8000) will just to run with WebAssembly support.

On the other hand most of the hosting solutions (e.g. Netlify or Netlify Drop) will have this configured out of the box.

Always consult with your hosting provider first!