<!--
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>