Adds support HomeKit cameras!

2022-09-01 14:15:35 +03:00
parent 4f92608f33
commit c0c96cfcdb
31 changed files with 3206 additions and 32 deletions
@@ -42,11 +42,8 @@
    </style>
 </head>
 <body>
-<div class="header">
-    <input id="src" type="text" placeholder="url">
-    <a id="add" href="#">add</a>
-</div>
-<table id="devices">
+<script src="main.js"></script>
+<table>
    <thead>
    <tr>
        <th>Kind</th>
@@ -61,22 +58,18 @@
        0, location.pathname.lastIndexOf("/")
    );

-    function reload() {
-        fetch(`${baseUrl}/api/devices`).then(r => {
-            r.json().then(data => {
-                let html = '';
-
-                data.forEach(function (item) {
-                    html += `<tr><td>${item.kind}</td><td>${item.title}</td></tr>`;
-                })
-
-                let content = document.getElementById('devices').getElementsByTagName('tbody')[0];
-                content.innerHTML = html
-            });
+    fetch(`${baseUrl}/api/devices`)
+        .then(r => r.json())
+        .then(data => {
+            document.querySelector("body > table > tbody").innerHTML =
+                data.reduce((html, item) => {
+                    return html + `<tr>
+                        <td>${item.kind}</td>
+                        <td>${item.title}</td>
+                    </tr>`;
+                }, '');
        })
-    }
-
-    reload();
+        .catch(console.error);
 </script>
 </body>
 </html>
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <title>go2rtc</title>
+
+    <style>
+        table {
+            background-color: white;
+            text-align: left;
+            border-collapse: collapse;
+        }
+
+        table td, table th {
+            border: 1px solid black;
+            padding: 5px 5px;
+        }
+
+        table tbody td {
+            font-size: 13px;
+        }
+
+        table thead {
+            background: #CFCFCF;
+            background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
+            border-bottom: 3px solid black;
+        }
+
+        table thead th {
+            font-size: 15px;
+            font-weight: bold;
+            color: black;
+            text-align: center;
+        }
+
+        .header {
+            padding: 5px 5px;
+        }
+    </style>
+</head>
+<body>
+<script src="main.js"></script>
+<div class="header">
+    <label for="pin">PIN</label>
+    <input id="pin" type="text">
+</div>
+<table>
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Address</th>
+        <th>Model</th>
+        <th>Commands</th>
+    </tr>
+    </thead>
+    <tbody>
+
+    </tbody>
+</table>
+<script>
+    const baseUrl = location.origin + location.pathname.substr(
+        0, location.pathname.lastIndexOf("/")
+    );
+
+    fetch(`${baseUrl}/api/homekit`)
+        .then(r => r.json())
+        .then(data => {
+            document.querySelector("body > table > tbody").innerHTML =
+                data.reduce((res, item) => {
+                    let commands = '';
+                    if (item.id === "") {
+                        commands = `<a href="#" onclick="unpair('${item.name}')">unpair</a>`;
+                    } else if (item.paired === false) {
+                        commands = `<a href="#" onclick="pair('${item.id}','${item.name}')">pair</a>`;
+                    }
+                    return res + `<tr>
+                        <td>${item.name}</td>
+                        <td>${item.addr}</td>
+                        <td>${item.model}</td>
+                        <td>${commands}</td>
+                    </tr>`;
+                }, '');
+        })
+        .catch(console.error);
+
+    function pair(id, name) {
+        const pin = document.querySelector("#pin").value;
+        fetch(`${baseUrl}/api/homekit?id=${id}&name=${name}&pin=${pin}`, {method: 'POST'})
+            .then(r => r.text())
+            .then(data => {
+                if (data.length > 0) alert(data);
+                else window.location.reload();
+            })
+            .catch(console.error);
+    }
+
+    function unpair(src) {
+        fetch(`${baseUrl}/api/homekit?src=${src}`, {method: 'DELETE'})
+            .then(r => r.text())
+            .then(data => {
+                if (data.length > 0) alert(data);
+                else window.location.reload();
+            })
+            .catch(console.error);
+    }
+</script>
+</body>
+</html>
@@ -42,10 +42,10 @@
    </style>
 </head>
 <body>
+<script src="main.js"></script>
 <div class="header">
    <input id="src" type="text" placeholder="url">
    <a id="add" href="#">add</a>
-    <a href="devices.html">devices</a>
 </div>
 <table id="streams">
    <thead>
@@ -0,0 +1,52 @@
+// main menu
+document.body.innerHTML = `
+<style>
+ul {
+    list-style: none;
+    margin: 0 auto;
+}
+
+a {
+    text-decoration: none;
+    font-family: 'Lora', serif;
+    transition: .5s linear;
+}
+
+i {
+    margin-right: 10px;
+}
+
+nav {
+    display: block;
+    /*width: 660px;*/
+    margin: 0 auto 10px;
+}
+
+nav ul {
+    padding: 1em 0;
+    background: #ECDAD6;
+}
+
+nav a {
+    padding: 1em;
+    background: rgba(177, 152, 145, .3);
+    border-right: 1px solid #b19891;
+    color: #695753;
+}
+
+nav a:hover {
+    background: #b19891;
+}
+
+nav li {
+    display: inline;
+}
+</style>
+<nav>
+    <ul>
+        <li><a href="index.html">Streams</a></li>
+        <li><a href="devices.html">Devices</a></li>
+        <li><a href="homekit.html">HomeKit</a></li>
+    </ul>
+</nav>
+` + document.body.innerHTML;
@@ -3,4 +3,5 @@ package www
 import "embed"

 //go:embed *.html
+//go:embed *.js
 var Static embed.FS