From fec1141782da5c57e33a8f0f06340749be6753ba Mon Sep 17 00:00:00 2001
From: Cedric Verstraeten <cedric@verstraeten.io>
Date: Fri, 14 Jun 2024 17:19:28 +0200
Subject: [PATCH] add example for liveview

---
 examples/livestream-sd/ui/src/App.js      | 88 +++++++++++++++++------
 examples/livestream-sd/ui/src/Liveview.js |  4 +-
 examples/livestream-sd/ui/src/index.js    |  8 +--
 3 files changed, 70 insertions(+), 30 deletions(-)

diff --git a/examples/livestream-sd/ui/src/App.js b/examples/livestream-sd/ui/src/App.js
index ad59447..65c0211 100644
--- a/examples/livestream-sd/ui/src/App.js
+++ b/examples/livestream-sd/ui/src/App.js
@@ -2,17 +2,20 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 import Liveview from './Liveview';
-
-// import mqtt client library
+import { v4 as uuidv4 } from "uuid";
 import mqtt from 'mqtt';
-import * as CryptoJS from 'crypto-js';  // AES encryption, symmetric
-
+import * as CryptoJS from 'crypto-js';
+import {
+  Main,
+  MainBody,
+  Gradient,
+} from '@kerberos-io/ui';
 
 class App extends React.Component {
 
   // Kerberos Hub public key (demo user)
-  hubKey = "AKIAJNFA77RNPAZVTT3Q";
-  hubPrivateKey = "h9vWas0UxxxxxxxxSCAKamQoD";
+  hubKey = "your-hub-key-here";
+  hubPrivateKey = "your-private-key-here";
 
   cameras = [
     'camera1',
@@ -29,6 +32,7 @@ class App extends React.Component {
       password: ''
     });
 
+    // Make a connection to the MQTT broker, and subscribe to the relevant topic(s).
     client.on('connect', () => {
       console.log('Connected to mqtt broker');
       // Subscribe to the topic: kerberos/agent/{hubKey}
@@ -89,25 +93,65 @@ class App extends React.Component {
         this.setState({liveviews: [...liveviews]});
       }
     });
+
+    // To start receiving messages, we need to send heartbeats to the topic: kerberos/agent/{hubKey}
+    // This will wakeup the desired agents, and they will start sending JPEGS to the kerberos/hub/{hubKey} topic.
+    setInterval(() => {
+      // We'll make a seperate publish for each camera_id we are interested in.
+      this.cameras.forEach((camera_id) => {
+        const payload = {
+          action: "request-sd-stream",
+          device_id: camera_id,
+          value: {
+            timestamp: Math.floor(Date.now() / 1000),
+          }
+        };
+
+        // We'll generate a hash of the payload to use as a fingerprint.
+        const payload_hash = CryptoJS.SHA256(JSON.stringify(payload)).toString(CryptoJS.enc.Hex);
+
+        // We'll add some metadata first.
+        const message = {
+          mid: uuidv4(),
+          timestamp: Math.floor(Date.now() / 1000),
+          hidden: true,
+          encrypted: false,
+          fingerprint: "",
+          device_id: payload.device_id,
+          payload,
+          payload_hash,
+        }
+
+        // If we need to hide the value, we'll encrypt it with the hub private key.
+         // depending on the settings in the Kerberos Agent we might need to hide the
+         // message, this will make sure nobody can read the message.
+         
+        const hidden = true;
+        if(hidden && this.hubPrivateKey !== "") {
+          const encrypted = CryptoJS.AES.encrypt(
+            JSON.stringify(message.payload),
+            this.hubPrivateKey).toString();
+
+          message.payload = {};
+          message.hidden = true;
+          message.payload.hidden_value = encrypted;
+        }
+
+        client.publish(`kerberos/agent/${this.hubKey}`, JSON.stringify(message));
+      });
+    }, 3000);
   }
+
+
   render() {
     const { liveviews } = this.state;
-    return <div className="App">
-    <header className="App-header">
-      <img src={logo} className="App-logo" alt="logo" />
-      <p>
-        Kerberos.io - Live streaming SD example
-      </p>
-      <a
-        className="App-link"
-        href="https://kerberos.io"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Learn more about Kerberos.io
-      </a>
-    </header>
-    <Liveview liveviews={liveviews} />
+    return <div id="page-root">
+    <Main>
+      <Gradient />
+      <MainBody>
+        <Liveview liveviews={liveviews} />
+      </MainBody>
+    </Main>
   </div>;
   }
 }
diff --git a/examples/livestream-sd/ui/src/Liveview.js b/examples/livestream-sd/ui/src/Liveview.js
index bec0842..a585851 100644
--- a/examples/livestream-sd/ui/src/Liveview.js
+++ b/examples/livestream-sd/ui/src/Liveview.js
@@ -6,7 +6,7 @@ const Liveview = ({ liveviews }) => {
     return (
         <div className="liveview">
         {liveviews && liveviews.map((liveview, index) => (
-            <div>
+            <div key={index}>
                 <p>Camera name: {liveview.camera_id}</p>
                 <ImageCard
                     imageSrc={`data:image/png;base64, ${liveview.image}`}
@@ -14,7 +14,9 @@ const Liveview = ({ liveviews }) => {
                 />
             </div>
         ))}
+        {!liveviews || liveviews.length === 0 && <p>No liveviews available</p>}
         </div>
+
     );
 }
 
diff --git a/examples/livestream-sd/ui/src/index.js b/examples/livestream-sd/ui/src/index.js
index 46f43c0..7f661d2 100644
--- a/examples/livestream-sd/ui/src/index.js
+++ b/examples/livestream-sd/ui/src/index.js
@@ -2,12 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<App />);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+root.render(<App />);
\ No newline at end of file