Skip to content

Commit

Permalink
reworked example
Browse files Browse the repository at this point in the history
  • Loading branch information
@cedricve
cedricve committed Jun 14, 2024
1 parent c1b5484 commit dd49138
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 61 deletions.
151 changes: 90 additions & 61 deletions examples/livestream-sd/ui/src/App.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<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://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
// 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 <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} />
</div>;
}
}


export default App;
17 changes: 17 additions & 0 deletions examples/livestream-sd/ui/src/Liveview.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div className="liveview">
{liveviews && liveviews.length && "ok"}
{liveviews && liveviews.map((liveview, index) => (
<img key={index} src={`data:image/jpeg;base64,${liveview.image}`} alt="liveview" />
))}
</div>
);
}

export default Liveview;

0 comments on commit dd49138

Please sign in to comment.