Take on me, web browsers!
summary
Live demo shows a working browser chroma key built with getUserMedia, copying video frames into a canvas and doing canvas pixel manipulation to find green pixels and set alpha to zero. It describes the math (RGBA arrays, width × height × 4), uses setTimeout(0) for refresh, and solves common issues: need bright even lighting, avoid green clothing, ignore pixels with green ≤ 100. Extras include background capture for an “invisibility cloak” and duplicating a subject as a pink rotoscoped layer — all runnable in-page.
AI-written summary · about
chapters (9)
- 0:00Introduction to CSS Art
- 1:06Understanding Rotoscoping
- 2:59Animation on the Web
- 4:26Concept of Web Rotoscoping
- 7:29Browser Camera Input
- 9:54Pixel Data Manipulation
- 14:02Refining the Chroma Key
- 15:51Invisibility Cloak Demo
- 18:45Creative Video Processing
