Port Mixxx to Emscripten/WebAssembly

fwcd commented 9 months ago

Status

The wasm branch contains experimental forks of mixxx and vcpkg for targeting wasm32-emscripten.

You can try it out, there is a GitHub Pages-hosted build at https://fwcd.github.io/m1xxx, but be warned: It may take a while to load (the Wasm binary is ~300 MB, the assets are ~90 MB) and there is no audio (the experimental "Web Audio" backend is not functional yet, hence why it is disabled by default).

On the technical side, there are still some major roadblocks to be resolved:

Mixxx will crash when building with -sASSERTIONS, see
- This Qt forum post: https://forum.qt.io/topic/155159/cannot-have-multiple-async-operations-in-flight-at-once-during-qapplication-initialization
- This Emscripten issue: https://github.com/emscripten-core/emscripten/issues/18412
- This Qt issue: https://bugreports.qt.io/browse/QTBUG-102827
PortAudio is still lacking a Web Audio backend
- See https://github.com/PortAudio/portaudio/pull/887
- The interaction between Web Audio's asynchrony and Qt's issues with asynchrony seem to bring up some more issues: https://github.com/emscripten-core/emscripten/issues/18853#issuecomment-1987442770
- Given that we already have to build Mixxx without -sASSERTIONS, any multiple in-flight async operations are effectively undefined behavior and manifest themselves in hard-to-debug failures at runtime (e.g. "unreachable" errors in the console, freezes, etc.)
- Loading a track when the "Web Audio" backend is selected seems to also freeze the application, therefore it is disabled-by-default for now: https://github.com/fwcd/mixxx/commit/21e45c55a1653794ef14b0e1533d7757fe39dd9a

Something to investigate would be whether we could replace -sASYNCIFY entirely with -sPROXY_TO_PTHREAD, i.e. move the "main" thread to a Web Worker where we can block synchronously. Unfortunately, there seem to be some complexities involved in making this work with Qt:

https://forum.qt.io/topic/118350/proxy_to_pthread-support/3

We may have to check whether setting USE_PTHREADS=1 for Qt would help here (or whether that would be redundant because our vcpkg triplet already sets -pthread).

Another option would be the recently-added C++20 co_await integration, which uses native LLVM coroutines and thus hopefully shouldn't be bound to the same limitations as Asyncify: https://github.com/emscripten-core/emscripten/issues/20413

Given that PortAudio exposes a C interface, I am not sure how well we could integrate C++ coroutines there, however.

Motivation

Being able to run Mixxx on the web would be pretty cool. Qt supports WebAssembly, we would however also have to compile all of the other dependencies. This would probably take some work, but should not be impossible.

