VAST.UI for MAUI
The VAST.UI for MAUI library provides cross-platform media player controls for .NET MAUI applications. It supports Android, iOS, macOS (Catalyst), and Windows with platform-optimized video rendering and unified API through the IMediaPlayer interface.
Overview
| Feature |
Description |
| Cross-Platform |
Single codebase for Android, iOS, macOS, and Windows |
| Hardware Rendering |
Platform-native video rendering (Metal, OpenGL, DirectX, TextureView) |
| Touch Gestures |
Pinch to zoom, pan to move on touch devices |
| Pointer Controls |
Mouse-based pan/tilt/zoom on desktop platforms |
| Overlays |
Title and statistics display overlays |
| Snapshots |
Capture current video frame as JPEG |
Requirements
| Platform |
Minimum Version |
| Android |
API 21 (Android 5.0) |
| iOS |
11.0 |
| macOS (Catalyst) |
11.0 |
| Windows |
10.0.17763.0 |
Setup
Register the VAST.UI handlers in your MauiProgram.cs:
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureMauiHandlers(handlers =>
{
handlers.AddHandler(typeof(VAST.Controls.MediaPlayerControlBase), typeof(VAST.Controls.MediaPlayerHandler));
handlers.AddHandler(typeof(VAST.Controls.VideoPreviewControl), typeof(VAST.Controls.VideoPreviewHandler));
});
return builder.Build();
}
The MediaPlayerControl is the primary control for video playback in MAUI applications.
XAML Usage
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vast="clr-namespace:VAST.Controls;assembly=VAST.UI">
<vast:MediaPlayerControl x:Name="player" />
</ContentPage>
Code Usage
// Set media source
player.Source = "rtsp://camera.example.com/stream";
// Control playback
player.Play();
player.Pause();
player.Stop();
// Adjust volume
player.Volume = 0.8;
player.IsMuted = false;
// Enable interactive pan/tilt/zoom
player.PlaybackParameters = new PlaybackParameters
{
AllowDigitalPTZ = true,
};
Playback Properties
Stream Selection
Display Properties
Events
Methods
Playback Parameters
Configure low-level playback behavior using PlaybackParameters:
player.PlaybackParameters = new PlaybackParameters
{
RenderingStrategy = RenderingStrategy.LowLatency,
VideoRendererType = VideoRendererType.Auto,
AllowDigitalPTZ = true,
};
Rendering Strategies
| Strategy |
Description |
| LowLatency |
Optimized for minimum frame latency; frames are rendered as soon as they are decoded. Best for real-time monitoring. |
| Smooth |
Optimized for smooth playback with frame timing based on timestamps. Best for smooth preview. |
// Configure for live stream monitoring
player.PlaybackParameters.RenderingStrategy = RenderingStrategy.LowLatency;
// Configure for smooth playback
player.PlaybackParameters.RenderingStrategy = RenderingStrategy.Smooth;
Playback Rates
Playback rate control is only available for interactive sources (VOD, file-based media). Live streams do not support playback rate changes.
| Rate |
Description |
| -32 to -1 |
Rewind (backward playback) |
| 0 to 1 (exclusive) |
Slow motion |
| 1 |
Normal speed |
| 1 to 32 |
Fast forward |
Gestures
When PlaybackParameters.AllowDigitalPTZ is enabled, the control supports interactive pan, tilt, and zoom.
Touch Gestures
| Gesture |
Action |
| Pinch |
Zoom in/out centered on pinch origin |
| Pan |
Move the visible area (pan/tilt) |
Pointer Gestures (Windows)
| Input |
Action |
| Mouse wheel |
Zoom in/out |
| Mouse drag |
Pan/tilt |
player.PlaybackParameters.AllowDigitalPTZ = true;
Stretch Modes
| Mode |
Description |
| Original |
Display at original size without scaling |
| Preserve |
Scale to fit while preserving aspect ratio |
| Fill |
Scale to fill the entire area (may crop) |
| Zoom |
Scale to fill with aspect ratio preserved (crops edges) |
Snapshots
Capture the current video frame as a JPEG image:
using var stream = await player.TakeSnapshot();
if (stream != null)
{
// Save to file
using var fileStream = File.Create("snapshot.jpg");
await stream.CopyToAsync(fileStream);
}
VideoPreviewControl
The VideoPreviewControl provides a lightweight preview surface for video capture and mixing scenarios.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vast="clr-namespace:VAST.Controls;assembly=VAST.UI">
<vast:VideoPreviewControl x:Name="preview"
RenderingStrategy="LowLatency"
RendererType="Best"
PreviewType="Capture" />
</ContentPage>
| Property |
Type |
Default |
Description |
| IsReady |
bool |
false |
Renderer ready state (read-only) |
| PreviewType |
VideoPreviewType |
Capture |
Preview source type |
| Renderer |
IVideoRenderer |
null |
Active renderer instance (read-only) |
| RendererType |
VideoRendererType |
Best |
Renderer selection |
| RenderingStrategy |
RenderingStrategy |
LowLatency |
Rendering optimization mode |
Preview Types
| Type |
Description |
| Capture |
Preview from video capture device |
| Mixing |
Preview from video mixing/compositing source |
Connecting to a Capture Source
To display video from a capture device, assign the Renderer to the capture source's Renderer property. Wait for IsReady before connecting.
// Wait for video preview control to be ready
while (!videoPreview.IsReady)
{
await Task.Delay(100);
}
// Configure rendering
videoPreview.RenderingStrategy = RenderingStrategy.LowLatency;
videoPreview.RendererType = VideoRendererType.Best;
// Connect the renderer to the capture source
videoCaptureSource.Renderer = videoPreview.Renderer;
// ...
// Disconnect renderer to stop preview
videoCaptureSource.Renderer = null;
Each platform uses optimized native rendering:
| Platform |
Video Renderer |
MJPEG Renderer |
| Windows |
WindowsMauiRenderer (SoftwareBitmap) |
CompatibleRenderer |
| Android |
AndroidTextureRenderer (TextureView) |
AndroidImageRenderer (ImageView) |
| iOS |
AppleVideoRenderer (AVSampleBufferDisplayLayer) |
IosImageRenderer (UIImageView) |
| macOS |
AppleVideoRenderer (AVSampleBufferDisplayLayer) |
IosImageRenderer (UIImageView) |
Video Preview Rendering
| Platform |
Capture |
Mixing |
| Windows |
WindowsMauiRenderer |
WindowsMauiRenderer |
| Android |
AndroidSurfaceRenderer (SurfaceView) |
AndroidTextureRenderer (TextureView) |
| iOS |
VirtualVideoRenderer (Metal/OpenGL) |
VirtualVideoRenderer |
| macOS |
VirtualVideoRenderer |
VirtualVideoRenderer |
Troubleshooting
Common Issues
| Issue |
Cause |
Solution |
| Black screen |
Renderer not initialized |
Ensure control is visible and has non-zero size |
| No video on Android |
TextureView not ready |
Wait for control to be fully laid out |
| Gestures not working |
PTZ disabled |
Set PlaybackParameters.AllowDigitalPTZ = true |
| Handler not found |
Handlers not registered |
Add handler registration in MauiProgram.cs |
| Poor performance |
Software rendering |
Check platform supports hardware acceleration |
| No audio |
Platform audio session |
Ensure audio session is configured (iOS) |
Android:
- TextureView requires hardware acceleration
- MJPEG streams use ImageView for better performance
- Minimum API 21 required for TextureView
iOS/macOS:
- Uses AVSampleBufferDisplayLayer for hardware-decoded video
- Metal rendering available
- Audio session must be configured for background playback
Windows:
- SoftwareBitmap-based rendering for WinUI compatibility
- Full pointer event support for pan/tilt/zoom
- Playback controls overlay available on hover
See Also