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