Created
April 9, 2019 11:28
-
-
Save dassiorleando/0feb0ce02f2c72ae1ccdd6bf6a855743 to your computer and use it in GitHub Desktop.
Detect color into a video
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>tracking.js - first tracking</title> | |
<script src="tracking-min.js"></script> | |
<script | |
src="https://code.jquery.com/jquery-3.3.1.min.js" | |
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" | |
crossorigin="anonymous"></script> | |
</head> | |
<body> | |
<video id="myVideo" width="400" height="300" preload autoplay loop muted> | |
<source src='zuck.mp4' type="video/mp4" /> | |
</video> | |
<script> | |
$(document).ready(function() { | |
var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']); | |
colors.on('track', function(event) { | |
if (event.data.length === 0) { | |
// No colors were detected in this frame. | |
console.log('No color detected here'); | |
} else { | |
event.data.forEach(function(rect) { | |
console.log(rect.x, rect.y, rect.height, rect.width, rect.color); | |
}); | |
} | |
}); | |
tracking.track('#myVideo', colors); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment