上傳檔案到 'html_socket_m5'

html_socket_m5/M5??????????.txt

@@ -0,0 +1,7 @@
+網頁在http://60.250.156.230:5006/video
+1./var/www/html/NodeServer/server.js
+2./home/gs1801/CoffeeProject/app/templates/video.html
+
+server.js 為接收M5相機的傳送的影像與設定相關資料，如要新增相機，請參考程式內容。
+
+video.html為顯示影像畫面頁面，詳情請參考程式內容。

html_socket_m5/server.js

@@ -0,0 +1,134 @@
+const path = require('path');
+const express = require('express');
+const WebSocket = require('ws');
+const app = express();
+
+const path1 = require('path');
+const express1 = require('express');
+const WebSocket1 = require('ws');
+
+const path2 = require('path');
+const express2 = require('express');
+const WebSocket2 = require('ws');
+
+const path3 = require('path');
+const express3 = require('express');
+const WebSocket3 = require('ws');
+
+const path4 = require('path');
+const express4 = require('express');
+const WebSocket4 = require('ws');
+
+const path5 = require('path');
+const express5 = require('express');
+const WebSocket5 = require('ws');
+
+
+
+const WS_PORT  = 8088;
+const HTTP_PORT = 8000;
+const WS_PORT1 = 8089;
+const WS_PORT2 = 8090;
+const WS_PORT3 = 8091;
+const WS_PORT4 = 8092;
+const WS_PORT5 = 8093;
+
+const wsServer = new WebSocket.Server({port: WS_PORT}, ()=> console.log(`WS Server is listening at ${WS_PORT}`));
+let connectedClients = [];
+wsServer.on('connection', (ws, req)=>{
+    console.log('Connected');
+    connectedClients.push(ws);
+
+    ws.on('message', data => {
+        connectedClients.forEach((ws,i)=>{
+            if(ws.readyState === ws.OPEN){
+                ws.send(data);
+            }else{
+                connectedClients.splice(i ,1);
+            }
+        })
+    });
+});
+const wsServer1 = new WebSocket.Server({port: WS_PORT1}, ()=> console.log(`WS Server is listening at ${WS_PORT1}`));
+let connectedClients1 = [];
+wsServer1.on('connection', (ws1, req)=>{
+    console.log('Connected');
+    connectedClients1.push(ws1);
+
+    ws1.on('message', data1 => {
+        connectedClients1.forEach((ws1,i)=>{
+            if(ws1.readyState === ws1.OPEN){
+                ws1.send(data1);
+            }else{
+                connectedClients1.splice(i ,1);
+            }
+        })
+    });
+});
+const wsServer2 = new WebSocket.Server({port: WS_PORT2}, ()=> console.log(`WS Server is listening at ${WS_PORT2}`));
+let connectedClients2 = [];
+wsServer2.on('connection', (ws2, req)=>{
+    console.log('Connected');
+    connectedClients2.push(ws2);
+
+    ws2.on('message', data2 => {
+        connectedClients2.forEach((ws2,i)=>{
+            if(ws2.readyState === ws2.OPEN){
+                ws2.send(data2);
+            }else{
+                connectedClients2.splice(i ,1);
+            }
+        })
+    });
+});
+const wsServer3 = new WebSocket.Server({port: WS_PORT3}, ()=> console.log(`WS Server is listening at ${WS_PORT3}`));
+let connectedClients3 = [];
+wsServer3.on('connection', (ws3, req)=>{
+    console.log('Connected');
+    connectedClients3.push(ws3);
+
+    ws3.on('message', data3 => {
+        connectedClients3.forEach((ws3,i)=>{
+            if(ws3.readyState === ws3.OPEN){
+                ws3.send(data3);
+            }else{
+                connectedClients3.splice(i ,1);
+            }
+        })
+    });
+});
+const wsServer4 = new WebSocket.Server({port: WS_PORT4}, ()=> console.log(`WS Server is listening at ${WS_PORT4}`));
+let connectedClients4 = [];
+wsServer4.on('connection', (ws4, req)=>{
+    console.log('Connected');
+    connectedClients4.push(ws4);
+
+    ws4.on('message', data4 => {
+        connectedClients4.forEach((ws4,i)=>{
+            if(ws4.readyState === ws4.OPEN){
+                ws4.send(data4);
+            }else{
+                connectedClients4.splice(i ,1);
+            }
+        })
+    });
+});
+const wsServer5 = new WebSocket.Server({port: WS_PORT5}, ()=> console.log(`WS Server is listening at ${WS_PORT5}`));
+let connectedClients5 = [];
+wsServer5.on('connection', (ws5, req)=>{
+    console.log('Connected');
+    connectedClients5.push(ws5);
+
+    ws5.on('message', data5 => {
+        connectedClients5.forEach((ws5,i)=>{
+            if(ws5.readyState === ws5.OPEN){
+                ws5.send(data5);
+            }else{
+                connectedClients5.splice(i ,1);
+            }
+        })
+    });
+});
+app.get('/client',(req,res)=>res.sendFile(path.resolve(__dirname, '/home/gs1801/CoffeeProject/app/templates/video.html')));
+app.listen(HTTP_PORT, ()=> console.log(`HTTP server listening at ${HTTP_PORT}`));
+

html_socket_m5/video.html

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