You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
188 lines
5.9 KiB
188 lines
5.9 KiB
<!--
|
|
index.html
|
|
|
|
-->
|
|
|
|
<html>
|
|
<head>
|
|
<title>小车拍摄画面</title>
|
|
<link rel="stylesheet" href='/style.css'/>
|
|
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" media="screen">
|
|
<script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
|
|
<style type="text/css">
|
|
#front {
|
|
margin-left: 40px;
|
|
margin-bottom: 3px;
|
|
}
|
|
#rear{
|
|
margin-top: 3px;
|
|
margin-left: 40px;
|
|
}
|
|
.btn{
|
|
background: #e8080b;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>MJRoBot Lab Live Streaming</h1>
|
|
<div>
|
|
<img src="{{ url_for('video_feed') }}" width="45%" style="display:inline-block;">
|
|
<!-- <img src="{{ url_for('capture') }}" alt="Captured Image" width="45%" style="display:inline-block;"> -->
|
|
</div>
|
|
<hr>
|
|
<p> 小车控制界面</p>
|
|
<bodylink = "red">
|
|
<a href="control" target="_blank">小车控制</a>
|
|
<div id="container" class="container">
|
|
|
|
<div>
|
|
<button id="front" type="button" onclick="forward()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-up"> </button>
|
|
</div>
|
|
<div>
|
|
<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="right()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-right"> </button>
|
|
</div>
|
|
<div>
|
|
<button id="rear" type="button" onclick="back()" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-down"> </button>
|
|
</div>
|
|
<div>
|
|
<button id="screenshot" type="button" onclick="refreshPage()" class="btn btn-lg btn-primary glyphicon glyphicon-camera">截图</button>
|
|
</div>
|
|
</div>
|
|
<script src='/Decoder.js'></script>
|
|
<script src='/YUVCanvas.js'></script>
|
|
<script src='/Player.js'></script>
|
|
<script>
|
|
// player
|
|
window.player = new Player({ useWorker: true, webgl: 'auto', size: { width: 848, height: 480 } })
|
|
var playerElement = document.getElementById('viewer')
|
|
playerElement.appendChild(window.player.canvas)
|
|
// Websocket
|
|
var wsUri = window.location.protocol.replace(/http/,'ws')+'//'+window.location.hostname+':9000'
|
|
var ws = new WebSocket(wsUri)
|
|
ws.binaryType = 'arraybuffer'
|
|
ws.onopen = function (e) {
|
|
console.log('Client connected')
|
|
ws.onmessage = function (msg) {
|
|
// decode stream
|
|
window.player.decode(new Uint8Array(msg.data));
|
|
}
|
|
}
|
|
ws.onclose = function (e) {
|
|
console.log('Client disconnected')
|
|
}
|
|
</script>
|
|
<script type="text/javascript">
|
|
function forward() {
|
|
$.ajax({
|
|
type: "GET",
|
|
dataType: "json",
|
|
url: "/control/forward" ,
|
|
data: $('#form1').serialize(), //提交的数据
|
|
success: function (result) {
|
|
console.log(result); //打印服务端返回的数据(调试用)
|
|
if (result.resultCode == 200) {
|
|
}
|
|
;
|
|
},
|
|
error : function() {
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
function back() {
|
|
$.ajax({
|
|
type: "GET",
|
|
dataType: "json",
|
|
url: "/control/back" ,
|
|
data: $('#form1').serialize(), //提交的数据
|
|
success: function (result) {
|
|
console.log(result); //打印服务端返回的数据(调试用)
|
|
if (result.resultCode == 200) {
|
|
}
|
|
;
|
|
},
|
|
error : function() {
|
|
|
|
}
|
|
});
|
|
} function right() {
|
|
$.ajax({
|
|
type: "GET",
|
|
dataType: "json",
|
|
url: "/control/right" ,
|
|
data: $('#form1').serialize(), //提交的数据
|
|
success: function (result) {
|
|
console.log(result); //打印服务端返回的数据(调试用)
|
|
if (result.resultCode == 200) {
|
|
}
|
|
;
|
|
},
|
|
error : function() {
|
|
|
|
}
|
|
});
|
|
} function left() {
|
|
$.ajax({
|
|
type: "GET",
|
|
dataType: "json",
|
|
url: "/control/left" ,
|
|
data: $('#form1').serialize(), //提交的数据
|
|
success: function (result) {
|
|
console.log(result); //打印服务端返回的数据(调试用)
|
|
if (result.resultCode == 200) {
|
|
}
|
|
;
|
|
},
|
|
error : function() {
|
|
|
|
}
|
|
});
|
|
} function stop() {
|
|
$.ajax({
|
|
type: "GET",
|
|
dataType: "json",
|
|
url: "/control/stop" ,
|
|
data: $('#form1').serialize(), //提交的数据
|
|
success: function (result) {
|
|
console.log(result); //打印服务端返回的数据(调试用)
|
|
if (result.resultCode == 200) {
|
|
}
|
|
;
|
|
},
|
|
error : function() {
|
|
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<!-- <script>
|
|
function myFunction() {
|
|
$.ajax({
|
|
url: "/capture",
|
|
method: "GET",
|
|
dataType: "blob", // 设置响应类型为二进制数据流
|
|
success: function(data) { // 回调函数
|
|
var img = new Image();
|
|
img.src = URL.createObjectURL(data); // 构建URL对象并将响应数据传入其中
|
|
document.body.appendChild(img); // 将Image对象添加到HTML DOM中显示
|
|
}
|
|
});
|
|
}
|
|
</script> -->
|
|
<script>
|
|
function refreshPage() {
|
|
location.reload(); // 刷新页面
|
|
}
|
|
</script>
|
|
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
|