<canvas> rocks, <video> sucks

When in news.yc I find posts like “iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas>” I really fall in love.

Seriously. So much in love that I need to try it by myself. Hence, VideoCanvas.
VideoCanvas is a mix of PHP, ffmpeg and ImageMagik.

Starting from a video, it creates an images with all the tiles and an HTML page with hard-coded JSON containing frames info and some JavaScript to start the video.

It relies on ffmpeg to extract video frames in separate images. Then with the ImageMagik extension of PHP it creates a minimum set of tiles to recreate the video in the <canvas>.

Have a look at the final result of version 0.1. Here you can find the source video made with Kazam Screencaster.

(Edit: the JS code has been updated to use requestAnimationFrame when available)

This entry was posted in Image processing, PHP. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>