Get the average color of areas where DOM elements overlap a video.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
resources/assets
.editorconfig
.gitignore
.jshintrc
.npmignore
.stylelintrc
gulpfile.js
package-lock.json
package.json
readme.md
webpack.config.js

readme.md

Video Color Tracker

Get the average color of areas where DOM elements overlap a video.

View Demo

Install

npm i video-color-tracker --save

Example

First, setup a video element and some DOM elements that overlap it (e.g., using position: absolute;):

<!-- Video -->
<video id="myVideo" autoplay="true" width="640" height="360" loop="true">
  <source src="myVideo.mp4" type="video/mp4">
</video>

<!-- Elements -->
<div class="track-me"></div>
<div class="track-me"></div>
<div class="track-me"></div>

Then, initialize the tracker:

import VideoColorTracker from 'video-color-tracker';

const video = document.getElementById('myVideo');
const elements = document.querySelectorAll('.track-me');
const tracker = new VideoColorTracker(video, elements);

tracker.start();

And voila! You’re color-tracking.

API

Properties

  • .scaleRatio: Canvas to video scale. Smaller scale = less data to process, better performance. Default: 0.5
  • .delay: How often new colors should be pulled, in milliseconds. Default: 500

Methods

  • .start(): Start tracking color changes.
  • .stop(): Stop tracking color changes.
  • .remap(): Update tracked coordinates where elements overlap video.
  • .setVideo(video): Update video to track.
  • .setElements(elements): Update elements to track colors for.