-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (94 loc) · 2.09 KB
/
index.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
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
overflow : hidden;
padding : 0;
margin : 0;
background-color: #BBB;
font-family: sans-serif;
}
#info {
position : absolute;
top : 0px;
width : 100%;
padding : 5px;
text-align : center;
}
#info a {
color : #66F;
text-decoration : none;
}
#info a:hover {
text-decoration : underline;
}
#container {
width : 100%;
height : 100%;
overflow : hidden;
padding : 0;
margin : 0;
-webkit-user-select : none;
-moz-user-select : none;
}
#stream {
margin: 0px auto;
display: block;
margin-top: 20px;
}
</style>
</head>
<body>
<br/>
<div id="container">
<img src="" id="stream">
</div>
<!-- jQuery -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src='/virtualjoystick.js'></script>
<script>
var socket = io.connect('http://192.168.1.20:3000/');
socket.on('liveStream', function(url) {
$('#stream').attr('src', url);
});
function startStream() {
socket.emit('start-stream');
}
startStream();
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
socket.emit('direction', 'front');
}
else if (e.keyCode == '40') {
socket.emit('direction', 'back');
}
else if (e.keyCode == '37') {
socket.emit('direction', 'left');
}
else if (e.keyCode == '39') {
socket.emit('direction', 'right');
}
}
var joystick = new VirtualJoystick({
container : document.getElementById('container'),
mouseSupport : true,
});
var r = setInterval(function(){
if(joystick.right()){
socket.emit('direction', 'right');
} else if(joystick.left()){
socket.emit('direction', 'left');
}else if(joystick.up()){
socket.emit('direction', 'front');
}else if(joystick.down()){
socket.emit('direction', 'back');
}
},1/30 * 1000);
</script>
</body>
</html>