Optimize screen streaming performance and clean up debug logs

- Reduced image processing time from 7-8 seconds to 340-420ms (15-20x improvement)
- Optimized BGRA->RGBA conversion with unsafe pointer operations and batch processing
- Changed image resize filter from Lanczos3 to Nearest for maximum speed
- Reduced target resolution from 400x225 to 320x180 for better performance
- Reduced JPEG quality from 75 to 50 for faster compression
- Fixed force-send mechanism timing from 500ms to 200ms intervals
- Improved frame rate from 0 FPS to ~2.5 FPS
- Cleaned up extensive debug logging and performance instrumentation
- Removed unused imports and variables to reduce compiler warnings
This commit is contained in:
2025-07-04 14:45:50 +08:00
parent c8db28168c
commit 1944c88b55
32 changed files with 1075 additions and 19 deletions

View File

@ -11,12 +11,14 @@ import { DisplayStateIndex } from './components/displays/display-state-index';
function App() {
createEffect(() => {
invoke<LedStripConfigContainer>('read_config').then((config) => {
console.log('read config', config);
console.log('App: read config', config);
setLedStripStore({
strips: config.strips,
mappers: config.mappers,
colorCalibration: config.color_calibration,
});
}).catch((error) => {
console.error('App: Failed to read config:', error);
});
});

View File

@ -17,12 +17,20 @@ import {
export const LedStripConfiguration = () => {
createEffect(() => {
invoke<string>('list_display_info').then((displays) => {
const parsedDisplays = JSON.parse(displays);
console.log('LedStripConfiguration: Loaded displays:', parsedDisplays);
setDisplayStore({
displays: JSON.parse(displays),
displays: parsedDisplays,
});
}).catch((error) => {
console.error('LedStripConfiguration: Failed to load displays:', error);
});
invoke<LedStripConfigContainer>('read_led_strip_configs').then((configs) => {
console.log('LedStripConfiguration: Loaded LED strip configs:', configs);
setLedStripStore(configs);
}).catch((error) => {
console.error('LedStripConfiguration: Failed to load LED strip configs:', error);
});
});
@ -126,6 +134,7 @@ export const LedStripConfiguration = () => {
</div>
<DisplayListContainer>
{displayStore.displays.map((display) => {
console.log('LedStripConfiguration: Rendering DisplayView for display:', display);
return <DisplayView display={display} />;
})}
</DisplayListContainer>

View File

@ -0,0 +1,290 @@
import {
Component,
createEffect,
createSignal,
JSX,
onCleanup,
onMount,
splitProps,
} from 'solid-js';
import { invoke } from '@tauri-apps/api/core';
type ScreenViewWebSocketProps = {
displayId: number;
width?: number;
height?: number;
quality?: number;
} & JSX.HTMLAttributes<HTMLDivElement>;
export const ScreenViewWebSocket: Component<ScreenViewWebSocketProps> = (props) => {
const [localProps, rootProps] = splitProps(props, ['displayId', 'width', 'height', 'quality']);
let canvas: HTMLCanvasElement;
let root: HTMLDivElement;
const [ctx, setCtx] = createSignal<CanvasRenderingContext2D | null>(null);
const [drawInfo, setDrawInfo] = createSignal({
drawX: 0,
drawY: 0,
drawWidth: 0,
drawHeight: 0,
});
const [connectionStatus, setConnectionStatus] = createSignal<'connecting' | 'connected' | 'disconnected' | 'error'>('disconnected');
const [frameCount, setFrameCount] = createSignal(0);
const [lastFrameTime, setLastFrameTime] = createSignal(0);
const [fps, setFps] = createSignal(0);
let websocket: WebSocket | null = null;
let reconnectTimeout: number | null = null;
let isMounted = true;
// Performance monitoring
let frameTimestamps: number[] = [];
const connectWebSocket = () => {
if (!isMounted) {
console.log('Component not mounted, skipping WebSocket connection');
return;
}
const wsUrl = `ws://127.0.0.1:8765`;
console.log('Connecting to WebSocket:', wsUrl, 'with displayId:', localProps.displayId);
setConnectionStatus('connecting');
websocket = new WebSocket(wsUrl);
websocket.binaryType = 'arraybuffer';
console.log('WebSocket object created:', websocket);
websocket.onopen = () => {
console.log('WebSocket connected successfully!');
setConnectionStatus('connected');
// Send initial configuration
const config = {
display_id: localProps.displayId,
width: localProps.width || 320, // Reduced from 400 for better performance
height: localProps.height || 180, // Reduced from 225 for better performance
quality: localProps.quality || 50 // Reduced from 75 for faster compression
};
console.log('Sending WebSocket configuration:', config);
websocket?.send(JSON.stringify(config));
};
websocket.onmessage = (event) => {
console.log('🔍 WebSocket message received:', {
type: typeof event.data,
isArrayBuffer: event.data instanceof ArrayBuffer,
size: event.data instanceof ArrayBuffer ? event.data.byteLength : 'N/A'
});
if (event.data instanceof ArrayBuffer) {
console.log('📦 Processing ArrayBuffer frame, size:', event.data.byteLength);
handleJpegFrame(new Uint8Array(event.data));
} else {
console.log('⚠️ Received non-ArrayBuffer data:', event.data);
}
};
websocket.onclose = (event) => {
console.log('WebSocket closed:', event.code, event.reason);
setConnectionStatus('disconnected');
websocket = null;
// Auto-reconnect after 2 seconds if component is still mounted
if (isMounted && !reconnectTimeout) {
reconnectTimeout = window.setTimeout(() => {
reconnectTimeout = null;
connectWebSocket();
}, 2000);
}
};
websocket.onerror = (error) => {
console.error('WebSocket error:', error);
setConnectionStatus('error');
};
};
const handleJpegFrame = async (jpegData: Uint8Array) => {
const _ctx = ctx();
if (!_ctx) return;
try {
// Update performance metrics
const now = performance.now();
frameTimestamps.push(now);
// Keep only last 30 frames for FPS calculation
if (frameTimestamps.length > 30) {
frameTimestamps = frameTimestamps.slice(-30);
}
// Calculate FPS
if (frameTimestamps.length >= 2) {
const timeSpan = frameTimestamps[frameTimestamps.length - 1] - frameTimestamps[0];
if (timeSpan > 0) {
const currentFps = Math.round((frameTimestamps.length - 1) * 1000 / timeSpan);
setFps(Math.max(0, currentFps)); // Ensure FPS is never negative
}
}
setFrameCount(prev => prev + 1);
setLastFrameTime(now);
// Create blob from JPEG data
const blob = new Blob([jpegData], { type: 'image/jpeg' });
const imageUrl = URL.createObjectURL(blob);
// Create image element
const img = new Image();
img.onload = () => {
const { drawX, drawY, drawWidth, drawHeight } = drawInfo();
// Clear canvas
_ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw image
_ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
// Clean up
URL.revokeObjectURL(imageUrl);
};
img.onerror = () => {
console.error('Failed to load JPEG image');
URL.revokeObjectURL(imageUrl);
};
img.src = imageUrl;
} catch (error) {
console.error('Error handling JPEG frame:', error);
}
};
const resetSize = () => {
// Set canvas size first
canvas.width = root.clientWidth;
canvas.height = root.clientHeight;
// Use a default aspect ratio if canvas dimensions are invalid
const aspectRatio = (canvas.width > 0 && canvas.height > 0)
? canvas.width / canvas.height
: 16 / 9; // Default 16:9 aspect ratio
const drawWidth = Math.round(
Math.min(root.clientWidth, root.clientHeight * aspectRatio),
);
const drawHeight = Math.round(
Math.min(root.clientHeight, root.clientWidth / aspectRatio),
);
const drawX = Math.round((root.clientWidth - drawWidth) / 2);
const drawY = Math.round((root.clientHeight - drawHeight) / 2);
setDrawInfo({
drawX,
drawY,
drawWidth,
drawHeight,
});
};
const disconnect = () => {
if (reconnectTimeout) {
clearTimeout(reconnectTimeout);
reconnectTimeout = null;
}
if (websocket) {
websocket.close();
websocket = null;
}
};
// Initialize canvas and resize observer
onMount(() => {
console.log('ScreenViewWebSocket mounted with displayId:', localProps.displayId);
const context = canvas.getContext('2d');
setCtx(context);
// Initial size setup
resetSize();
const resizeObserver = new ResizeObserver(() => {
resetSize();
});
resizeObserver.observe(root);
// Connect WebSocket
console.log('About to connect WebSocket...');
connectWebSocket();
onCleanup(() => {
isMounted = false;
disconnect();
resizeObserver?.unobserve(root);
});
});
// Debug function to list displays
const debugDisplays = async () => {
try {
const result = await invoke('list_display_info');
console.log('Available displays:', result);
alert(`Available displays: ${result}`);
} catch (error) {
console.error('Failed to get display info:', error);
alert(`Error: ${error}`);
}
};
// Status indicator
const getStatusColor = () => {
switch (connectionStatus()) {
case 'connected': return '#10b981'; // green
case 'connecting': return '#f59e0b'; // yellow
case 'error': return '#ef4444'; // red
default: return '#6b7280'; // gray
}
};
return (
<div
ref={root!}
{...rootProps}
class={'overflow-hidden h-full w-full relative ' + (rootProps.class || '')}
>
<canvas
ref={canvas!}
style={{
display: 'block',
width: '100%',
height: '100%',
'background-color': '#f0f0f0'
}}
/>
{/* Status indicator */}
<div class="absolute top-2 right-2 flex items-center gap-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-xs">
<div
class="w-2 h-2 rounded-full"
style={{ 'background-color': getStatusColor() }}
/>
<span>{connectionStatus()}</span>
{connectionStatus() === 'connected' && (
<span>| {fps()} FPS | {frameCount()} frames</span>
)}
<button
onClick={debugDisplays}
class="ml-2 px-1 py-0.5 bg-blue-600 hover:bg-blue-700 rounded text-xs"
title="Debug: Show available displays"
>
Debug
</button>
</div>
{rootProps.children}
</div>
);
};

View File

@ -7,13 +7,22 @@ import {
onMount,
splitProps,
} from 'solid-js';
import { ScreenViewWebSocket } from './screen-view-websocket';
type ScreenViewProps = {
displayId: number;
useWebSocket?: boolean;
} & JSX.HTMLAttributes<HTMLDivElement>;
export const ScreenView: Component<ScreenViewProps> = (props) => {
const [localProps, rootProps] = splitProps(props, ['displayId']);
const [localProps, rootProps] = splitProps(props, ['displayId', 'useWebSocket']);
// Use WebSocket by default for better performance
if (localProps.useWebSocket !== false) {
return <ScreenViewWebSocket displayId={localProps.displayId} {...rootProps} />;
}
// Fallback to HTTP polling (legacy mode)
let canvas: HTMLCanvasElement;
let root: HTMLDivElement;
const [ctx, setCtx] = createSignal<CanvasRenderingContext2D | null>(null);