From dd491384c81d71282e038dd161683a42a36e7448 Mon Sep 17 00:00:00 2001 From: Cedric Verstraeten Date: Fri, 14 Jun 2024 08:15:25 +0200 Subject: [PATCH] reworked example --- examples/livestream-sd/ui/src/App.js | 151 +++++++++++++--------- examples/livestream-sd/ui/src/Liveview.js | 17 +++ 2 files changed, 107 insertions(+), 61 deletions(-) create mode 100644 examples/livestream-sd/ui/src/Liveview.js diff --git a/examples/livestream-sd/ui/src/App.js b/examples/livestream-sd/ui/src/App.js index 4d6a2a1..ad59447 100644 --- a/examples/livestream-sd/ui/src/App.js +++ b/examples/livestream-sd/ui/src/App.js @@ -1,87 +1,116 @@ +import React from 'react'; import logo from './logo.svg'; import './App.css'; +import Liveview from './Liveview'; // import mqtt client library import mqtt from 'mqtt'; - - import * as CryptoJS from 'crypto-js'; // AES encryption, symmetric -function App() { + +class App extends React.Component { // Kerberos Hub public key (demo user) - const hubKey = "AKIAJNFA77RNPAZVTT3Q"; - const hubPrivateKey = "xxx"; + hubKey = "AKIAJNFA77RNPAZVTT3Q"; + hubPrivateKey = "h9vWas0UxxxxxxxxSCAKamQoD"; - // Multiple cameras can be connected to the same hub, each camera has a unique key. - const cameras = [ + cameras = [ 'camera1', 'camera2', // ... and more ] - // Create a new mqtt client with the following options (credentials are empty for now). - var client = mqtt.connect('wss://mqtt.kerberos.io:8443/mqtt', { - username: '', - password: '' - }); + constructor() { + super(); + this.state = {liveviews: []}; - client.on('connect', function () { - console.log('Connected to mqtt broker'); + var client = mqtt.connect('wss://mqtt.kerberos.io:8443/mqtt', { + username: '', + password: '' + }); - // Subscribe to the topic: kerberos/agent/{hubKey} - client.subscribe(`kerberos/hub/${hubKey}`, function (err) { - if (!err) { - console.log('Subscribed to topic: kerberos/agent/{hubKey}'); - } + client.on('connect', () => { + console.log('Connected to mqtt broker'); + // Subscribe to the topic: kerberos/agent/{hubKey} + client.subscribe(`kerberos/hub/${this.hubKey}`, (err) => { + if (!err) { + console.log(`Subscribed to topic:kerberos/hub/${this.hubKey}`); + } + }); }); - }); - // Handle incoming messages - client.on('message', function (topic, message) { - // message is a JSON object - const msg = JSON.parse(message.toString()); + // Handle incoming messages + client.on('message', (topic, message) => { + // message is a JSON object + const msg = JSON.parse(message.toString()); - // Multiple cameras can be sending information to the same topic, so we can (if we want) filter the messages by device_id. - if (cameras.includes(msg.device_id)) { - - // Message can be encrypted, and/or hidden, or just plain-text. - // We can use specific variables to know what to do. + // Multiple cameras can be sending information to the same topic, so we can (if we want) filter the messages by device_id. + if (this.cameras.includes(msg.device_id)) { + + // Message can be encrypted, and/or hidden, or just plain-text. + // We can use specific variables to know what to do. - if (msg.encrypted) { - // Message is encrypted, we need to decrypt it. - // We can use the hubKey to decrypt the message. - // msg.data = decrypt(msg.data, hubKey); - } else if (msg.hidden) { - // We can decrypt using the camera public key. - const payload = msg.payload.hidden_value; - if (hubPrivateKey !== "") { - const decrypted = CryptoJS.AES.decrypt(payload, hubPrivateKey).toString(CryptoJS.enc.Utf8); - msg.payload = JSON.parse(decrypted); + if (msg.encrypted) { + // Message is encrypted, we need to decrypt it. + // We can use the hubKey to decrypt the message. + // msg.data = decrypt(msg.data, hubKey); + } else if (msg.hidden) { + // We can decrypt using the camera public key. + const payload = msg.payload.hidden_value; + if (this.hubPrivateKey !== "") { + const decrypted = CryptoJS.AES.decrypt(payload, this.hubPrivateKey).toString(CryptoJS.enc.Utf8); + msg.payload = JSON.parse(decrypted); + } } - } - } - }); - - return ( -
-
- logo -

- Kerberos.io - Live streaming SD example -

- - Learn React - -
-
- ); + // We can now process the message, and display the liveview. + // First we'll check if the camera is already in the liveviews array. + // If it is, we'll update the liveview, if not, we'll create a new liveview. + // Please note that in practice you might know the camera_id in advance, and + // you might want to display it on a specific HTML component. + + const camera_id = msg.device_id; + const image = msg.payload.value.image; + const liveviews = this.state.liveviews; + const camera = liveviews.find((l) => l.camera_id === camera_id); + if (camera) { + // Update the existing liveview + camera.image = image; + camera.timestamp = msg.timestamp; + } else { + // Create a new liveview + const liveview = { + camera_id: camera_id, + image: image, + timestamp: msg.timestamp + } + liveviews.push(liveview); + } + this.setState({liveviews: [...liveviews]}); + } + }); + } + render() { + const { liveviews } = this.state; + return
+
+ logo +

+ Kerberos.io - Live streaming SD example +

+ + Learn more about Kerberos.io + +
+ +
; + } } + export default App; diff --git a/examples/livestream-sd/ui/src/Liveview.js b/examples/livestream-sd/ui/src/Liveview.js new file mode 100644 index 0000000..782332b --- /dev/null +++ b/examples/livestream-sd/ui/src/Liveview.js @@ -0,0 +1,17 @@ +// This component will receive an array of livestreams and display them in a video grid. + +import React from 'react'; + +const Liveview = ({ liveviews }) => { + return ( +
+ {liveviews && liveviews.length && "ok"} + {liveviews && liveviews.map((liveview, index) => ( + liveview + ))} +
+ ); +} + +export default Liveview; + \ No newline at end of file