Rohit Ghatol
150 linhas
4.7 KiB
HTML
150 linhas
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Node JS Copter Demo</title>
|
|
<script src="nodecopter-client.js"></script>
|
|
<script src="socket.io.min.js"></script>
|
|
<script src="jquery.min.js"></script>
|
|
<script>
|
|
$(function () {
|
|
|
|
function startArDRoneStream() {
|
|
new NodecopterStream(document.getElementById("placeholder"), {port: 3001});
|
|
}
|
|
|
|
function startCameraFeed() {
|
|
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
|
|
|
|
var constraints = {audio: false, video: true};
|
|
var video = document.querySelector("video");
|
|
|
|
function successCallback(stream) {
|
|
window.stream = stream; // stream available to console
|
|
if (window.URL) {
|
|
video.src = window.URL.createObjectURL(stream);
|
|
} else {
|
|
video.src = stream;
|
|
}
|
|
video.play();
|
|
}
|
|
|
|
function errorCallback(error){
|
|
console.log("navigator.getUserMedia error: ", error);
|
|
}
|
|
|
|
navigator.getUserMedia(constraints, successCallback, errorCallback);
|
|
|
|
}
|
|
function startArDroneController(){
|
|
var socket = io.connect('http://localhost:3002');
|
|
socket.on('connect', function () { // TIP: you can avoid listening on `connect` and listen on events directly too!
|
|
console.log("Connection Successful");
|
|
|
|
});
|
|
|
|
socket.on('event', function (data) {
|
|
|
|
if(data.name=="battery"){
|
|
$("#battery-indicator").css('width',data.value+'%');
|
|
$("#battery-value").html(data.value+'%');
|
|
}
|
|
});
|
|
|
|
$("#takeoff").click(function(){
|
|
console.log("Asking Server to send takeoff command to Ar Drone");
|
|
socket.emit('event',{name:"takeoff"});
|
|
});
|
|
$("#spin").click(function(){
|
|
console.log("Asking Server to send spin command to Ar Drone");
|
|
socket.emit('event',{name:"spin"});
|
|
});
|
|
$("#stop").click(function(){
|
|
console.log("Asking Server to send stop command to Ar Drone");
|
|
socket.emit('event',{name:"stop"});
|
|
});
|
|
$("#land").click(function(){
|
|
console.log("Asking Server to send land command to Ar Drone");
|
|
socket.emit('event',{name:"land"});
|
|
});
|
|
|
|
}
|
|
startArDRoneStream();
|
|
startCameraFeed();
|
|
startArDroneController();
|
|
|
|
})
|
|
</script>
|
|
<style>
|
|
td {
|
|
border:1px solid black;
|
|
border-radius:10px;
|
|
padding:10px;
|
|
}
|
|
button{
|
|
font-size: 10pt;
|
|
}
|
|
#battery{
|
|
border:1px solid black;
|
|
width:500px;
|
|
height:20px;
|
|
text-align: center;
|
|
}
|
|
.bar {
|
|
margin: 5px 0 3px;
|
|
border: 6px solid #333;
|
|
background: #333;
|
|
overflow: hidden;
|
|
border-radius: 50px;
|
|
-moz-border-radius: 50px;
|
|
-webkit-border-radius: 50px;
|
|
box-shadow: 1px 1px 1px #777;
|
|
-moz-box-shadow: 1px 1px 1px #777;
|
|
-webkit-box-shadow: 1px 1px 1px #777;
|
|
}
|
|
.bar > span {
|
|
display: block;
|
|
height: 20px;
|
|
border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
}
|
|
|
|
.color0 > span {
|
|
background-color: #FF0000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Ar Drone NodeJs Demo</h1>
|
|
<h4>Built using nodejs, socket.io, node-ar-drone and dronestream - By Rohit Ghatol</h4>
|
|
<table>
|
|
<tr>
|
|
<td >
|
|
<button id="takeoff">Take Off</button>
|
|
<button id="spin">Start Spinning</button>
|
|
<button id="stop">Stop & Hover</button>
|
|
<button id="land">Land</button>
|
|
|
|
</td>
|
|
<td>
|
|
|
|
<span>Battery</span> - <span id="battery-value"></span>
|
|
<div class="bar color0">
|
|
<span id="battery-indicator" style="width:50%"></span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h1>Ar Drone Parrot Feed</h1>
|
|
<div id="placeholder"></div>
|
|
</td>
|
|
<td>
|
|
<h1>Laptop Camera Feed</h1>
|
|
<video id="live" width="640" height="360" autoplay></video>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |