-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathyoutube.html
150 lines (121 loc) · 3.69 KB
/
youtube.html
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
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<title>VMX Hello World</title>
</head>
<body>
<iframe id="video" width="420" height="0"
src="http://www.youtube.com/embed/dQw4w9WgXcQ?enablejsapi=1"
frameborder="0" allowfullscreen style="visibility:hidden;"></iframe>
<h1>VMX Hello World</h1>
<div id="result2"> </div>
<b>if</b> (<img id="model_image" style="width:50px">) <b>then</b> { play(); }
<br/>
<div style="width:320;height:240;background-color:black;">
<div id="box" style="width:0px;height:0px;position:relative;">
</div>
</div>
<br/>
<h3>Settings</h3>
VMX Server IP:<input id="url_input"></input>
<button type="button" onclick="change_host()">Submit</button>
<br/>
<h3>Resulting json stream</h3>
<div id="result"> </div>
<script>
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
// create the global player from the specific iframe (#video)
player = new YT.Player('video', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
}
var done_already = false;
function targetFun() {
//var snd = new Audio(audio_file);
//snd.play();
player.playVideo();
$('#video').css('visibility','visible');
$('#video').css('height',315);
done_already = true;
}
function change_host() {
host = $('#url_input').val();
start();
}
var session = "";
var last_event = -1;
var scores = [-10];
//var host = location.host;
var host = "localhost:3000";
$('#url_input').val(host);
function loop() {
$.get( "http://"+host+"/session/"+session+"/log.txt", function( data ) {
if (data.output && data.output.objects) {
$( "#result" ).html( JSON.stringify(data.output.objects));
if (data.output.objects.length == 0) {
return;
}
var bb = data.output.objects[0].bb;
$( "#box" ).css('left',bb[0]);
$( "#box" ).css('top',bb[1]);
$( "#box" ).css('width',bb[2]-bb[0]);
$( "#box" ).css('height',bb[3]-bb[1]);
var color = 'green';
if (data.output.objects[0].score < -1) {
color = 'black';
}
scores[scores.length] = data.output.objects[0].score;
$( "#box" ).css('background-color',color);
if (scores.length > 6 && scores[scores.length-1] > 0 &&
scores[scores.length-5] < 0 && scores.length > (last_event+5)) {
targetFun();
last_event = scores.length;
}
if (scores.length > 6) {
var all_bad = true;
for (var i = 0; i < 6; ++i) {
all_bad = all_bad && (scores[scores.length-1-i] < -1);
}
if (all_bad == true) {
player.pauseVideo();
}
}
}
//repeat the loop
setTimeout(function() { loop();}, 100);
});
}
function start() {
// Get a listing of sessions and return the first session
$.get( "http://"+host+"/session", function( data ) {
var sessions = data.data.map(function(x) {return x.session;});
if (sessions.length == 0) {
console.log('no sessions');
return;
}
session = sessions[0];
var model = data.data.filter(function(x) {return session==x.session;});
$('#model_image').attr("src","http://"+host+"/"+model[0].model.image);
if (sessions.length > 1) {
console.log('warning: more than one session');
}
loop();
}).fail(function(msg) {
console.log('Cannot connect to',host);
});
};
start();
</script>
</body>
</html>