We take a similar approach to the iOS port (#16) and use custom WASM branches for mixxx and vcpkg, along with an integration branch in m1xxx, then gradually upstream the required changes.

Porting the dependencies to WebAssembly

[x] Configure Qt correctly with GL ES 3.0 and without dbus
[x] Fix libflac, libmad and libmodplug
[x] Fix sleef build by using fftw as an alternative FFT backend
[x] Fix qttools build (or figure out how to remove non-host qttools dependency from qttranslations)
- Upstream issue: https://github.com/microsoft/vcpkg/issues/37106
- Solution: We don't actually need qttools
[x] Fix undefined _qt_test_emscripten_version in Qt6WasmMacros.cmake during Mixxx configure
- Patched out in https://github.com/fwcd/vcpkg/commit/e80fbb47a840fcba774bd9c53d2bb53e896387c3, though we may want to look for a better solution before we attempt to upstream this
[x] Update Qt to 6.6.2
- This provides WASM stack traces in log messages and exceptions, which is really useful for debugging

Porting Mixxx to WebAssembly

[x] Figure out why WrapRt cannot be found when configuring Mixxx:

Qt6Core could not be found because dependency WrapRt could not be found.

Digging into FindWrapRt.cmake shows that the check_cxx_source_compiles failed, which (as build/CMakeFiles/CMakeConfigureLog.yaml revealed), failed due a missing clang-scan-deps binary:

"CMAKE_CXX_COMPILER_CLANG_SCAN_DEPS-NOTFOUND" -format=p1689 -- /opt/emsdk/upstream/emscripten/em++ -DHAVE_STDATOMIC_WITH_LIB  -fdiagnostics-color=auto  -std=gnu++20 -x c++ /Users/fredrik/git/m1xxx-wasm/mixxx/build/CMakeFiles/CMakeScratch/TryCompile-QIjor4/src.cxx -c -o CMakeFiles/cmTC_0948e.dir/src.cxx.o -MT CMakeFiles/cmTC_0948e.dir/src.cxx.o.ddi -MD -MF CMakeFiles/cmTC_0948e.dir/src.cxx.o.ddi.d > CMakeFiles/cmTC_0948e.dir/src.cxx.o.ddi.tmp && mv CMakeFiles/cmTC_0948e.dir/src.cxx.o.ddi.tmp CMakeFiles/cmTC_0948e.dir/src.cxx.o.ddi
/bin/sh: CMAKE_CXX_COMPILER_CLANG_SCAN_DEPS-NOTFOUND: command not found
ninja: build stopped: subcommand failed.

Presumably we hit https://github.com/emscripten-core/emscripten/issues/21042, possibly because Mixxx uses C++20 (this would also explain why vcpkg builds of Qt passed, despite running the same FindWrapRt check).

[x] Fix the problem (a704a27f96649af11b160b22228c07b6a921b239)

[x] Solve this linker error
```
wasm-ld: error: --shared-memory is disallowed by sqlite3.c.o because it was not compiled with 'atomics' or 'bulk-memory' features.
```
The issue is likely that we have to compile (all?) our dependencies with -pthread (as per this discussion). This should in principle be possible via the triplet, just setting VCPKG_C(XX)_FLAGS does not work, however: https://github.com/microsoft/vcpkg/discussions/30108
- Fixed by introducing new triplets (wasm32-emscripten-pthread(-release)) and setting
```
set(ENV{EMCC_CFLAGS} "$ENV{EMCC_CFLAGS} -pthread")
```

Upstreaming the Mixxx patches

Upstreaming the vcpkg patches

to `microsoft/vcpkg`

to `mixxxdj/vcpkg`

TBD:

Cherry-pick the PortAudio patches (Web Audio support)
Cherry-pick the taglib patch, i.e. either rebase it or wait until Mixxx fully supports Taglib 2.0:
- https://github.com/mixxxdj/mixxx/issues/12708
- https://github.com/mixxxdj/mixxx/issues/12790

to upstream projects

https://github.com/PortAudio/portaudio/pull/887

Nice to have

[x] CI for Emscripten/WebAssembly
- [x] GitHub Pages deployment: https://fwcd.github.io/m1xxx
[ ] Support for local files/persistence
- See https://emscripten.org/docs/api_reference/Filesystem-API.html#filesystem-api-filesystems
- We could use e.g. IDBFS to persist the .mixxx directory
- For music, it would be best to let the user pick tracks from the host file system, if possible somehow
[ ] Updating the install logic in CMakeLists to produce a proper archive when e.g. cpack -G TGZ is used
- Currently we get a desktop-like file structure with bin etc.
- Instead we want a flat directory with mixxx.{data,html,js,wasm,worker.js}, qtloader.js and qtlogo.svg
- From there, emrun mixxx.html can be used to launch the web app locally

Useful resources

https://doc.qt.io/qt-6/wasm.html

owlandfox commented 3 months ago

This is awesome! I suggested/requested a web version of MIxxx a couple years ago so its great to see it in progress! I see there are still a couple tasks needed to get it fully operational?

fwcd commented 3 months ago

Yes, the UI mostly works (you can try it online), the biggest missing piece is currently the Web Audio backend. Mixing that, Qt and Asyncify seems to be a lot more complicated than I had hoped for, so I've put this project on hold until Qt/Emscripten hopefully work out these interactions.

owlandfox commented 3 months ago

Wow yes it looks like its all working pretty smoothly otherwise. Hopefully they can solve this soon as I know a lot of users including me will have a great use case for Mixxx in the browser

fwcd / m1xxx