Powrót do strony głównej

SkiaCamera: efekty wideo i napisy w .NET MAUI

Artykuł opisuje integrację SkiaCamera w .NET MAUI do przetwarzania wideo w czasie rzeczywistym: napisy AI, shadery SKSL, przednagrywanie i nakładki. Analiza instalacji, callbacków ProcessFrame/Preview i ustawień UI. Przykład kodu dla foto/wideo z przyspieszeniem GPU.

Napisy AI i shadery dla wideo w .NET MAUI SkiaCamera
Advertisement 728x90

Przetwarzanie wideo w czasie rzeczywistym i napisy AI w .NET MAUI z SkiaCamera

SkiaCamera umożliwia przechwytywanie zdjęć i wideo z kamery na urządzeniach mobilnych, stosując efekty, nakładki i napisy AI w czasie rzeczywistym. Każda klatka przechodzi przez płótno Skia przed zakodowaniem, co zapewnia integrację przetworzonych danych do finalnego pliku MP4 bez dodatkowego przetwarzania. Aby rozpocząć, zainstaluj pakiet DrawnUi.Maui.Camera i zainicjuj DrawnUI w MauiProgram.cs poprzez builder.UseDrawnUi().

Umieść komponent wewnątrz draw:Canvas z RenderingMode="Accelerated":

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

Ustal kontener na Fill, aby uniknąć artefaktów. Dla prawidłowej orientacji wideo zablokuj aplikację w trybie portretowym: na Androidzie przez ScreenOrientation.SensorPortrait w MainActivity.cs, na iOS — ustawieniami UISupportedInterfaceOrientations w Info.plist.

Google AdInline article slot

Określ uprawnienia:

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

Włącz kamerę po pierwszym renderowaniu płótna lub po zdarzeniach nawigacyjnych.

Zarządzanie kamerą i przetwarzanie klatek

Właściwość IsOn kontroluje start i stop. Przy przejściu w tło kamera automatycznie się wstrzymuje. Podgląd jest renderowany przez SkiaImage we właściwości Display, dostępnej do rozmycia lub efektów.

Google AdInline article slot

Włącz przetwarzanie w czasie rzeczywistym:

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

Obsługiwacze otrzymują DrawableFrame z SKCanvas, SKImage, Scale i flagą IsPreview. Podczas nagrywania podgląd pokazuje przetworzoną klatkę w zmniejszonym rozmiarze — zasada WYSIWYG.

Przykład niestandardowego kontrolera AppCamera:

Google AdInline article slot
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;
    }
}

Nagrywanie wideo z prenagrywaniem

Rozpocznij nagrywanie:

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

Przenieś do galerii po zakończeniu:

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

Prenagrywanie używa bufora pierścieniowego w pamięci do przechwycenia 3–10 sekund przed naciśnięciem REC:

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

Właściwości IsPreRecording i IsRecording są bindable dla UI. Anulowanie czyści bufor: StopVideoRecording(true).

Przydatne w scenariuszach z nieprzewidywalnym startem: sport, przyroda, kamery bezpieczeństwa z triggerem ruchu.

Shadery SKSL dla efektów wideo

Stosuj filtry do podglądu, zdjęć i wideo przez shadery SKSL. Nadpisz RenderPreviewForProcessing i RenderFrameForRecording:

CameraControl.VideoEffect = ShaderEffect.Movie;

Shadery są renderowane na SKPaint przed kodowaniem, efekt zostaje utrwalony w MP4. Przykład UI zawiera przełącznik filtrów: Noir, Movie i inne.

Napisy AI i wizualizacja audio

Generowanie napisów oparte na OpenAI integruje się w czasie rzeczywistym i wbudowuje w wideo. Wizualizator audio (EQ) nakłada się jako overlay, reagując na obrót urządzenia przez RotationChanged.

Sekcje ustawień:

  • Input: wybór kamery, format, tryb.
  • Processing: monitoring audio, napisy, shadery.
  • Output: audio/wideo, prenagrywanie, jakość.

UI obraca ikony przycisków niezależnie od blokady ekranu.

Co jest ważne

  • SkiaCamera przetwarza klatki na GPU przez płótno Skia, zapewniając efekty w czasie rzeczywistym w finalnym wideo.
  • Prenagrywanie z buforem pierścieniowym przechwytuje zdarzenia przed triggerem bez ciągłego zapisywania na dysk.
  • Shadery SKSL są stosowane do podglądu i nagrywania bez post-processingu; callbacki ProcessFrame/Preview różnicują tryby.
  • Napisy AI od OpenAI i overlay EQ wbudowują się w MP4; UI dostosowuje się do orientacji.
  • Automatyczna pauza w tle, bindable właściwości dla nagrywania/prenagrywania.

— Editorial Team

Advertisement 728x90

Czytaj dalej