video_test.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Aisky-coffee</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <!-- 新 Bootstrap4 核心 CSS 文件 -->
  8. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  9. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  10. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  11. <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
  12. <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  13. <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  14. <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  15. <!--可用來建立使用者小圖示-->
  16. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  17. <style>
  18. body {
  19. margin:0;
  20. }
  21. .navbar-dark .navbar-nav .nav-link {
  22. color: white;
  23. cursor: pointer;
  24. text-decoration:none;
  25. width: 110px;
  26. height: 46px;
  27. }
  28. .nav-top {
  29. line-height:40px;
  30. background-color: #C4C4C4;
  31. }
  32. .website_title{
  33. font-family: Roboto;
  34. font-style: normal;
  35. font-weight: normal;
  36. font-size: 30px;
  37. color: #000000;
  38. }
  39. .navbar-nav > li{
  40. float: none;
  41. display: inline-block;
  42. width: 100px;
  43. margin: 0 auto;
  44. text-align: center;
  45. }
  46. .navbar-nav > li a{
  47. font-size: 20px;
  48. }
  49. .main-page {
  50. margin-top: 200px;
  51. }
  52. .page-title {
  53. font-family: Roboto;
  54. font-style: normal;
  55. font-weight: bold;
  56. font-size: 36px;
  57. }
  58. .flex {
  59. display: flex;
  60. flex-direction: row;
  61. flex-wrap: wrap;
  62. justify-content: center;
  63. }
  64. .set-link {
  65. display: inline-block;
  66. width: 350px;
  67. height: 100px;
  68. line-height: 100px;
  69. background: #008CBA;
  70. border: 1px solid #CFCFCF;
  71. box-sizing: border-box;
  72. color: #FFFFFF;
  73. border-radius: 10px;
  74. font-size: 36px;
  75. }
  76. @media(max-width:373px){
  77. .card {
  78. margin-right: 0px;
  79. }
  80. }
  81. @media(max-width:577px){
  82. }
  83. @media(min-width:576px){
  84. }
  85. @media(min-width:768px){
  86. .navbar-nav > li {
  87. margin-left: 0px;
  88. }
  89. .navbar-nav .li-block {
  90. display:none;
  91. }
  92. }
  93. @media(min-width:991px){
  94. .navbar-nav > li {
  95. margin-left: 20px;
  96. }
  97. .navbar-nav .li-block {
  98. display:none;
  99. }
  100. }
  101. @media(min-width:1200px){
  102. .navbar-nav > li {
  103. margin-left: 50px;
  104. }
  105. .navbar-nav .li-block {
  106. display: inline-block;
  107. width: 100px;
  108. }
  109. }
  110. @media(min-width:1400px){
  111. .navbar-nav .li-block {
  112. display: inline-block;
  113. width: 200px;
  114. }
  115. }
  116. @media(min-width:1689px) {
  117. .navbar-nav > li {
  118. margin-left: 50px;
  119. }
  120. .navbar-nav .li-block {
  121. display: inline-block;
  122. width: 500px;
  123. }
  124. }
  125. </style>
  126. <script>
  127. /*
  128. <!--影像串流-->
  129. <!--function Btx() {-->
  130. <!--console.log('test');-->
  131. <!--console.log(document.getElementById("img3"));-->
  132. <!--document.getElementById("img3").src = "{{url_for('main.video_feed_views')}}";-->
  133. <!--$.get("/udp_client",'OK' , function(resText){-->
  134. <!--console.log(resText);-->
  135. <!--}, 'text');-->
  136. <!--};-->
  137. <!--function Btn() {-->
  138. <!--document.getElementById("img3").src = "../static/img/PV.jpg";-->
  139. <!--$.post("/udp_client", "OK", function(){-->
  140. <!--console.log(resText);-->
  141. <!--}, 'text');-->
  142. <!--$.post('/video_feed', "OK", function(){-->
  143. <!--console.log(resText);-->
  144. <!--}, 'text');-->
  145. <!--};-->
  146. */
  147. </script>
  148. </head>
  149. <body>
  150. <nav class="fixed-top">
  151. <nav class="navbar navbar-expand-md nav-top justify-content-center">
  152. <div>
  153. <span class="website_title">影像串流</span>
  154. </div>
  155. </nav>
  156. <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
  157. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
  158. <span class="navbar-toggler-icon"></span>
  159. </button>
  160. <div class="collapse navbar-collapse" id="collapsibleNavbar">
  161. <ul class="navbar-nav">
  162. <li class="nav-item">
  163. <a class="nav-link" href="/">首頁</a>
  164. </li>
  165. <li class="nav-item">
  166. <a class="nav-link" href="#">關於我們</a>
  167. </li>
  168. <li class="nav-item">
  169. <a class="nav-link" href="#">資訊</a>
  170. </li>
  171. <li class="nav-item">
  172. <a class="nav-link" href="#">聯絡方法</a>
  173. </li>
  174. <li class="nav-item">
  175. <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>
  176. </li>
  177. <li class="nav-item">
  178. <a class="nav-link" href="/video">影像串流</a>
  179. </li>
  180. <li class="li-block"></li>
  181. <li class="nav-item">
  182. <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>
  183. </li>
  184. <li class="nav-item">
  185. <a class="nav-link" href="/logout">Logout</a>
  186. </li>
  187. </ul>
  188. </div>
  189. </nav>
  190. </nav>
  191. <div class="main-page">
  192. <!--<div class="text-center">-->
  193. <!--<h1>模型選擇</h1>-->
  194. <!--</div>-->
  195. <!--<form method="" action="">-->
  196. <div class="container-fluid">
  197. <div class="row" style="margin-top:100px;">
  198. <div class="col flex">
  199. <!--<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;">-->
  200. <!--<div class="page-title text-center">-->
  201. <!--<a class="set-link" type="button" href="/learn">1.CNN</a>-->
  202. <!--</div>-->
  203. <!--</div>-->
  204. <!--<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;">-->
  205. <!--<div class="page-title text-center">-->
  206. <!--<a class="set-link" type="button" href="/learn">2.KNN</a>-->
  207. <!--</div>-->
  208. <!--</div>-->
  209. <!--<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>-->
  210. <!--<div class="col-md-12" style="text-align:center;margin-top:5px;">-->
  211. <!--<img id="img3" src="../static/img/PV.jpg" style="max-width:100%;height:auto;">-->
  212. <!--</div>-->
  213. <!--<div class="col-md-12 row" style="text-align:center;margin-top:5px;">-->
  214. <!--<div class="col-md-6" style="text-align:center;margin-top:5px;">-->
  215. <!--<button id="btn" style="font-size:20px" onclick="Btn()">關閉</button>-->
  216. <!--</div>-->
  217. <!--<div class="col-md-6" style="text-align:center;margin-top:5px;">-->
  218. <!--<button id="btx" style="font-size:20px" onclick="Btx()">影像串流</button>-->
  219. <!--</div>-->
  220. <!--</div>-->
  221. <img src="" id = "one" width = "70%" height = "70%">
  222. <!--<img src="" id = "one" width = "320" height = "240">-->
  223. </div>
  224. </div>
  225. </div>
  226. <!--</form>-->
  227. </div>
  228. </body>
  229. <script>
  230. // const img = document.querySelector('#one');
  231. const img = document.getElementById('one');
  232. const WS_URL = 'ws:///60.250.156.230:8088';
  233. const ws = new WebSocket(WS_URL);
  234. let urlObject;
  235. ws.onopen = () => console.log(`Connected to ${WS_URL}`);
  236. ws.onmessage = message => {
  237. const arrayBuffer = message.data;
  238. if(urlObject){
  239. URL.revokeObjectURL(urlObject);
  240. }
  241. urlObject = URL.createObjectURL(new Blob([arrayBuffer]));
  242. img.src = urlObject;
  243. }
  244. /*
  245. const img1 = document.querySelector('#two');
  246. const WS_URL1 = 'ws:///60.250.156.230:8089';
  247. const ws1 = new WebSocket(WS_URL1);
  248. let urlObject1;
  249. ws1.onopen = () => console.log(`Connected to ${WS_URL1}`);
  250. ws1.onmessage = message1 => {
  251. const arrayBuffer1 = message1.data;
  252. if(urlObject1){
  253. URL.revokeObjectURL(urlObject1);
  254. }
  255. urlObject1 = URL.createObjectURL(new Blob([arrayBuffer1]));
  256. img1.src = urlObject1;
  257. }
  258. */
  259. </script>
  260. </html>