|
@@ -0,0 +1,362 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>Aisky-coffee</title>
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
+
|
|
|
+ <!-- 新 Bootstrap4 核心 CSS 文件 -->
|
|
|
+ <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
|
|
|
+
|
|
|
+ <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
|
|
|
+ <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
+
|
|
|
+ <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
|
|
|
+ <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
|
|
|
+
|
|
|
+ <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
|
|
|
+ <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
|
|
|
+
|
|
|
+ <!--可用來建立使用者小圖示-->
|
|
|
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
+
|
|
|
+
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ margin:0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-dark .navbar-nav .nav-link {
|
|
|
+ color: white;
|
|
|
+ cursor: pointer;
|
|
|
+ text-decoration:none;
|
|
|
+ width: 110px;
|
|
|
+ height: 46px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-top {
|
|
|
+ line-height:40px;
|
|
|
+ background-color: #C4C4C4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .website_title{
|
|
|
+ font-family: Roboto;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-nav > li{
|
|
|
+ float: none;
|
|
|
+ display: inline-block;
|
|
|
+ width: 100px;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-nav > li a{
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-page {
|
|
|
+ margin-top: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-title {
|
|
|
+ font-family: Roboto;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .flex {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .set-link {
|
|
|
+ display: inline-block;
|
|
|
+ width: 350px;
|
|
|
+ height: 100px;
|
|
|
+ line-height: 100px;
|
|
|
+ background: #008CBA;
|
|
|
+ border: 1px solid #CFCFCF;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 36px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media(max-width:373px){
|
|
|
+ .card {
|
|
|
+ margin-right: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media(max-width:577px){
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ @media(min-width:576px){
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ @media(min-width:768px){
|
|
|
+ .navbar-nav > li {
|
|
|
+ margin-left: 0px;
|
|
|
+ }
|
|
|
+ .navbar-nav .li-block {
|
|
|
+ display:none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media(min-width:991px){
|
|
|
+ .navbar-nav > li {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .navbar-nav .li-block {
|
|
|
+ display:none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media(min-width:1200px){
|
|
|
+ .navbar-nav > li {
|
|
|
+ margin-left: 50px;
|
|
|
+ }
|
|
|
+ .navbar-nav .li-block {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media(min-width:1400px){
|
|
|
+ .navbar-nav .li-block {
|
|
|
+ display: inline-block;
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ @media(min-width:1689px) {
|
|
|
+ .navbar-nav > li {
|
|
|
+ margin-left: 50px;
|
|
|
+ }
|
|
|
+ .navbar-nav .li-block {
|
|
|
+ display: inline-block;
|
|
|
+ width: 500px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ </style>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ <!--//影像串流-->
|
|
|
+ <!--function Btx() {-->
|
|
|
+ <!--console.log('test');-->
|
|
|
+ <!--console.log(document.getElementById("img3"));-->
|
|
|
+ <!--document.getElementById("img3").src = "{{url_for('main.video_feed_views')}}";-->
|
|
|
+ <!--$.get("/udp_client",'OK' , function(resText){-->
|
|
|
+ <!--console.log(resText);-->
|
|
|
+ <!--}, 'text');-->
|
|
|
+ <!--};-->
|
|
|
+
|
|
|
+
|
|
|
+ <!--function Btn() {-->
|
|
|
+ <!--document.getElementById("img3").src = "../static/img/PV.jpg";-->
|
|
|
+ <!--$.post("/udp_client", "OK", function(){-->
|
|
|
+ <!--console.log(resText);-->
|
|
|
+ <!--}, 'text');-->
|
|
|
+ <!--$.post('/video_feed', "OK", function(){-->
|
|
|
+ <!--console.log(resText);-->
|
|
|
+ <!--}, 'text');-->
|
|
|
+ <!--};-->
|
|
|
+
|
|
|
+ </script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <nav class="fixed-top">
|
|
|
+ <nav class="navbar navbar-expand-md nav-top justify-content-center">
|
|
|
+ <div>
|
|
|
+ <span class="website_title">影像串流</span>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
|
|
|
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
|
|
|
+ <span class="navbar-toggler-icon"></span>
|
|
|
+ </button>
|
|
|
+ <div class="collapse navbar-collapse" id="collapsibleNavbar">
|
|
|
+ <ul class="navbar-nav">
|
|
|
+ <li class="nav-item">
|
|
|
+ <a class="nav-link" href="/">首頁</a>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a class="nav-link" href="#">關於我們</a>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a class="nav-link" href="#">資訊</a>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a class="nav-link" href="#">聯絡方法</a>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a class="nav-link" href="/video">影像串流</a>
|
|
|
+ </li>
|
|
|
+ <li class="li-block"></li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a class="nav-link" href="/logout">Logout</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ </nav>
|
|
|
+ <div class="main-page">
|
|
|
+ <!--<form method="" action="">-->
|
|
|
+ <div class="container-fluid">
|
|
|
+ <div class="row" style="margin-top:100px;">
|
|
|
+ <div class="col flex">
|
|
|
+ <!--<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">-->
|
|
|
+ <!--<div class="page-title text-center">-->
|
|
|
+ <!--<a class="set-link" type="button" href="/learn">1.CNN</a>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">-->
|
|
|
+ <!--<div class="page-title text-center">-->
|
|
|
+ <!--<a class="set-link" type="button" href="/learn">2.KNN</a>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;"></div>-->
|
|
|
+
|
|
|
+
|
|
|
+ <!--<div class="col-md-12" style="text-align:center;margin-top:5px;">-->
|
|
|
+ <!--<img id="img3" src="../static/img/PV.jpg" style="max-width:100%;height:auto;">-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div class="col-md-12 row" style="text-align:center;margin-top:5px;">-->
|
|
|
+ <!--<div class="col-md-6" style="text-align:center;margin-top:5px;">-->
|
|
|
+ <!--<button id="btn" style="font-size:20px" onclick="Btn()">關閉</button>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div class="col-md-6" style="text-align:center;margin-top:5px;">-->
|
|
|
+ <!--<button id="btx" style="font-size:20px" onclick="Btx()">影像串流</button>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+
|
|
|
+ <div class="col-md-12 row flex" style="text-align:center;margin-top:5px;">
|
|
|
+ <div class="col-md-4 row flex">
|
|
|
+ <img src="" id = "one"width = "320" height = "240">
|
|
|
+ </div>
|
|
|
+ <div class="col-md-4 row flex">
|
|
|
+ <img src="" id = "two" width = "320" height = "240">
|
|
|
+ </div>
|
|
|
+ <div class="col-md-4 row flex">
|
|
|
+ <img src="" id = "three" width = "320" height = "240">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-12 row flex" style="text-align:center;margin-top:5px;">
|
|
|
+ <div class="col-md-4 row flex">
|
|
|
+ <img src="" id = "four" width = "320" height = "240">
|
|
|
+ </div>
|
|
|
+ <div class="col-md-4 row flex">
|
|
|
+ <img src="" id = "five" width = "320" height = "240">
|
|
|
+ </div>
|
|
|
+ <div class="col-md-4 row flex">
|
|
|
+ <img src="" id = "six" width = "320" height = "240">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--</form>-->
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+ <script>
|
|
|
+ const img = document.querySelector('#one');
|
|
|
+ const WS_URL = 'ws:///60.250.156.230:8088';
|
|
|
+ const ws = new WebSocket(WS_URL);
|
|
|
+ let urlObject;
|
|
|
+ ws.onopen = () => console.log(`Connected to ${WS_URL}`);
|
|
|
+ ws.onmessage = message => {
|
|
|
+ const arrayBuffer = message.data;
|
|
|
+ if(urlObject){
|
|
|
+ URL.revokeObjectURL(urlObject);
|
|
|
+ }
|
|
|
+ urlObject = URL.createObjectURL(new Blob([arrayBuffer]));
|
|
|
+ img.src = urlObject;
|
|
|
+ }
|
|
|
+ const img1 = document.querySelector('#two');
|
|
|
+ const WS_URL1 = 'ws:///60.250.156.230:8089';
|
|
|
+ const ws1 = new WebSocket(WS_URL1);
|
|
|
+ let urlObject1;
|
|
|
+ ws1.onopen = () => console.log(`Connected to ${WS_URL1}`);
|
|
|
+ ws1.onmessage = message1 => {
|
|
|
+ const arrayBuffer1 = message1.data;
|
|
|
+ if(urlObject1){
|
|
|
+ URL.revokeObjectURL(urlObject1);
|
|
|
+ }
|
|
|
+ urlObject1 = URL.createObjectURL(new Blob([arrayBuffer1]));
|
|
|
+ img1.src = urlObject1;
|
|
|
+ }
|
|
|
+ const img2 = document.querySelector('#three');
|
|
|
+ const WS_URL2 = 'ws:///60.250.156.230:8090';
|
|
|
+ const ws2 = new WebSocket(WS_URL2);
|
|
|
+ let urlObject2;
|
|
|
+ ws2.onopen = () => console.log(`Connected to ${WS_URL2}`);
|
|
|
+ ws2.onmessage = message2 => {
|
|
|
+ const arrayBuffer2 = message2.data;
|
|
|
+ if(urlObject2){
|
|
|
+ URL.revokeObjectURL(urlObject2);
|
|
|
+ }
|
|
|
+ urlObject2 = URL.createObjectURL(new Blob([arrayBuffer2]));
|
|
|
+ img2.src = urlObject2;
|
|
|
+ }
|
|
|
+ const img3 = document.querySelector('#four');
|
|
|
+ const WS_URL3 = 'ws:///60.250.156.230:8091';
|
|
|
+ const ws3 = new WebSocket(WS_URL3);
|
|
|
+ let urlObject3;
|
|
|
+ ws3.onopen = () => console.log(`Connected to ${WS_URL3}`);
|
|
|
+ ws3.onmessage = message3 => {
|
|
|
+ const arrayBuffer3 = message3.data;
|
|
|
+ if(urlObject3){
|
|
|
+ URL.revokeObjectURL(urlObject3);
|
|
|
+ }
|
|
|
+ urlObject3 = URL.createObjectURL(new Blob([arrayBuffer3]));
|
|
|
+ img3.src = urlObject3;
|
|
|
+ }
|
|
|
+ const img4 = document.querySelector('#five');
|
|
|
+ const WS_URL4 = 'ws:///60.250.156.230:8092';
|
|
|
+ const ws4 = new WebSocket(WS_URL4);
|
|
|
+ let urlObject4;
|
|
|
+ ws4.onopen = () => console.log(`Connected to ${WS_URL4}`);
|
|
|
+ ws4.onmessage = message4 => {
|
|
|
+ const arrayBuffer4 = message4.data;
|
|
|
+ if(urlObject4){
|
|
|
+ URL.revokeObjectURL(urlObject4);
|
|
|
+ }
|
|
|
+ urlObject4 = URL.createObjectURL(new Blob([arrayBuffer4]));
|
|
|
+ img4.src = urlObject4;
|
|
|
+ }
|
|
|
+ const img5 = document.querySelector('#six');
|
|
|
+ const WS_URL5 = 'ws:///60.250.156.230:8093';
|
|
|
+ const ws5 = new WebSocket(WS_URL5);
|
|
|
+ let urlObject5;
|
|
|
+ ws5.onopen = () => console.log(`Connected to ${WS_URL5}`);
|
|
|
+ ws5.onmessage = message5 => {
|
|
|
+ const arrayBuffer5 = message5.data;
|
|
|
+ if(urlObject5){
|
|
|
+ URL.revokeObjectURL(urlObject5);
|
|
|
+ }
|
|
|
+ urlObject5 = URL.createObjectURL(new Blob([arrayBuffer5]));
|
|
|
+ img5.src = urlObject5;
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</html>
|