ai.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>MQTT Client Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="height=device-height">
	<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
	<style>
		div {
			width: 100%;
			height: 100%;
		}
		img#cameraView {
			max-width: 100%;
			max-height: 100%;
			bottom: 0;
			left: 0;
			right: 0;
			top: 0;
			margin: auto;
			overflow: auto;
			position: fixed;
		}
	</style>
</head>
<body>
	<h1>MQTT Client Example</h1>
	<div align="center">
		<img id="cameraView" width="100%" heigh="100%">
	</div>
	
	<script type="text/javascript">
		const broker = 'ws://localhost:9001';
		const topic = '/camera/objects';
		
		const client = mqtt.connect(broker);
		
		client.on("connect", () => {
			console.log("Connected to broker");
			client.subscribe(topic, (err) => {
				if(!err) {
					console.log(`Subscibed to topic: ${topic}`);
				}
			})
		})
		
		client.on("message", (topic, message) => {
			try{
				const payload = JSON.parse(message.toString());
				const base64Image = payload.image;
				const img = document.getElementById("cameraView")
				img.src = `data:image/jpg;base64,${base64Image}`;
			}catch(e) {
				console.error('Failed to parse message: ', e);
			}
		})
		
		client.on("error", (error) => {
			console.error("connection error: ", error);
		})
		
		client.on("close", ()=> {
			console.log("Disconnected from broker");
		})
	</script>
</body>
</html>