1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255. |
function rgbToHsv(r, g, b){
r = r/255, g = g/255, b = b/255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, v = max;
var d = max - min;
s = max == 0 ? 0 : d / max;
if(max == min){
h = 0; // achromatic
}else{
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, v];
}
//Main object
var processor = {
isFirefox35: function() {
// Let a chance to the navigator to deal with it:
return true; var ua = navigator.userAgent;
// Gecko ?
if (ua.indexOf("Gecko") == -1)
return false;
// Geck >= 1.9.1 ?
return !(ua.indexOf("rv:1.9.1") == -1 && ua.indexOf("rv:1.9.2") == -1);
},
// Init
doLoad: function() {
if (!this.isFirefox35()) {
document.getElementById("nofirefoxbeta").style.display = "block"; }
// Some init
this.displayBackground = true;
this.video = document.getElementById("video");
this.mirrorVideo = document.getElementById("mirrorVideo");
this.mirrorVideoCtx = this.mirrorVideo.getContext("2d");
var self = this;
// If the videos end, play again
this.video.addEventListener("ended", function(){
try {
clearTimeout(self.timeout);
} catch(e){}
self.video.play();
// Work around: https://bugzilla.mozilla.org/show_bug.cgi?id=488287
self.videoIsPlaying();
}, true);
// Set the events listeners for the main video (update button)
this.video.addEventListener("pause", function() { self.updateButtons(false); }, false);
this.pageLoaded = true;
this.startPlayer();
},
videoIsPlaying: function() {
this.updateButtons(true);
this.timerCallback();
},
videoIsReady: function() {
this.videoLoaded = true;
this.startPlayer();
},
startPlayer: function() {
if (!this.videoLoaded || !this.pageLoaded) return;
document.getElementById("wait").style.display = "none";
document.getElementById("player").style.display = "block";
this.width = this.video.videoWidth;
this.height = this.video.videoHeight;
this.mirrorVideo.width = this.width;
this.mirrorVideo.height = this.height;
},
playVideo:function(){
this.video.play();
this.videoIsPlaying();
},
stopVideo: function(){
this.video.pause();
clearTimeout(this.timeout);
},
volumeDown:function(){
if(this.video.volume>0)
this.video.volume=Math.round((this.video.volume - 0.1)*10)/10;
},
volumeUp:function(){
if(this.video.volume<1)
this.video.volume=Math.round((this.video.volume + 0.1)*10)/10;
},
// Main loop
timerCallback: function() {
if (this.video.paused || this.video.ended) { return; }
this.computeFrame();
var self = this;
this.timeout = setTimeout(function () {
self.timerCallback(); }, 50);
},
// Update the SVG button
updateButtons: function(play) {
document.getElementById("playButton").setAttribute("play", play);
document.getElementById("stopButton").setAttribute("play", play);
}, // Handling some patterns (text, drawing)
has_green_around: function(frameData, pos) {
pos_left = pos+ 24;
pos_right = pos - 24;
r_left = frameData[pos_left+0];
g_left = frameData[pos_left+1];
b_left = frameData[pos_left+2];
r_right = frameData[pos_right+0];
g_right = frameData[pos_right+1];
b_right = frameData[pos_right+2];
return ((r_left < 125 && g_left > 125 && b_left < 80) &&
(r_right < 125 && g_right > 125 && b_right < 80));
},
is_team_color: function(frameData, pos){
for (i=pos-4; i<=pos+4; i+=4){
r = frameData[i+0];
g = frameData[i+1];
b = frameData[i+2];
hsv = rgbToHsv(r,g,b);
//if(hsv[0] < 0.60|| hsv[1] < 0.35)
if((hsv[0] < 0.40 || hsv[1] < 0.25 || hsv[2] < 0) ||
(hsv[0] > 0.70 || hsv[1] > 1 || hsv[2] > 1))
return false;
}
return true;
},
is_ball_color: function(frameData, pos){
for (i=pos-4; i<=pos+4; i+=4){
r = frameData[i+0];
g = frameData[i+1];
b = frameData[i+2];
hsv = rgbToHsv(r,g,b);
if((hsv[0] < 0.23 || hsv[1] < 0.40 || hsv[2] < 0.90) ||
(hsv[0] > 0.27 || hsv[1] > 0.50 || hsv[2] > 1))
return false;
}
return true;
},
dist: function(x1, y1, x2, y2) {
return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)); },
computeFrame: function() {
try {
this.mirrorVideoCtx.clearRect(0, 0, this.width, this.height);
this.mirrorVideoCtx.drawImage(this.video, 0, 0, this.width, this.height);
}
catch(e) { return; }
var frame = this.mirrorVideoCtx.getImageData(0, 0, 640, 360);
this.mirrorVideoCtx.fillStyle = 'rgba(200,200,200,0.5)';
this.mirrorVideoCtx.strokeStyle = 'rgba(200,200,200,0.5)';
this.mirrorVideoCtx.lineWidth = 1;
var x, y;
var weight = 0;
var team_shape = null;
var ball_shape = null;
var ball_found = false;
var ball_tracker = document.getElementById("balltracker").checked;
var team_tracker = document.getElementById("teamtracker").checked;
var path_tracker = document.getElementById("pathtracker").checked;
var smart_volume = document.getElementById("smartvolume").checked;
var shapes = [];
var x, y;
var green_bar_left = 0;
var green_bar_rigth =0;
var green_bar_down = 0;
var frame_length = frame.data.length/4;
// We dont' need to compute each pixels
var step = 4;
for (var i = 0; i < frame_length; i += step) {
pos = i*4;
x = i % this.width;
y = Math.round(i / this.width);
if (x == 4)
green_bar_left += g;
else
if (x == this.width-4) {
green_bar_rigth += g;
if (y == 4)
green_bar_down += g;
}
ball_found = ball_tracker && this.is_ball_color(frame.data, pos);
team_found = team_tracker && this.is_team_color(frame.data, pos);
if (this.has_green_around(frame.data, pos) && (ball_found || team_found)){
if (ball_found) {
ball_shape = {};
ball_shape.x = x;
ball_shape.y = y;
}
if(team_found)
{
if (!team_shape) {
// no shape yet, create the first one
team_shape = {};
team_shape.x = x;
team_shape.y = y;
team_shape.weight = 1;
shapes.push(team_shape);
} else {
var d = this.dist(x, y, team_shape.x, team_shape.y);
if (d>25){
team_shape = {};
team_shape.x = x;
team_shape.y = y;
team_shape.weight = 1;
shapes.push(team_shape);
}
}
}
}
}
if (shapes.length>0)
{
if (path_tracker){
this.mirrorVideoCtx.beginPath();
this.mirrorVideoCtx.moveTo(shapes[0].x, shapes[0].y);
}
for( var s=0; s<shapes.length; s+=1){
tracker_size = shapes[s].weight+10;
this.mirrorVideoCtx.strokeRect(shapes[s].x-tracker_size/2,
shapes[s].y-tracker_size/2, tracker_size+2, tracker_size+2);
if (path_tracker)
this.mirrorVideoCtx.lineTo(shapes[s].x, shapes[s].y);
}
if (path_tracker){
this.mirrorVideoCtx.closePath();
this.mirrorVideoCtx.stroke();
}
}
if (ball_shape) {
this.mirrorVideoCtx.strokeStyle = "red";
this.mirrorVideoCtx.strokeRect(ball_shape.x-5, ball_shape.y-5, 10, 10);
}
if(smart_volume)
{
green_right_average = Math.round(green_bar_rigth / this.height);
green_left_average = Math.round(green_bar_left / this.height);
if ( shapes.length>0 &&
Math.abs(green_left_average-green_right_average)>15){
//this.volumeUp();
this.video.volume=1;
document.getElementById("soundIcon").setAttribute("mute", false);
}else{
this.volumeDown();
//this.video.volume=0;
document.getElementById("soundIcon").setAttribute("mute", true);
}
}
return;
}
}
|
