Getting Weird with Video Manipulation and HTML5 Canvas
summary
Demonstrates exact techniques: a single video element feeds one or more canvases by copying video frames to canvas every requestAnimationFrame, raw pixels extracted and modified for grayscale and custom per-pixel filters, and real‑time ML by passing extracted frames to tensorflow coco ssd model.detect to draw bounding boxes. Shows a production use where mux video streams once and canvases render synced, interactive overlays and text, reducing bandwidth and avoiding dual‑video desync.
AI-written summary · about
chapters (8)
- 0:00Start
- 0:47Intro
- 1:26Code Sandbox
- 1:48Demo
- 3:50Context Ref
- 5:03Filter Example
- 11:12Use Cases
- 14:28Happy Birthday Video
related talks
26mTake on me, web browsers!
32mIntro to Web Graphics with HTML5 Canvas
46mCreating Animations in JS: Canvas 2D and WebGL
35mHTML5 APIs - The New Frontier
22mTake on me, web browsers!
21mDynamic video in the browser
19mPuppeteer + canvas + WebCodecs to replace
07mRemember CSS Sprites? Let's Do That with Video!