Community.MarcusW.VncClient.Blazor 2.0.0

MarcusW.VncClient.Blazor

Blazor Server adapter for the MarcusW.VncClient library. Enables VNC client functionality in Blazor Server applications with real-time SignalR communication.

⚠️ Important: This package supports Blazor Server ONLY. WebAssembly is NOT supported because VNC requires direct TCP socket connections, which browsers cannot provide due to security restrictions.

🌟 Features

• Blazor Server: Real-time VNC rendering via SignalR
• JavaScript Interop: Efficient canvas-based rendering
• Component-Based: Clean Razor component architecture
• Touch Support: Mobile and tablet friendly interactions
• Responsive Design: Adapts to different screen sizes
• Circuit Safe: Handles Blazor circuit disconnections gracefully

🚀 Quick Start

1. Install Package

<PackageReference Include="Community.MarcusW.VncClient.Blazor" Version="2.0.0" />

2. Add to Razor Component

@page "/vnc"
@using MarcusW.VncClient.Blazor

<VncViewer Connection="@vncConnection" 
           Width="800" 
           Height="600" 
           OnConnectionStateChanged="HandleConnectionState" />

@code {
    private RfbConnection? vncConnection;
    
    protected override async Task OnInitializedAsync()
    {
        await ConnectToVncServer();
    }
    
    private async Task ConnectToVncServer()
    {
        var vncClient = new VncClient(loggerFactory);
        var parameters = new ConnectParameters
        {
            TransportParameters = new TcpTransportParameters
            {
                Host = "your-vnc-server.com",
                Port = 5900
            },
            AuthenticationHandler = new YourAuthHandler()
        };
        
        vncConnection = await vncClient.ConnectAsync(parameters);
    }
    
    private void HandleConnectionState(ConnectionState state)
    {
        // Handle state changes
        InvokeAsync(StateHasChanged);
    }
}

3. Configure Services

// Program.cs (Blazor Server only)
builder.Services.AddVncClientServices();

🎮 Component Features

• Canvas Rendering: High-performance HTML5 canvas display
• Input Handling: Mouse, keyboard, and touch event processing
• Scaling Options: Multiple scaling modes for different screen sizes
• Connection Management: Built-in connection state visualization
• Error Boundaries: Graceful error handling and recovery
• Clipboard Integration: Copy/paste between browser and remote session
• Special Key Capture: System-level shortcuts forwarded to remote session

⌨️ Special Key Combinations

The component automatically captures and forwards important system-level key combinations to the remote VNC session:

Windows Shortcuts:

• Alt+F4 - Close window
• Alt+Tab / Alt+Shift+Tab - Window switching
• Ctrl+Alt+Delete - Security screen
• Ctrl+Shift+Esc - Task Manager
• Win+L - Lock screen
• Win+D - Show/hide desktop
• Win+R - Run dialog
• Win+E - File Explorer
• Win+Arrow keys - Window snapping
• F11 - Fullscreen toggle

Linux Shortcuts:

• Ctrl+Alt+T - Terminal
• Ctrl+Alt+Arrow keys - Switch virtual desktops
• Alt+F1 / Alt+F2 - Application launcher

These shortcuts are intercepted before the browser can process them, ensuring they reach the remote desktop instead of affecting your local browser.

🔧 Advanced Configuration

Component Parameters

<VncViewer Connection="@connection"
           Width="1024"
           Height="768"
           ScaleMode="FitToContainer"
           EnablePointerCapture="true"
           ShowConnectionState="true"
           OnFrameReceived="HandleFrame"
           OnError="HandleError" />

JavaScript Optimization

// Custom rendering optimizations
window.vncClient = {
    optimizeCanvas: function(canvasId) {
        const canvas = document.getElementById(canvasId);
        const ctx = canvas.getContext('2d');
        ctx.imageSmoothingEnabled = false; // Pixel-perfect rendering
    }
};

🌐 Browser Compatibility

• Chrome/Edge: Full support with optimal performance
• Firefox: Full support with good performance
• Safari: Full support (some limitations on older versions)
• Mobile Browsers: Touch input support with responsive design

⚠️ Why Blazor Server Only?

Technical Limitation: VNC protocol requires direct TCP socket connections to the VNC server. Web browsers (including WebAssembly) cannot create raw TCP sockets due to security restrictions - they can only make HTTP/WebSocket connections.

Blazor Server Solution:

• VNC connection runs on the server (where TCP sockets are allowed)
• Real-time updates sent to browser via SignalR
• Client receives rendered frames and sends input back to server
• No CORS issues since server handles all VNC communication

🔒 Security Considerations

Since VNC connections are handled server-side, ensure proper authentication and authorization for your Blazor Server application.

📚 Dependencies

This package depends on:

• Community.MarcusW.VncClient - Core VNC client
• Microsoft.AspNetCore.Components.Web - Blazor web components

📖 Complete Example

See our Blazor sample application for a complete implementation example.

🤝 Contributing

Contributions welcome! Please see our GitHub repository for guidelines.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.