LordTubeMaster

Live YouTube processing in client-side JS using self screen capture

Demo: https://eyaler.github.io/LordTubeMaster/#dQw4w9WgXcQ

Note as of late 2024 this is only supported on Chromium desktop (e.g. Chrome, Edge).

Enable graphics/hardware acceleration browser setting to reduce lag. Particularly for the WebGPU examples - make sure your system graphics settings for the browser uses high performance / discrete GPU.

To allow fullscreen zoom of output (with right-click) enable: chrome://flags/#element-capture (Google Chrome 121+), or chrome://flags/#enable-experimental-web-platform-features (Chromium 121+), and relaunch the browser.

You can browse the effects with Alt+↑ and Alt+↓

The code demos usages with Wasm (MediaPipe), WebGPU (ONNX Runtime Web, TensorFlow.js, Transformers.js), WebGL (Three.js, SwissGL), and VanillaJS.

Known issues:

1. Resolution of captured media is doubled for smaller frames: screen-share/element-capture#44

Demo video:

(Using RTX 3070 Ti laptop @ 1920x1080)

ltm_demo_video.mp4

High-level architecture and implemented modules:

Exhibited in /'fu:bar/ glitch art festival exhibition in 2024.