更新 即時影像串流位置

增加RTSP

Parking_spaces/Controllers/EngineeringController.cs

@@ -57,6 +57,11 @@ namespace Parking_spaces.Controllers
         {
             return View();
         }
+
+        public IActionResult Engineering_RTSP()
+        {
+            return View();
+        }
         public IActionResult Single_violation_detail(string id)
         {
             ViewBag.parking_spaces_name = id;

Parking_spaces/Views/Engineering/Engineering_RTSP.cshtml

@@ -0,0 +1,264 @@
+
+@{
+    ViewData["Title"] = "Engineering_RTSP";
+    Layout = "~/Views/Shared/_Layout_Engineering.cshtml";
+}
+
+
+<style>
+    #img_id {
+        width: 80%;
+        display: block; /* 使圖像為塊級元素，以便使用 margin:auto; */
+        margin: auto; /* 將圖像置中 */
+    }
+</style>
+<h1>即時影像</h1>
+<button class="btn btn-outline-info" onclick="Yuntech_RTSP()">雲科即時影像</button>
+
+<div id="RTSP_stop_id" style="display:none">
+    <button class="btn btn-danger" style="float:right"  onclick="RTSP_Close();"> 關閉</button>
+    <img id="img_id"/>
+</div>
+
+<div>
+    <table class="table">
+        <thead>
+            <tr>
+                <th>
+                    停車場位置
+                </th>
+                <th>
+                    IP位置
+                </th>
+                <th>
+                    使用Port
+                </th>
+                <th>
+                    攝像頭使用模式
+                </th>
+                <th>
+
+                </th>
+
+            </tr>
+        </thead>
+
+        <tbody id="demo">
+        </tbody>
+    </table>
+</div>
+
+
+
+
+
+
+<!--跳轉頁面-->
+<script>
+    function Yuntech_RTSP() {
+        window.open ("http://140.125.50.178:7006/","_blank");
+    }
+</script>
+
+
+<!--獲取資料-->
+<script>
+    var token = localStorage.getItem('token_park_space');
+    var token_ckeck //= document.getElementById("token_ckeck_id").value
+    var position //職位
+    function get_data() {
+        //token_check = document.getElementById("token_check_id").value
+        console.log(token_check)
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Parking_spaces_cam",
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            success: function (Model) {
+                console.log(Model)
+                set_data(Model)
+                
+
+            }
+        });
+    }
+    
+</script>
+
+
+<!--放置資料-->
+<script>
+    function set_data(Model) {
+        table = "<tr>";
+        console.log(Model.length)
+        if (Model.length > 0) {
+            for (var i = 0; i < Model.length; i++) {
+                if (Model[i].parking_spaces_name != null) {
+                    if (parseInt(Model[i].port) > 400) {
+                        table += "<td>" + Model[i].parking_spaces_name + "</td>"
+                        table += "<td>" + Model[i].ip + "</td>"
+                        table += "<td>" + Model[i].port + "</td>"
+                        if (Model[i].mode == "pass") { mode = "停車場進出" }
+                        if (Model[i].mode == "violation") { mode = "判斷違規左右轉" }
+                        if (Model[i].mode == "car_num_check") { mode = "數量確認" }
+                        table += "<td>" + mode + "</td>"
+                        table += "<td>" + '<button class="btn btn-outline-success " onclick="CAM_RTSP(' + "'"  + Model[i].ip + ":" + Model[i].port + "'" + ')">查看影像</button>'
+                    }
+                    table += "</tr>"
+                    table += "<tr>"
+                }
+
+
+            }
+        }
+        document.getElementById("demo").innerHTML = table
+    }
+
+
+</script>
+
+
+
+<!--串流影像-->
+<script>
+    var IP_1
+    var stop = false
+    function CAM_RTSP(IP) {
+        console.log(IP)
+        IP_1 = IP
+        $.ajax({
+            type: "GET",
+            url: 'http://140.125.20.183:7705/IP/'+IP,
+            headers: {
+                'Authorization': token
+            },
+            success: function (response) {
+                //webcam_view.showModal()
+                stop = false
+                RTSP_START(response)
+                token_check = "true"
+                document.getElementById("RTSP_stop_id").style.display = "block"
+                //from_token_import_id()
+            },
+            
+        });
+    }
+    function CAM_RTSP_1() {
+        console.log(IP_1)
+        $.ajax({
+            type: "GET",
+            url: 'http://140.125.20.183:7705/IP/' + IP_1,
+            headers: {
+                'Authorization': token
+            },
+            success: function (response) {
+                //webcam_view.showModal()
+                RTSP_START(response)
+
+                token_check = "true"
+                //from_token_import_id()
+            },
+
+        });
+    }
+</script>
+
+
+<!--開啟視窗並串流-->
+<script>
+    function RTSP_START(img_base_64) {
+        //console.log(img)
+        img = document.getElementById("img_id")
+        img.src = img_base_64
+        if (stop == false){
+            setTimeout('CAM_RTSP_1()', 20);
+        }
+        
+    }
+</script>
+
+<!--關閉串流-->
+<script>
+    function RTSP_Close(){
+        //webcam_view.close()
+        stop = true
+        document.getElementById("RTSP_stop_id").style.display="none"
+    }
+</script>
+
+<!--檢查token-->
+<script>
+    function token_check() {
+        // 检查本地存储中是否存在JWT令牌
+        var token = localStorage.getItem('token_park_space');
+        console.log(token)
+        $.ajax({
+            type: "GET",
+            url: 'http://140.125.20.183:7700/Users/token_check',
+            headers: {
+                'Authorization': token
+            },
+            success: function (response) {
+                console.log(response)
+                token_check = "true"
+                from_token_import_id()
+            },
+            error: function (xhr) {
+                console.log("1")
+                token_check = "false"
+                window.location.href = '/';
+                //get_data()
+                // 处理错误响应，例如跳转到未授权页面
+                //window.location.href = 'https://example.com/unauthorized_page';
+            }
+        });
+    }
+
+    function from_token_import_id() {
+        var token = localStorage.getItem('token_park_space');
+        $.ajax({
+            type: "GET",
+            url: 'http://140.125.20.183:7700/Users/token-' + token,
+            headers: {
+                'Authorization': token
+            },
+            success: function (response) {
+                console.log(response)
+                from_id_import_user_data(response)
+
+
+            }
+        });
+    }
+    function from_id_import_user_data(id) {
+        var token = localStorage.getItem('token_park_space');
+        $.ajax({
+            type: "GET",
+            url: 'http://140.125.20.183:7700/Users/user_id-' + id,
+            headers: {
+                'Authorization': token
+            },
+            success: function (model) {
+                model = model.result
+                position = model.lastname
+                console.log(position)
+                if (position == "engineer") {
+                    get_data()
+                }
+                else {
+                    window.location.href = '/';
+                }
+
+
+            }
+        });
+    }
+</script>
+
+<!--開機自啟-->
+<script>
+    window.onload = token_check;
+</script>

Parking_spaces/Views/Shared/_Layout_Engineering.cshtml

@@ -78,6 +78,7 @@
                         <a class="collapse-item" asp-controller="Engineering" asp-action="Engineering_CAM">查看WEBCAM</a>
                         <a class="collapse-item" asp-controller="Engineering" asp-action="Engineering_LED">字幕機顯示</a>
                         <a class="collapse-item" asp-controller="Engineering" asp-action="Engineering_Violation"> 違規區域</a>
+                        <a class="collapse-item" asp-controller="Engineering" asp-action="Engineering_RTSP"> 即時影像</a>
                     </div>
                 </div>
             </li>