HTML & CSS How to Fire snd Event?

[Luis Mb]

How to fire an Event when webcam recognize a specific color? I am working with tracking.js please take a look.. I try some like this:.


[CODE title="Fire event"]Var (r,g,b).
Var event-name = Event.event-name
If r>240; g<20; b<20. Function ()... fire('event_name');[/CODE]



Some idea??

	<!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>
	<button id='on' >Tracker on</button>
	<button id='off'>Tracker off</button>
	<script>
	var _t = null;
	$(document).ready(function() {
	//var ct = tracking.ColorTracker
	tracking.ColorTracker.registerColor('green', function(r, g, b) {
	if (r == 0 && g == 250 && b == 0) {
	return true;
	}
	return false;
	});
	tracking.ColorTracker.registerColor('black', function(r, g, b) {
	if (r < 50 && g < 50 && b < 50) {
	return true;
	}
	return false;
	});
	var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow','green']);
	colors.on('track', function(event) {
	if (event.data.length === 0) {
	// No colors were detected in this frame.
	} else {
	event.data.forEach(function(rect) {
	console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
	});
	}
	});
	tracking.track('#myVideo', colors);
	$('#on').click(function(e){
	_t.run();
	});
	});
	</script>
	</body>
	</html>

 

[simong1993]

Hiya and welcome 🙂

please edit your post and put your code into a Code format by pressing this button

At the moment its quite hard to read.

PLEASE DO NOT OPEN ANY MORE THREADS, please edit your thread instead of duplicating the same thing over and over again