Add CameraFeed support for Web

[shiena]

fixed: godotengine/godot-proposals#12493

Current Limitation:
The platform/web/js/libs/library_godot_camera.js library includes certain functionalities that are inherently asynchronous. We are currently investigating how to execute these functions synchronously, as this is a requirement for our project, but haven't yet found a solution.
I was able to build with JSPI and call asynchronous functions synchronously in Chrome. However, JSPI only works in Chrome and Edge 137.
https://webassembly.org/features/
https://learn.microsoft.com/en-us/microsoft-edge/web-platform/release-notes/137#javascript-promise-integration-jspi-in-webassembly

Supported browsers:

• Chrome v137.0.7151.69
• Firefox ESR v128.11.0esr
• Safari v18.5(20621.2.5.11.8)

[shiena]

I've tried enabling Asyncify as follows, which I believe should fix it, but the build is still failing.

diff --git a/platform/web/SCsub b/platform/web/SCsub
index cf872e65ff..5bb105e1cd 100644
--- a/platform/web/SCsub
+++ b/platform/web/SCsub
@@ -106,6 +106,8 @@ else:
     sys_env.Append(LIBS=["idbfs.js"])
     build = sys_env.add_program(build_targets, web_files + ["web_runtime.cpp"])
 
+sys_env.Append(LINKFLAGS=["-sASYNCIFY=1"])
+
 sys_env.Depends(build[0], sys_env["JS_LIBS"])
 sys_env.Depends(build[0], sys_env["JS_PRE"])
 sys_env.Depends(build[0], sys_env["JS_POST"])

cache:INFO: generating system asset: symbol_lists/8eab473934c10451394fc82e8912c6b3712c9ff9.json... (this will be cached in "C:\Users\shien\dev\emsdk\upstream\emscripten\cache\symbol_lists\8eab473934c10451394fc82e8912c6b3712c9ff9.json" for subsequent builds)
cache:INFO:  - ok
unexpected expression type
UNREACHABLE executed at C:\b\s\w\ir\cache\builder\emscripten-releases\binaryen\src\passes\Asyncify.cpp:1142!
em++: error: 'C:/Users/shien/dev/emsdk/upstream\bin\wasm-opt --strip-target-features --post-emscripten -Os --low-memory-unused --asyncify --pass-arg=asyncify-propagate-addlist [email protected]_*,env.__asyncjs__*,*.fd_sync,*.emscripten_promise_await,*.emscripten_idb_load,*.emscripten_idb_store,*.emscripten_idb_delete,*.emscripten_idb_exists,*.emscripten_idb_clear,*.emscripten_idb_load_blob,*.emscripten_idb_store_blob,*.emscripten_sleep,*.emscripten_wget_data,*.emscripten_scan_registers,*.emscripten_lazy_load_code,*._load_secondary_module,*.emscripten_fiber_swap,*.SDL_Delay --zero-filled-memory --pass-arg=directize-initial-contents-immutable --no-stack-ir bin\godot.web.template_debug.wasm32.nothreads.wasm -o bin\godot.web.template_debug.wasm32.nothreads.wasm -g --mvp-features --enable-bulk-memory --enable-exception-handling --enable-multivalue --enable-mutable-globals --enable-reference-types --enable-sign-ext --enable-simd' failed (returned 3221226505)
scons: *** [bin\godot.web.template_debug.wasm32.nothreads.js] Error 1

[Calinou]

Asyncify makes binaries a lot larger, so we need to be able to use it selectively only for functions that need it.

cc @adamscott

[shiena]

Ready for review.
The demo site requires Chrome 137+ due to its use of JSPI.
I wanted to use ASYNCIFY=1 in SCsub but ran into errors, so I'm currently using ASYNCIFY=2 for JSPI.

Demo site: https://shiena.github.io/godot-camerafeed-demo/
Demo source code: https://github.com/shiena/godot-camerafeed-demo

[Faless]

The demo site requires Chrome 137+ due to its use of JSPI.
I wanted to use ASYNCIFY=1 in SCsub but ran into errors, so I'm currently using ASYNCIFY=2 for JSPI.

This means it can't be merged, we at least want support the latest version of Chrome, Firefox and iOS (and we also try to support the latest version of Firefox ESR, but that has been on and off in the past).

That said, it should be possible to implement the API by relying on callbacks instead of requiring asyncify.

[Faless]

We shouldn't use the EM_*_JS functions, as they break dynamic linking.

[shiena]

That said, it should be possible to implement the API by relying on callbacks instead of requiring asyncify.

I'm trying to get a list of CameraFeed objects using CameraServer.feeds() after setting CameraServer.monitoring_feeds = true in GDScript. Once I have a CameraFeed, I then want to retrieve its available formats using CameraFeed.formats.

However, both of these methods return a JavaScript Promise, which makes using callbacks inherently slow.
If there's an alternative approach, I'd be happy to try it out immediately.

[shiena]

@Faless
Removed Asyncify dependency and confirmed functionality in the following browsers.

• Chrome v137.0.7151.69
• Firefox ESR v128.11.0esr
• Safari v18.5(20621.2.5.11.8)

However, please note the following limitations:

• Retrieving the list of camera devices with CameraServer.monitoring_feeds = true is an asynchronous operation, so it requires a few frames until the state becomes true.
  https://github.com/shiena/godot-camerafeed-demo/blob/main/scripts/Main.gd#L51-L56
• Firefox ESR does not support MediaStreamTrack.getCapabilities(), which means CameraFeed.formats and related APIs will not function.

[adamscott]

Can you share an MRP to test on? I would like to test your PR, but it would be faster for me to have a MRP to test on.

[shiena]

@adamscott
This is for all platforms, but I'm testing functionality with this project.
https://github.com/shiena/godot-camerafeed-demo

[shiena]

I'll make this a draft until it's merged to apply the signal from #108165.