SkiaCamera: Videoeffekte und Untertitel in .NET MAUI

Echtzeit-Videoverarbeitung und KI-Untertitel in .NET MAUI mit SkiaCamera

SkiaCamera ermöglicht das Aufnehmen von Fotos und Videos direkt von den Mobilgerätekameras, während Effekte, Overlays und KI-generierte Untertitel in Echtzeit angewendet werden. Jeder Frame läuft über eine Skia-Canvas, bevor er encodiert wird, und integriert die bearbeiteten Daten nahtlos in die finale MP4-Datei – ganz ohne Nachbearbeitung. Zum Einstieg installieren Sie das NuGet-Paket DrawnUi.Maui.Camera und initialisieren DrawnUI in MauiProgram.cs mit builder.UseDrawnUi().

Platziert die Komponente in einem draw:Canvas mit RenderingMode="Accelerated":

<Grid VerticalOptions="Fill" HorizontalOptions="Fill">
    <draw:Canvas RenderingMode="Accelerated" Gestures="Lock">
        <camera:SkiaCamera x:Name="Camera" CaptureMode="Video" />
    </draw:Canvas>
</Grid>

Fixieren Sie den Container auf Fill, um Rendering-Artefakte zu vermeiden. Für korrekte Videoausrichtung sperren Sie die App im Hochformat: Auf Android über ScreenOrientation.SensorPortrait in MainActivity.cs, auf iOS via UISupportedInterfaceOrientations in Info.plist.

Legen Sie die erforderlichen Berechtigungen fest:

Camera.NeedPermissionsSet = NeedPermissions.Camera | NeedPermissions.Gallery | NeedPermissions.Microphone;

Starten Sie die Kamera nach dem ersten Rendering der Canvas oder bei Navigationsereignissen.

Kamera-Steuerung und Frame-Verarbeitung

Die Eigenschaft IsOn regelt Start/Stopp. Die Kamera pausiert automatisch, wenn die App in den Hintergrund wechselt. Die Vorschau wird über SkiaImage in der Display-Eigenschaft gerendert – ideal für Blur-Effekte oder Ähnliches.

Aktivieren Sie Echtzeit-Verarbeitung:

UseRealtimeVideoProcessing = true;
ProcessFrame = OnFrameProcessing;
ProcessPreview = OnFrameProcessing;

Die Handler erhalten ein DrawableFrame mit SKCanvas, SKImage, Scale und einem IsPreview-Flag. Während der Aufnahme zeigt die Vorschau eine skalierte Version des bearbeiteten Frames – was du siehst, ist was du bekommst (WYSIWYG).

Hier ein Beispiel für einen benutzerdefinierten Controller AppCamera:

public partial class AppCamera : SkiaCamera
{
    public AppCamera()
    {
        NeedPermissionsSet = NeedPermissions.Camera | NeedPermissions.Gallery | NeedPermissions.Microphone;
        InjectGpsLocation = true;
        UseRealtimeVideoProcessing = true;
        VideoQuality = VideoQuality.Standard;
        EnableAudioRecording = true;
        ProcessFrame = OnFrameProcessing;
        ProcessPreview = OnFrameProcessing;
    }
}

Videoaufnahme mit Voraufzeichnung

Starten Sie die Aufnahme:

if (CameraControl.IsRecording)
    await CameraControl.StopVideoRecording();
else
    await CameraControl.StartVideoRecording();

Verschieben Sie das Video nach Abschluss in die Galerie:

private async void OnVideoRecordingSuccess(object sender, CapturedVideo capturedVideo)
{
    var publicPath = await CameraControl.MoveVideoToGalleryAsync(capturedVideo, MauiProgram.Album);
}

Die Voraufzeichnung nutzt einen In-Memory-Ringpuffer, um 3–10 Sekunden vor dem REC-Druck einzufangen:

CameraControl.EnablePreRecording = true;
CameraControl.PreRecordDuration = TimeSpan.FromSeconds(5);

Die Eigenschaften IsPreRecording und IsRecording sind bindbar für UI-Updates. Beim Abbrechen wird der Puffer geleert: StopVideoRecording(true).

Perfekt für unvorhersehbare Action wie Sport, Wildtiere oder bewegungsgesteuerte Sicherheitskameras.

SKSL-Shader für Videoeffekte

Wenden Sie Filter auf Vorschauen, Fotos und Videos mit SKSL-Shaders an. Überschreiben Sie RenderPreviewForProcessing und RenderFrameForRecording:

CameraControl.VideoEffect = ShaderEffect.Movie;

Shaders werden auf SKPaint vor der Kodierung gerendert und backen den Effekt direkt in die MP4 ein. Die UI-Demo enthält einen Filter-Wechsler: Noir, Movie und mehr.

KI-Untertitel und Audio-Visualisierung

OpenAI-gestützte Untertitel-Generierung integriert sich in Echtzeit und wird direkt in Videos eingebettet. Ein Audio-Visualisierer (EQ) überlagert als responsives Element und reagiert auf Gerätedrehung via RotationChanged.

Einstellungsbereiche:

• Eingabe: Kamerawahl, Format, Modus.
• Verarbeitung: Audio-Überwachung, Untertitel, Shader.
• Ausgabe: Audio/Video, Voraufzeichnung, Qualität.

Die UI dreht Button-Icons unabhängig vom Bildschirmsperre.

Wichtige Erkenntnisse

• SkiaCamera verarbeitet Frames auf der GPU via Skia-Canvas für Echtzeit-Effekte, die direkt in das finale Video gebacken werden.
• Voraufzeichnung mit Ringpuffer fängt Ereignisse vor dem Auslöser ein, ohne ständiges Schreiben auf die Festplatte.
• SKSL-Shader gelten für Vorschauen und Aufnahmen ohne Nachbearbeitung; ProcessFrame/Preview-Callbacks unterscheiden Modi.
• OpenAI-KI-Untertitel und EQ-Overlays werden in MP4 eingebettet; UI passt sich der Ausrichtung an.
• Automatisches Pausieren im Hintergrund, bindbare Eigenschaften für Aufnahme/Voraufzeichnung.

— Editorial Team