128 lines
4.2 KiB
HTML
128 lines
4.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Real-time Image Display via WebSocket</title>
|
||
|
|
<!-- 引入 Socket.IO 客户端库 -->
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
|
||
|
|
<style>
|
||
|
|
.container {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.image-container {
|
||
|
|
margin: 10px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.image-container img {
|
||
|
|
width: 400px;
|
||
|
|
height: auto;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
}
|
||
|
|
.timestamp {
|
||
|
|
font-size: 0.9em;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
#status {
|
||
|
|
padding: 10px;
|
||
|
|
margin: 10px;
|
||
|
|
background-color: #f0f0f0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
#button-container {
|
||
|
|
text-align: center;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
padding: 10px 20px;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
color: #007bff;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
a:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Live Stereo Camera Feed (via WebSocket)</h1>
|
||
|
|
<!-- 添加导航链接 -->
|
||
|
|
<p style="text-align: center;"><a href="/list">View Saved Images</a></p>
|
||
|
|
<div id="status">Connecting to server...</div>
|
||
|
|
|
||
|
|
<!-- 新增按钮容器 -->
|
||
|
|
<div id="button-container">
|
||
|
|
<button id="capBtn">触发采集</button>
|
||
|
|
<!-- <div id="button-response">Button response will appear here.</div> -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="image-container">
|
||
|
|
<h3>Left Camera</h3>
|
||
|
|
<img id="left-img" src="" alt="No Left Image">
|
||
|
|
<div class="timestamp" id="left-ts">No timestamp</div>
|
||
|
|
</div>
|
||
|
|
<div class="image-container">
|
||
|
|
<h3>Right Camera</h3>
|
||
|
|
<img id="right-img" src="" alt="No Right Image">
|
||
|
|
<div class="timestamp" id="right-ts">No timestamp</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 建立 Socket.IO 连接
|
||
|
|
const socket = io('http://' + document.domain + ':' + location.port);
|
||
|
|
|
||
|
|
socket.on('connect', function() {
|
||
|
|
console.log('Connected to server');
|
||
|
|
document.getElementById('status').innerHTML = 'Connected to server. Waiting for images...';
|
||
|
|
});
|
||
|
|
|
||
|
|
socket.on('disconnect', function() {
|
||
|
|
console.log('Disconnected from server');
|
||
|
|
document.getElementById('status').innerHTML = 'Disconnected from server.';
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听 'update_image' 事件
|
||
|
|
socket.on('update_image', function(data) {
|
||
|
|
// 更新左图
|
||
|
|
if (data.left_image) {
|
||
|
|
document.getElementById('left-img').src = 'data:image/jpeg;base64,' + data.left_image;
|
||
|
|
}
|
||
|
|
// 更新右图
|
||
|
|
if (data.right_image) {
|
||
|
|
document.getElementById('right-img').src = 'data:image/jpeg;base64,' + data.right_image;
|
||
|
|
}
|
||
|
|
// 更新时间戳
|
||
|
|
if (data.timestamp) {
|
||
|
|
document.getElementById('left-ts').textContent = 'Timestamp: ' + data.timestamp;
|
||
|
|
document.getElementById('right-ts').textContent = 'Timestamp: ' + data.timestamp;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
socket.on('error', function(data) {
|
||
|
|
console.error('WebSocket Error:', data);
|
||
|
|
document.getElementById('status').innerHTML = 'Error: ' + data.message;
|
||
|
|
});
|
||
|
|
|
||
|
|
// --- 新增：处理按钮点击事件 ---
|
||
|
|
document.getElementById('capBtn').onclick = function() {
|
||
|
|
console.log("触发采集.");
|
||
|
|
socket.emit('capture_button', {
|
||
|
|
client_time: new Date().toISOString(),
|
||
|
|
// button_id: 'myButton'
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// --- 新增：监听服务器对按钮点击的响应 ---
|
||
|
|
socket.on('button_response', function(data) {
|
||
|
|
console.log('Received button response from server:', data);
|
||
|
|
document.getElementById('button-response').textContent =
|
||
|
|
`Response: ${data.message} (Server Time: ${new Date(data.server_time * 1000).toISOString()})`;
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|