Live video carve

Run content-aware seam carving on your camera feed. Drag the red box on the camera preview to choose the area to carve. Each rendered frame uses the most recent seam mask; the worker keeps refining the mask in the background as fast as your CPU allows.

How does it work?

The underlying algorithm is seam carving, introduced by Shai Avidan and Ariel Shamir in their SIGGRAPH 2007 paper Seam Carving for Content-Aware Image Resizing (ACM). It repeatedly removes the lowest-energy connected path of pixels so subjects in the frame are preserved while background slack is squeezed out.

For live video, the render loop draws every camera frame at display rate. A Web Worker continuously aggregates energy from the last several frames and publishes a fresh "seam mask" - a mapping from output pixels back to source pixels. The render loop simply applies whatever mask it has at the moment, so you always see a smooth video at full FPS while the carve gravitates toward its optimum in the background.

Camera frames stay on your device; nothing is uploaded. The page asks for camera permission when you press Start camera.

The static-image carver was directly inspired by Oleksii Trekhleb's write-up Content-Aware Image Resizing in JavaScript and his js-image-carver demo (source). The decoupled refine/render architecture used here is original to this project.