Saturday, May 23, 2015

vectorized video compression

Not every type of video needs high resolution and frame rates to look good. For music videos, 4K at 60fps is overkill, and a waste of bandwidth and power. Traditional video compression operates only on pixels, and removes detail in low contrast areas, leading to blocky artifacts.

My compression technique is optimized for a stylized output, and a much smaller data stream. It mixes SVG vector graphics with super compressed low resolution video. The video stream is resized to 240 pixels wide, and frame rate dropped to 8fps, this makes the file 10X smaller than the original compressed version. The backend pre-computes the SVG each frame using Potrace. Each SVG file is recompressed with SVGO, which can reduce the file size by another ten percent or more. As the video plays it triggers reloading of the SVG overlay frame, to compensate for the delay, the server is hardcoded to return two frames ahead of the requested frame.

You can view the live demo at heroku. Note this is a free and limited account, so if the site gets busy try again later. note: heroku is limiting my connection rate, so svg playback is limited to 4fps


  1. Interesting .. I wonder if the frames that follow are similar enough that you could use some sort of XML diff generate the following frames ?

  2. I really love the look of your demo! Have you shared your code onywhere? Looked on github but couldn't find vectorvideo.

    I'm doing research on image tracing (webcam to svg to drawing machine) for a project I'm working on, and it would be a great bonus if the user could see a live vectorized preview, the grab a frame, and send it to the drawing machine when they are happy with the result.

    Here is a link to the drawing machine I'm working on.

    The webcam version will probably run on a raspberry pi, so potrace is a probably candidate.