SkiaCamera : effets vidéo et sous-titres dans .NET MAUI

Traitement vidéo en temps réel et sous-titres IA avec SkiaCamera dans .NET MAUI

SkiaCamera permet de capturer photos et vidéos depuis les caméras des appareils mobiles tout en appliquant effets, superpositions et sous-titres générés par IA en temps réel. Chaque image passe par une toile Skia avant encodage, intégrant les données traitées directement dans le MP4 final sans post-production. Pour démarrer, installez le paquet NuGet DrawnUi.Maui.Camera et initialisez DrawnUI dans MauiProgram.cs avec builder.UseDrawnUi().

Placez le composant dans un draw:Canvas avec RenderingMode="Accelerated" :

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

Ancrez le conteneur sur Fill pour éviter les artefacts de rendu. Pour une orientation vidéo correcte, verrouillez l’app en mode portrait : sur Android via ScreenOrientation.SensorPortrait dans MainActivity.cs, et sur iOS via UISupportedInterfaceOrientations dans Info.plist.

Définissez les permissions requises :

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

Démarrez la caméra après le premier rendu du canvas ou lors des événements de navigation.

Contrôle de la caméra et traitement des images

La propriété IsOn gère le démarrage/arrêt. La caméra se met automatiquement en pause quand l’app passe en arrière-plan. L’aperçu s’affiche via SkiaImage dans la propriété Display, idéal pour ajouter flou ou autres effets.

Activez le traitement en temps réel :

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

Les gestionnaires reçoivent un DrawableFrame avec SKCanvas, SKImage, Scale et un drapeau IsPreview. Pendant l’enregistrement, l’aperçu montre une version réduite de l’image traitée — ce que vous voyez est ce que vous obtenez (WYSIWYG).

Voici un exemple de contrôleur personnalisé 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;
    }
}

Enregistrement vidéo avec pré-enregistrement

Démarrez l’enregistrement :

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

Déplacez vers la galerie à la fin :

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

Le pré-enregistrement utilise un tampon circulaire en mémoire pour capturer 3–10 secondes avant d’appuyer sur REC :

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

Les propriétés IsPreRecording et IsRecording sont liables pour les mises à jour UI. L’annulation vide le tampon : StopVideoRecording(true).

Idéal pour les actions imprévisibles comme le sport, la faune ou les caméras de sécurité à déclenchement de mouvement.

Shaders SKSL pour effets vidéo

Appliquez des filtres aux aperçus, photos et vidéos via des shaders SKSL. Surchargez RenderPreviewForProcessing et RenderFrameForRecording :

CameraControl.VideoEffect = ShaderEffect.Movie;

Les shaders s’appliquent sur SKPaint avant encodage, intégrant l’effet dans le MP4. La démo UI inclut un sélecteur de filtres : Noir, Cinéma, et plus.

Sous-titres IA et visualisation audio

La génération de sous-titres alimentée par OpenAI s’intègre en temps réel et s’incruste directement dans les vidéos. Un visualiseur audio (égaliseur) se superpose comme élément réactif, s’adaptant à la rotation de l’appareil via RotationChanged.

Sections de paramètres :

• Entrée : sélection caméra, format, mode.
• Traitement : monitoring audio, sous-titres, shaders.
• Sortie : audio/vidéo, pré-enregistrement, qualité.

L’UI fait pivoter les icônes de boutons indépendamment du verrouillage d’écran.

Points clés

• SkiaCamera traite les images sur GPU via toile Skia pour effets en temps réel intégrés dans la vidéo finale.
• Pré-enregistrement avec tampon circulaire capture les événements avant déclenchement sans écriture disque constante.
• Shaders SKSL s’appliquent aux aperçus et enregistrements sans post-traitement ; callbacks ProcessFrame/Preview distinguent les modes.
• Sous-titres IA OpenAI et superpositions EQ s’incrustent dans MP4 ; UI s’adapte à l’orientation.
• Pause auto en arrière-plan, propriétés liables pour enregistrement/pré-enregistrement.

— Editorial Team