https://github.com/zvory/track-to-css-animation

PoC of AR embedding of web interfaces into a video
https://github.com/zvory/track-to-css-animation

Last synced: over 1 year ago
JSON representation

PoC of AR embedding of web interfaces into a video

• Host: GitHub
• URL: https://github.com/zvory/track-to-css-animation
• Owner: zvory
• Created: 2018-11-20T03:11:44.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-03-31T17:10:40.000Z (about 7 years ago)
• Last Synced: 2025-01-30T18:42:02.889Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://λ.name/track
• Size: 34.8 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# AR Web interfaces

[Demo](https://λ.name/track)

![GIF](http://csclub.uwaterloo.ca/~azvorygi/tracking.gif)

Embed web interfaces into a video using object tracking.

This is not currently packaged for use, I was just racing to a proof-of-concept.

### How this works

Once per video:

Object tracking in python -> output in some format -> `corners-to-corners.js` -> creates a `trackArr` variable, tuple of [portion of video completed, x1, y1, ..., x4, y4]

Each time your website runs:

use `trackArr` in `setTrackPos` to set CSS3 `matrix3d` transform onto the element you want tracked onto the video. Do this more than 60 times a second. Voila, you got something.