カメラ映像から指定座標の色コード（RGB）を取得したい

#作ったもの
tracking.js の Color（Camera）を使って
カメラ映像内の指定した色をトラッキングし、位置情報を取得して画面内の要素を移動させる、という物を作っています。
tracking.jsは、getUserMediaが使われていて、WebRTCという物のようです。

#変更したいこと
現在は指定した色の指定はソースに直に書いていますが、
カメラ映像から最初に指定位置（映像エリアの中央）の色を取得し、任意の色をトラッキングできるように変更したいです。
videoタグにWebRTCで出力したカメラ映像内の指定位置のRGBが取得できれば
tracking.jsでなくても良いのですが…。

#ソース

javascript
1$(function(){
2	video = document.getElementById('video');
3	//redの色指定
4	tracking.ColorTracker.registerColor('red', function(r, g, b) {
5		if (r > 120 && g < 50 && b < 50) {
6			return true;
7		}
8		return false;
9	});
10	//blueの色指定
11	tracking.ColorTracker.registerColor('blue', function(r, g, b) {
12		if (r < 50 && g < 80 && b > 120) {
13			return true;
14		}
15		return false;
16	});
17
18	var tracker = new tracking.ColorTracker(['red','blue']);
19	trackerTask = tracking.track('#video', tracker, { camera: true });
20	tracker.on('track', function(event) {
21
22		event.data.forEach(function(rect) {
23			if (rect.color === 'custom') {
24				rect.color = tracker.customColor;
25			}
26			//redの場合、トラッキングした位置を出力
27			if (rect.color == "red") {
28				$(".redNum .text").text("x:"+rect.x+", y:"+rect.y);
29			}
30			//Blueの場合、トラッキングした位置を出力
31			if (rect.color == "blue") {
32				$(".blueNum .text").text("x:"+rect.x+", y:"+rect.y);
33			}
34			
35		});
36	});
37	$(".startBtn").click(function(){
38		trackerTask.run();
39	});
40	$(".stopBtn").click(function(){
41		trackerTask.stop();
42	});
43});

指定した色の位置が取得できるので、逆ができそうな気もするのですが
ドキュメントにない部分をどういじっていいのか検討がつきません…。

どうぞよろしくお願いいたします。

kyoya0819

2019/12/24 14:34 編集

その映像の取得したい部分は静的なものですか？動的なものですか？これの意図としては、動画の一定座標を「再生しながら常に」取得したいのか「特定の時分秒」の一定座標のものを取得したいのかはっきりさせたいというものがあります。

m_o

2019/12/25 04:21

情報が足りず申し訳ありません、そのような違いに思い当たっていませんでした。「特定の時分秒の一定座標のものを取得したい」です。イメージとしては、固定されたスポイトで、画面中央に十字等を配置し、設定したい色の物を合わせてもらい、ボタンクリックした時点のその座標の色を取得する。更に次の段階としてできれば、スポイトツールのように、指定座標の色をわかりやすく拡大して横に表示したい。という感じです。どうぞよろしくお願いいたします。