s.gruessing/IT-Nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Remote Desktop: img → canvas rendering

Browse Source 
Canvas approach with drawImage avoids broken-img alt-text issue
and renders JPEG frames correctly. Added minHeight to container.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Simon Grüssing
2026-06-11 09:40:11 +02:00
parent 0a8b186585
commit 1461f0fd0d
1 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/pages/AgentDetailPage.jsx
View File

@@ -296,7 +296,7 @@ function RemoteDesktop({ agentId, agentHostname }) {
const [error, setError] = useState('');
const [fps, setFps] = useState(0);
const [resolution, setResolution] = useState('');
const imgRef = useRef(null);
const canvasRef = useRef(null);
const wsRef = useRef(null);
const fpsCounterRef = useRef({ count: 0, last: Date.now() });
@@ -321,16 +321,24 @@ function RemoteDesktop({ agentId, agentHostname }) {
ws.onmessage = (e) => {
try {
const msg = JSON.parse(e.data);
if (msg.type === 'rdp_frame' && imgRef.current) {
imgRef.current.src = 'data:image/jpeg;base64,' + msg.data;
if (msg.w && msg.h) setResolution(`${msg.w}×${msg.h}`);
// FPS-Counter
const now = Date.now();
fpsCounterRef.current.count++;
if (now - fpsCounterRef.current.last >= 1000) {
setFps(fpsCounterRef.current.count);
fpsCounterRef.current = { count: 0, last: now };
}
if (msg.type === 'rdp_frame') {
const img = new window.Image();
img.onload = () => {
const canvas = canvasRef.current;
if (!canvas) return;
if (canvas.width !== img.naturalWidth) canvas.width = img.naturalWidth;
if (canvas.height !== img.naturalHeight) canvas.height = img.naturalHeight;
canvas.getContext('2d').drawImage(img, 0, 0);
if (msg.w && msg.h) setResolution(`${msg.w}×${msg.h}`);
// FPS-Counter
const now = Date.now();
fpsCounterRef.current.count++;
if (now - fpsCounterRef.current.last >= 1000) {
setFps(fpsCounterRef.current.count);
fpsCounterRef.current = { count: 0, last: now };
}
};
img.src = 'data:image/jpeg;base64,' + msg.data;
} else if (msg.type === 'rdp_disconnected') {
setStatus('idle');
setError('Agent hat die Verbindung getrennt');
@@ -348,7 +356,8 @@ function RemoteDesktop({ agentId, agentHostname }) {
wsRef.current.close();
}
wsRef.current = null;
if (imgRef.current) imgRef.current.src = '';
const canvas = canvasRef.current;
if (canvas) canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
setStatus('idle');
setFps(0);
setResolution('');
@@ -397,14 +406,13 @@ function RemoteDesktop({ agentId, agentHostname }) {
</div>
</div>
) : (
<div style={{ background: '#000', lineHeight: 0, position: 'relative' }}>
<img
ref={imgRef}
alt="Remote Desktop"
style={{ width: '100%', display: 'block', maxHeight: 640, objectFit: 'contain' }}
<div style={{ background: '#000', lineHeight: 0, position: 'relative', minHeight: 400 }}>
<canvas
ref={canvasRef}
style={{ width: '100%', height: 'auto', display: 'block' }}
/>
{status === 'connecting' && (
<div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.7)', color: '#fff', fontSize: 14 }}>
<div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.85)', color: '#fff', fontSize: 14 }}>
Verbinde…
</div>
)}