|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Stream Web App</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
.streams {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.streams img {
|
|
|
|
|
outline: 1px solid #000;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
height: 450px;
|
|
|
|
|
background: #ddd;
|
|
|
|
|
}
|
|
|
|
|
.stream-2 {
|
|
|
|
|
mix-blend-mode: darken;
|
|
|
|
|
}
|
|
|
|
|
.stats {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
.connect-info {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Stream Web App</h1>
|
|
|
|
|
<div class="connect-info">
|
|
|
|
|
<input type="text" placeholder="Enter the WebSocket URL" />
|
|
|
|
|
<button onclick="connect()">Connect</button>
|
|
|
|
|
<button onclick="disconnect()">Disconnect</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stats">
|
|
|
|
|
<h4>Messages received: <label class="message-count">0</label></h4>
|
|
|
|
|
<h4>FPS: <label class="fps">0</label></h4>
|
|
|
|
|
<h4>Total MB received: <label class="total-mb">0</label></h4>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="streams">
|
|
|
|
|
<img class="stream-1" src="" alt="Stream">
|
|
|
|
|
<img class="stream-2" src="" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
let websocketUrl = 'ws://localhost:9001';
|
|
|
|
|
let ws;
|
|
|
|
|
const input = document.querySelector('input');
|
|
|
|
|
input.value = websocketUrl;
|
|
|
|
|
const messageCountElement = document.querySelector('.message-count');
|
|
|
|
|
const fpsElement = document.querySelector('.fps');
|
|
|
|
|
const totalMBElement = document.querySelector('.total-mb');
|
|
|
|
|
let frameTimestamps = [];
|
|
|
|
|
let lastFpsUpdateTime = 0;
|
|
|
|
|
let totalBytesReceived = 0;
|
|
|
|
|
|
|
|
|
|
const disconnect = () => {
|
|
|
|
|
if (ws) {
|
|
|
|
|
ws.close();
|
|
|
|
|
ws = null;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const connect = () => {
|
|
|
|
|
disconnect();
|
|
|
|
|
|
|
|
|
|
websocketUrl = input.value;
|
|
|
|
|
console.log('Connecting to the server...', websocketUrl);
|
|
|
|
|
ws = new WebSocket(websocketUrl);
|
|
|
|
|
ws.onopen = () => {
|
|
|
|
|
console.log('Connected to the server');
|
|
|
|
|
};
|
|
|
|
|
ws.onmessage = (message) => {
|
|
|
|
|
messageCountElement.textContent = Number(messageCountElement.textContent) + 1;
|
|
|
|
|
handleMessage(message.data);
|
|
|
|
|
};
|
|
|
|
|
ws.onclose = () => {
|
|
|
|
|
console.log('Disconnected from the server');
|
|
|
|
|
};
|
|
|
|
|
ws.onerror = (error) => {
|
|
|
|
|
console.error('WebSocket error:', error);
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleMessage = async (blob) => {
|
|
|
|
|
try {
|
|
|
|
|
const arrayBuffer = await blob.arrayBuffer();
|
|
|
|
|
const dataView = new DataView(arrayBuffer);
|
|
|
|
|
const originalSize = dataView.getUint32(0, true);
|
|
|
|
|
const maskedSize = dataView.getUint32(4, true);
|
|
|
|
|
|
|
|
|
|
const originalImageData = arrayBuffer.slice(8, 8 + originalSize);
|
|
|
|
|
const maskedImageData = arrayBuffer.slice(8 + originalSize, 8 + originalSize + maskedSize);
|
|
|
|
|
|
|
|
|
|
const originalImageBlob = new Blob([originalImageData], { type: 'image/jpeg' });
|
|
|
|
|
const maskedImageBlob = new Blob([maskedImageData], { type: 'image/jpeg' });
|
|
|
|
|
|
|
|
|
|
const originalImageUrl = URL.createObjectURL(originalImageBlob);
|
|
|
|
|
const maskedImageUrl = URL.createObjectURL(maskedImageBlob);
|
|
|
|
|
|
|
|
|
|
const originalStreamElement = document.querySelector('.stream-1');
|
|
|
|
|
const maskedStreamElement = document.querySelector('.stream-2');
|
|
|
|
|
|
|
|
|
|
originalStreamElement.onload = () => {
|
|
|
|
|
URL.revokeObjectURL(originalStreamElement.src);
|
|
|
|
|
};
|
|
|
|
|
maskedStreamElement.onload = () => {
|
|
|
|
|
URL.revokeObjectURL(maskedStreamElement.src);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
originalStreamElement.src = originalImageUrl;
|
|
|
|
|
maskedStreamElement.src = maskedImageUrl;
|
|
|
|
|
|
|
|
|
|
// Update total MB received
|
|
|
|
|
totalBytesReceived += arrayBuffer.byteLength;
|
|
|
|
|
totalMBElement.textContent = (totalBytesReceived / (1024 * 1024)).toFixed(2);
|
|
|
|
|
updateFPS();
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('Error processing message:', error);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const updateFPS = () => {
|
|
|
|
|
const now = performance.now();
|
|
|
|
|
frameTimestamps.push(now);
|
|
|
|
|
// Keep only the last 30 frame timestamps
|
|
|
|
|
if (frameTimestamps.length > 30) {
|
|
|
|
|
frameTimestamps.shift();
|
|
|
|
|
}
|
|
|
|
|
// Update FPS
|
|
|
|
|
if (now - lastFpsUpdateTime > 100) {
|
|
|
|
|
const timeElapsed = (frameTimestamps[frameTimestamps.length - 1] - frameTimestamps[0]) / 1000; // in seconds
|
|
|
|
|
const fps = (frameTimestamps.length - 1) / timeElapsed;
|
|
|
|
|
fpsElement.textContent = fps.toFixed(2);
|
|
|
|
|
lastFpsUpdateTime = now;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
