Skip to content

Commit c44096d

Browse files
nikv96Nikhil Venkatesh
nikv96
authored and
Nikhil Venkatesh
committed
Fixed Live Streaming Issue
Modified Dependencies
1 parent c126f41 commit c44096d

File tree

9 files changed

+41
-94
lines changed

9 files changed

+41
-94
lines changed

‎drone/camera-feed.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎drone/controller.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
var io = require('socket.io')(3002);
2-
//io.set('log level', 1);
1+
var io = require('socket.io')(3001);
32

43
var drone = require('ar-drone');
5-
console.log('Drone required');
64
var client = drone.createClient();
75

86
client.config('control:altitude_max', '20000');
@@ -15,11 +13,20 @@ io.on('connection', function (socket) {
1513
spinPidController = new Controller(0.4, 0.01, 0.1)
1614
;
1715
console.log('Connected');
16+
17+
var currentState='';
18+
19+
pngStream.on('error', console.log);
20+
pngStream.on('data', function(pngBuffer) {
21+
if (currentState != 'facetrack'){
22+
socket.emit('image', { image: true, buffer: pngBuffer.toString('base64') });
23+
}
24+
});
1825

1926

2027
var FaceTrack = require('./facetrack');
2128
var faceTrack = FaceTrack(pngStream, function(info){
22-
console.log(info);
29+
socket.emit('image', { image: true, buffer: info.image.toBuffer().toString('base64') });
2330
var target = info.rects;
2431
var im = info.image;
2532
var targetWidth = 100;
@@ -66,11 +73,9 @@ io.on('connection', function (socket) {
6673

6774
setInterval(function(){
6875
var currentAltitude = client.lastAltitude;
69-
socket.emit('event', { name: 'altitude',value: currentAltitude});
76+
socket.emit('event', { name: 'altitude',value: currentAltitude!=undefined?currentAltitude:0});
7077
},1000);
7178

72-
var currentState='';
73-
7479
socket.on('event', function (data) {
7580
if(data.name == 'facetrack'){
7681
if (currentState != 'facetrack'){

‎drone/facetrack.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,6 @@ var ImageProcessing = exports = module.exports = function(pngStream, callback){
3737
}
3838

3939
var detectTarget = function(){
40-
// Create OpenCV Window
41-
var window = new cv.NamedWindow('Result', 0);
4240
if (processingImage == true) {
4341
cv.readImage(lastPng, function(err, image) {
4442
if (err)
@@ -52,22 +50,23 @@ var ImageProcessing = exports = module.exports = function(pngStream, callback){
5250
{},
5351
function(err, faces){
5452
if(faces.length != 0){
53+
var max_width = faces[0].width;
54+
var face;
5555
for (var i = 0; i < faces.length; i++){
56-
var face = faces[i];
57-
image.rectangle([face.x, face.y], [face.width, face.height], [0,255,0], 2);
56+
if(faces[i].width >= max_width)
57+
face = faces[i];
5858
}
5959

60+
image.rectangle([face.x, face.y], [face.width, face.height], [0,255,0], 2);
61+
6062
callback({
6163
image : image,
6264
delatTime : pngDeltaTime,
6365
timestamp : lastPngTime,
64-
rects : faces[0]
66+
rects : face
6567
});
66-
67-
window.show(image);
68-
window.blockingWaitKey(0, 1);
6968
}
70-
});
69+
}, 1.3, 3);
7170
});
7271
}
7372
};

‎index.html‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
<head>
44
<title>Drone GCS</title>
5+
<link rel="icon" href="/images/favicon.png">
56
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"></link>
67
<link rel="stylesheet" type="text/css" href="/css/custom.css"></link>
78
<script type="text/javascript" src="/js/jquery.min.js"></script>
89
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
9-
<script type="text/javascript" src="/js/nodecopter-client.js"></script>
1010
<script type="text/javascript" src="/js/socket.io.js"></script>
1111
<script type="text/javascript" src="/js/leap-0.6.4.min.js"></script>
1212
<script type="text/javascript" src="/js/client.js"></script>
@@ -70,7 +70,7 @@
7070
<span class="icon-bar"></span>
7171
<span class="icon-bar"></span>
7272
</button>
73-
<a class="navbar-brand" style="color:white" href="#">Drone GCS</a>
73+
<a class="navbar-brand" style="font-size:30px;color:white" href="#">Drone GCS</a>
7474
</div>
7575

7676
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
@@ -82,13 +82,6 @@
8282
</button>
8383
</div>
8484
</li>
85-
<li>
86-
<div class="col-md-12" style="margin-top:23px">
87-
<button type="button" class="btn btn-danger" aria-label="Left Align" id="leap">
88-
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>&nbsp;Leap
89-
</button>
90-
</div>
91-
</li>
9285

9386
<li>
9487
<div class="col-md-12" style="margin-top:28px;display:inline;color:white;text-align:center;">
@@ -104,9 +97,9 @@
10497
<li class="dropdown">
10598
<a href="#" class="dropdown-toggle" style="background-color:#1d1d1d; color:white" data-toggle="dropdown">Flight Modes<span class="caret"></span></a>
10699
<ul class="dropdown-menu">
107-
<li><a style="background-color:#1d1d1d" href="#">Leap Mode</a></li>
108-
<li><a style="background-color:#1d1d1d" href="#">Target Track Mode</a></li>
109-
<li><a id="facedetect" style="background-color:#1d1d1d" href="#">Face Track Mode</a></li>
100+
<li><a id="leap" style="background-color:#1d1d1d; color:white" onmouseover="document.getElementById('leap').style.backgroundColor='gray';" onmouseout="document.getElementById('leap').style.backgroundColor='#1d1d1d';" href="#">Leap Mode</a></li>
101+
<li><a id="targetTrack" style="background-color:#1d1d1d; color:white" onmouseover="document.getElementById('targetTrack').style.backgroundColor='gray';" onmouseout="document.getElementById('targetTrack').style.backgroundColor='#1d1d1d';" href="#">Target Track Mode</a></li>
102+
<li><a id="facedetect" style="background-color:#1d1d1d; color:white" onmouseover="document.getElementById('facedetect').style.backgroundColor='gray';" onmouseout="document.getElementById('facedetect').style.backgroundColor='#1d1d1d';" href="#">Face Track Mode</a></li>
110103
</ul>
111104
</li>
112105
</ul>
@@ -119,15 +112,15 @@
119112
<div class="col-md-6">
120113
<div class="panel panel-primary">
121114
<div class="panel-heading">Drone 1 Live Feed</div>
122-
<div class="panel-body" id="placeholder">
123-
</div>
115+
<canvas width="640" height="360" style="background-color: rgb(51, 51, 51);" id="placeholder">
116+
</canvas>
124117
</div>
125118
</div>
126119
<div class="col-md-6">
127120
<div class="panel panel-primary">
128121
<div class="panel-heading">Drone 2 Live Feed</div>
129-
<div class="panel-body" id="placeholder2">
130-
</div>
122+
<canvas width="640" height="360" style="background-color: rgb(51, 51, 51);" id="placeholder2">
123+
</canvas>
131124
</div>
132125
</div>
133126
</div>

‎package.json‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,8 @@
55
"version": "0.0.1",
66
"dependencies": {
77
"ar-drone": "latest",
8-
"dronestream": "latest",
98
"express": "latest",
10-
"node-bebop": "latest",
11-
"node-gyp": "^3.4.0",
12-
"node-pre-gyp": "^0.6.30",
13-
"opencv": "~0.1.0",
9+
"opencv": "latest",
1410
"socket.io": "latest",
1511
"socket.io-client": "latest"
1612
},

‎public/css/custom.css‎

Lines changed: 1 addition & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -60,48 +60,4 @@ canvas {
6060
width: 500px;
6161
height: 20px;
6262
text-align: center;
63-
}
64-
65-
.bar {
66-
margin: 5px 0 3px;
67-
border: 6px solid #333;
68-
background: #333;
69-
overflow: hidden;
70-
border-radius: 50px;
71-
-moz-border-radius: 50px;
72-
-webkit-border-radius: 50px;
73-
box-shadow: 1px 1px 1px #777;
74-
-moz-box-shadow: 1px 1px 1px #777;
75-
-webkit-box-shadow: 1px 1px 1px #777;
76-
}
77-
78-
.bar > span {
79-
display: block;
80-
height: 20px;
81-
border-radius: 5px;
82-
-moz-border-radius: 5px;
83-
-webkit-border-radius: 5px;
84-
}
85-
86-
.color0 > span {
87-
background-color: #FF0000;
88-
}
89-
90-
#copterface {
91-
opacity: 0.5;
92-
position: absolute;
93-
z-index: 10;
94-
top: 0px;
95-
left: 0px;
96-
right: 0px;
97-
bottom: 0px;
98-
}
99-
100-
#copterface-label {
101-
display: block;
102-
position: absolute;
103-
top: 20px;
104-
right: 20px;
105-
color: white;
106-
font-family: Arial;
107-
}
63+
}

‎public/images/favicon.png‎

1.02 KB
Loading

‎public/js/client.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
$(function () {
22

3-
function startDroneStream() {
4-
new NodecopterStream(document.getElementById('placeholder'), {port: 3001});
5-
}
6-
73
function startDroneController(){
8-
var socket = io.connect('http://localhost:3002');
4+
var socket = io.connect('http://localhost:3001');
95
console.log('connected to 3002')
106

117
socket.on('connect', function () {
@@ -28,6 +24,15 @@ $(function () {
2824
}
2925
});
3026

27+
var ctx = document.getElementById('placeholder').getContext('2d');
28+
socket.on("image", function(info) {
29+
if (info.image) {
30+
var img = new Image();
31+
img.src = 'data:image/jpeg;base64,' + info.buffer;
32+
ctx.drawImage(img, 0, 0);
33+
}
34+
});
35+
3136
$('#facedetect').click(function(){
3237
console.log('face detection started');
3338
socket.emit('event',{name:'facetrack'})
@@ -108,14 +113,10 @@ $(function () {
108113
if(leap_motion==true){
109114
leap_motion=false;
110115
console.log('Leap Disabled');
111-
$('#leap').removeClass('btn btn-success');
112-
$('#leap').addClass('btn btn-danger');
113116
}
114117
else{
115118
leap_motion=true;
116119
console.log('Leap Enabled');
117-
$('#leap').removeClass('btn btn-danger');
118-
$('#leap').addClass('btn btn-success active');
119120
}
120121

121122
});
@@ -364,7 +365,6 @@ $(function () {
364365
});
365366

366367
}
367-
startDroneStream();
368368
startDroneController();
369369

370370
});

‎server.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ app.get('/', function(req, res) {
99
res.sendFile(__dirname + '/index.html');
1010
});
1111

12-
//require('./drone/camera-feed');
1312
require('./drone/controller');
1413

1514
server.listen(3000);

0 commit comments

Comments
 (0)