VHS is a small set of useful tools to work with 2D video tracking in HTML5 projects.
VHS will help you create advanced video effects in HTML5 known as tracking. It allows to overlay video with interactive/dynamic elements and have then follow features in the footage. The overlay elements can range from CSS to SVG, Canvas drawing or WebGL.
Some examples below:
Sadly Safari on iPad does not allow to copy portions of video to a canvas, so the binary marker cannot be read. Until this is fixed, the only way to read the frame on the iPad is to rely on the currentTime of the video. It is less accurate, which you should be able to see in the examples above.
VHS was used on a Tool Christmas Card, that features a 2d tracking and dynamic compositing of WebGL elements.
Video tracking was used mostly in Flash projects. Below is a list of a few of my favourite examples:
To track a video, one needs to establish the number of the frame from within code. And it needs to be done very precisely. The easiest and most straightforward way of doing this is to read the currentTime of the video and divide it by the number of frame per second. Unfortunately this is not precise enough. It wasn't precise enough in Flash and the it is the same case for HTML5 video. If you want to read how frustrating it can be there is a great article by Zeh Fernando.
- start with a raw video file
- use Mocha (standalone or AE plugin) to track features on the video
- export the tracking information per frame into a text file
- run the py/videomake.py script on the video file to add binary marker
- convert tracking data to JSON using py/parse_cornenrpin.py or py/parse_transform.py
- include VHS.js in your html and load the JSON with tracking data