Skip to content

feat(video-recorder): effects — filters, background blur/replace, green screen - #391

Merged
slaveofcode merged 2 commits into
developfrom
feat/video-effects
Sep 11, 2026
Merged

feat(video-recorder): effects — filters, background blur/replace, green screen#391
slaveofcode merged 2 commits into
developfrom
feat/video-effects

Conversation

@slaveofcode

Copy link
Copy Markdown
Owner

Phase 2 of the Video Recorder. Recording now goes through a canvas-composited pipeline (records the effects canvas + camera audio), so effects bake into the file.

Effects

  • Colour filters — grayscale / sepia / vivid / cool / warm / invert (CSS filters on the canvas).
  • Background blur and background replace (colour or uploaded image) via an on-device MediaPipe selfie segmenter (selfie_segmenter.tflite, VIDEO mode, per-frame) — no green screen needed.
  • Green screen — real chroma-key with adjustable key colour + tolerance.
  • Works live and while recording; mirror now bakes in correctly (composited offscreen then drawn).

Tests

  • Unit: video-effects.lib (8 — filter presets, hex parse, chroma key). Full suite 2267 green.
  • E2E: records through the filter path with Chromium's fake camera (proves the canvas→MediaRecorder pipeline). Segmentation/green-screen need a real camera to verify visually.
  • EN + ID SEO updated (intro, how-to, background FAQ). Lint 0 errors; build green.

⚠️ Deploy step (models live in R2)

Production serves /models from R2, not the build. The new selfie-segmenter model must be uploaded to R2 or background blur/replace will 404 it in production:

npm run stage:models && npm run sync:r2:prod   # needs Cloudflare auth

Filters and green screen need no model and work regardless. I'll hold the production promotion until you've run the R2 sync (or tell me to promote filters/green-screen-only awareness).

Promote to production: Buy me a coffee (Polar)
…en screen

Phase 2 of the Video Recorder: switch recording to a canvas-composited
pipeline (record the effects canvas + camera audio) and add effects that
bake into the file:
- colour filters (grayscale/sepia/vivid/cool/warm/invert)
- background blur and background replace (colour or image) via an
  on-device MediaPipe selfie segmenter (VIDEO mode, per-frame)
- real green-screen chroma key (adjustable key colour + tolerance)

Pure, unit-tested video-effects.lib (filter presets, hex parse, chroma
key). Stages the selfie-segmenter model (stage-models.mjs); it is served
same-origin from /models like the face model. E2E records through the
filter path with the fake camera. EN + ID SEO updated.

NOTE: production serves /models from R2 — run `npm run sync:r2:prod`
(with Cloudflare auth) to upload selfie_segmenter.tflite, or the
background-blur/replace effects 404 the model in prod (filters and green
screen need no model).
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Sep 11, 2026

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
❌ Deployment failed
View logs
goodwebtools 43d0fa8 Sep 11 2026, 03:25 PM

@slaveofcode
slaveofcode merged commit 4a0a55b into develop Sep 11, 2026
2 of 3 checks passed
@slaveofcode
slaveofcode deleted the feat/video-effects branch September 11, 2026 15:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant