|
|
@ -25,9 +25,11 @@
|
|
|
|
</head>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<body>
|
|
|
|
<h5>实时视频流</h5>
|
|
|
|
<h5>实时视频流</h5>
|
|
|
|
<img src="{{ url_for('video_feed') }}">
|
|
|
|
<img src="{{ url_for('startvadio') }}">
|
|
|
|
<button id="captureButton">Capture Frame</button>
|
|
|
|
<button type="button" onclick="capture()" >拍照</button>
|
|
|
|
<img id="frameImage" src="" alt="Captured Frame" style="display:none; width: 640px; height: 480px;">
|
|
|
|
<button type="button" onclick="startvadio()" >开始视频</button>
|
|
|
|
|
|
|
|
<button type="button" onclick="stopvadio()" >停止视频</button>
|
|
|
|
|
|
|
|
<!-- <img id="frameImage" src="" alt="Captured Frame" style="display:none; width: 640px; height: 480px;"> -->
|
|
|
|
<p> 小车控制界面</p>
|
|
|
|
<p> 小车控制界面</p>
|
|
|
|
<bodylink = "red">
|
|
|
|
<bodylink = "red">
|
|
|
|
<a href="control" target="_blank">小车控制</a>
|
|
|
|
<a href="control" target="_blank">小车控制</a>
|
|
|
@ -44,9 +46,7 @@
|
|
|
|
<button type="button" onclick="left()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-left" > </button>
|
|
|
|
<button type="button" onclick="left()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-left" > </button>
|
|
|
|
<button type="button" onclick="stop()" class="btn btn-lg btn-primary glyphicon glyphicon-stop"> </button>
|
|
|
|
<button type="button" onclick="stop()" class="btn btn-lg btn-primary glyphicon glyphicon-stop"> </button>
|
|
|
|
<button type="button" onclick="right()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-right" > </button>
|
|
|
|
<button type="button" onclick="right()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-right" > </button>
|
|
|
|
<!-- ---------------------------------------- -->
|
|
|
|
|
|
|
|
<button type="button" onclick="takePhoto()">拍照</button>
|
|
|
|
|
|
|
|
<!-- ---------------------------------------- -->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button id="rear" type="button" onclick="back()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-down" style="margin-left: 56px;"> </button>
|
|
|
|
<button id="rear" type="button" onclick="back()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-down" style="margin-left: 56px;"> </button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -67,6 +67,12 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button id="down" type="button" onclick="down()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-down" style="margin-left: 56px;"> </button>
|
|
|
|
<button id="down" type="button" onclick="down()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-down" style="margin-left: 56px;"> </button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<form id="sendCommandForm">
|
|
|
|
|
|
|
|
回复指令: <textarea id="message"></textarea><br>
|
|
|
|
|
|
|
|
<button type="button" onclick="sendCommand()">发送指令</button>
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script src='/Decoder.js'></script>
|
|
|
|
<script src='/Decoder.js'></script>
|
|
|
@ -91,6 +97,7 @@
|
|
|
|
ws.onclose = function (e) {
|
|
|
|
ws.onclose = function (e) {
|
|
|
|
console.log('Client disconnected')
|
|
|
|
console.log('Client disconnected')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -98,31 +105,106 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function() {
|
|
|
|
function sendCommand() {
|
|
|
|
$('#captureButton').click(function() {
|
|
|
|
var message = document.getElementById('message').value;
|
|
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
$.ajax({
|
|
|
|
url: '/capture_frame', // 后端路由地址
|
|
|
|
type: "POST",
|
|
|
|
type: 'GET',
|
|
|
|
url: "/control/sendit",
|
|
|
|
success: function(response) {
|
|
|
|
data: JSON.stringify({
|
|
|
|
// 将响应中的图像数据设置到img标签的src属性
|
|
|
|
message: message
|
|
|
|
$('#frameImage').attr('src', 'data:image/jpeg;base64,' + response);
|
|
|
|
}),
|
|
|
|
// 显示图像
|
|
|
|
contentType: "application/json",
|
|
|
|
$('#frameImage').show();
|
|
|
|
success: function (result) {
|
|
|
|
|
|
|
|
console.log(result);
|
|
|
|
|
|
|
|
alert("指令发送成功!");
|
|
|
|
},
|
|
|
|
},
|
|
|
|
error: function (error) {
|
|
|
|
error: function (error) {
|
|
|
|
console.log('Error:', error);
|
|
|
|
console.log('Error:', error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function capture() {
|
|
|
|
|
|
|
|
console.log("132465789891651354684");
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type: "GET",
|
|
|
|
|
|
|
|
dataType: "json",
|
|
|
|
|
|
|
|
url: "capture" ,
|
|
|
|
|
|
|
|
data: $('#form1').serialize(), //提交的数据
|
|
|
|
|
|
|
|
success: function (result) {
|
|
|
|
|
|
|
|
console.log(result); //打印服务端返回的数据(调试用)
|
|
|
|
|
|
|
|
if (result.resultCode == 200) {
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
error : function() {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function startvadio() {
|
|
|
|
|
|
|
|
// console.log("132465789891651354684");
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type: "GET",
|
|
|
|
|
|
|
|
dataType: "json",
|
|
|
|
|
|
|
|
url: "startvadio" ,
|
|
|
|
|
|
|
|
data: $('#form1').serialize(), //提交的数据
|
|
|
|
|
|
|
|
success: function (result) {
|
|
|
|
|
|
|
|
console.log(result); //打印服务端返回的数据(调试用)
|
|
|
|
|
|
|
|
if (result.resultCode == 200) {
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
error : function() {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
function printClicked() {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function stopvadio() {
|
|
|
|
// console.log("132465789891651354684");
|
|
|
|
// console.log("132465789891651354684");
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type: "GET",
|
|
|
|
|
|
|
|
dataType: "json",
|
|
|
|
|
|
|
|
url: "stopvadio" ,
|
|
|
|
|
|
|
|
data: $('#form1').serialize(), //提交的数据
|
|
|
|
|
|
|
|
success: function (result) {
|
|
|
|
|
|
|
|
console.log(result); //打印服务端返回的数据(调试用)
|
|
|
|
|
|
|
|
if (result.resultCode == 200) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// ---------------------------------------
|
|
|
|
;
|
|
|
|
function takePhoto() {
|
|
|
|
},
|
|
|
|
window.location.href = "{{ url_for('take_photo') }}"; // 重定向到拍照请求
|
|
|
|
error : function() {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// ---------------------------------------
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// $(document).ready(function() {
|
|
|
|
|
|
|
|
// $('#captureButton').click(function() {
|
|
|
|
|
|
|
|
// $.ajax({
|
|
|
|
|
|
|
|
// url: '/capture_frame', // 后端路由地址
|
|
|
|
|
|
|
|
// type: 'GET',
|
|
|
|
|
|
|
|
// success: function(response) {
|
|
|
|
|
|
|
|
// // 将响应中的图像数据设置到img标签的src属性
|
|
|
|
|
|
|
|
// $('#frameImage').attr('src', 'data:image/jpeg;base64,' + response);
|
|
|
|
|
|
|
|
// // 显示图像
|
|
|
|
|
|
|
|
// $('#frameImage').show();
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// error: function(error) {
|
|
|
|
|
|
|
|
// console.log('Error:', error);
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
function printClicked() {
|
|
|
|
|
|
|
|
// console.log("132465789891651354684");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function forward() {
|
|
|
|
function forward() {
|
|
|
|
console.log("132465789891651354684");
|
|
|
|
console.log("132465789891651354684");
|
|
|
|
$.ajax({
|
|
|
|
$.ajax({
|
|
|
|