Demo: https://eyaler.github.io/LordTubeMaster/#dQw4w9WgXcQ
Note as of September 2024 this is only supported on Chromium desktop.
Enable graphics/hardware acceleration browser setting to reduce lag. Particularly for the WebGPU examples - make sure you are using a discrete GPU.
For fullscreen zoom of output (with right-click) enable: chrome://flags/#element-capture
(Google Chrome), or
chrome://flags/#enable-experimental-web-platform-features
(Chromium).
You can browse the effects with Alt+↑
and Alt+↓
The code demos usages with Wasm (MediaPipe), WebGPU (TensorFlow.js, ONNX Runtime Web, Transformers.js), WebGL (Three.js, SwissGL), and VanillaJS.