Flutter Web

[Larpoux]

Now, τ (Tau) is OK on Android and iOS. I read in the documentation somewhere that FRB can be used on Flutter Web. I wonder how it is possible : FFI does not run on Flutter Web

[fzyzcjy]

Now, τ (Tau) is OK on Android and iOS.

🎉

I wonder how it is possible : FFI does not run on Flutter Web

Shortly speaking, it is not via ffi, but via wasm_bindgen and dart calls to js to rust. Anyway, no worries about this - this is hidden under the implementation details and not exposed to end users.

[Larpoux]

This is too bad. The W3C Web Audio API runs natively in the major browsers and we can use it using the official Flutter Web interface. No need of Web-Audio-API-RUST. I was interested to run FRB on flutter web, because of the maintenance : I will have two versions of τ very similar:

• One with Web-Audio-API-Rust via FRB
• One native on Web with Google official Web interface.

But I can live with that.

[fzyzcjy]

The W3C Web Audio API runs natively in the major browsers and we can use it using the official Flutter Web interface

Yes I think so. Indeed, if you are using web-audio-api-rust, then it is impossible to automagically let frb pick the js version - it does not even know that exists!

I was interested to run FRB on flutter web, because of the maintenance : I will have two versions of τ very similar:

Personally speaking, I would suggest to use frb for both native and web to reduce maintenance. In addition, I heard some people saying Flutter Web has much less users than Flutter on mobile/desktop. Thus, I guess one way may be firstly make it work, and only when the use-web-audio-api-rust-on-web-platform solution has some problems to end users, add the extra backend. Even so, adding that web backend is only a implementation detail, and will not cause any breaking changes to users, so it is safe to do so.

[Larpoux]

I would suggest to use frb for both native and web to reduce maintenance

Can you give me a link to some documentation or notes about frb on web ?

[fzyzcjy]

Frb works on web by default - no need to do anything special. If you find problems, just create an issue.

[Larpoux]

I was not able to add the Web support on my App because Web is incompatible with FFI. Just to see what is going on, I tried to create a real FRB app :

flutter_rust_bridge_codegen create my_app

When I run it on a Chrome, I get :

Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...
This app is linked to the debug service: ws://127.0.0.1:63409/A8_1jggRy1Y=/ws
Debug service listening on ws://127.0.0.1:63409/A8_1jggRy1Y=/ws
Debug service listening on ws://127.0.0.1:63409/A8_1jggRy1Y=/ws
Error
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3  throw_
packages/flutter_rust_bridge/src/wasm_module/_web.dart 28:7                  _ensureCrossOriginIsolated
packages/flutter_rust_bridge/src/wasm_module/_web.dart 10:3                  initializeWasmModule
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54           runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5           _async
packages/flutter_rust_bridge/src/wasm_module/_web.dart 9:34                  initializeWasmModule
packages/flutter_rust_bridge/src/loader/_web.dart 17:9                       loadExternalLibraryRaw
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54           runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5           _async
packages/flutter_rust_bridge/src/loader/_web.dart 15:47                      loadExternalLibraryRaw
packages/flutter_rust_bridge/src/loader/_web.dart 10:10                      loadExternalLibrary
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54           runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5           _async
packages/flutter_rust_bridge/src/loader/_web.dart 8:46                       loadExternalLibrary
packages/flutter_rust_bridge/src/main_components/entrypoint.dart 129:13      _loadDefaultExternalLibrary
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54           runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5           _async
packages/flutter_rust_bridge/src/main_components/entrypoint.dart 128:54      [_loadDefaultExternalLibrary]
packages/flutter_rust_bridge/src/main_components/entrypoint.dart 48:31       initImpl
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54           runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5           _async
packages/flutter_rust_bridge/src/main_components/entrypoint.dart 37:24       initImpl
packages/my_app/src/rust/frb_generated.dart 27:20                            init
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54           runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5           _async
packages/my_app/src/rust/frb_generated.dart 22:27                            init
packages/my_app/main.dart 6:17                                               main
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54           runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5           _async
packages/my_app/main.dart 5:18                                               main$
web_entrypoint.dart 24:31                                                    <fn>
lib/ui_web/ui_web/initialization.dart 41:9                                   <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50           <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 163:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 847:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 876:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 652:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 722:7                                    callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>

I think I will study the Web support by FRB later. I have enough things to work on, now, without adding some difficult points.

[fzyzcjy]

because Web is incompatible with FFI.

No, frb supports web. As long as you do not manually write down ffi code, it should work.

As for that _ensureCrossOriginIsolated error, firstly check whether these headers are used:

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new issue.