SkiaCamera: efectos de video y subtítulos en .NET MAUI

Procesamiento de Video en Tiempo Real y Subtítulos IA en .NET MAUI con SkiaCamera

SkiaCamera te permite capturar fotos y videos desde las cámaras de dispositivos móviles mientras aplicas efectos, superposiciones y subtítulos generados por IA en tiempo real. Cada fotograma pasa por un lienzo de Skia antes de codificarse, integrando los datos procesados de forma fluida en el MP4 final sin necesidad de posproducción. Para empezar, instala el paquete NuGet DrawnUi.Maui.Camera e inicializa DrawnUI en MauiProgram.cs con builder.UseDrawnUi().

Coloca el componente dentro de un draw:Canvas con RenderingMode="Accelerated":

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

Fija el contenedor en Fill para evitar artefactos de renderizado. Para una orientación correcta del video, bloquea la app en modo retrato: en Android mediante ScreenOrientation.SensorPortrait en MainActivity.cs, y en iOS a través de UISupportedInterfaceOrientations en Info.plist.

Configura los permisos necesarios:

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

Inicia la cámara tras el primer renderizado del lienzo o en eventos de navegación.

Control de Cámara y Procesamiento de Fotogramas

La propiedad IsOn gestiona inicio/parada. La cámara se pausa automáticamente al enviar la app al fondo. La previsualización se renderiza mediante SkiaImage en la propiedad Display, ideal para agregar desenfoque u otros efectos.

Activa el procesamiento en tiempo real:

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

Los manejadores reciben un DrawableFrame con SKCanvas, SKImage, Scale y un indicador IsPreview. Durante la grabación, la previsualización muestra una versión reducida del fotograma procesado: lo que ves es lo que obtienes (WYSIWYG).

Aquí un ejemplo de controlador personalizado 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;
    }
}

Grabación de Video con Pregrabación

Inicia la grabación:

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

Mueve el video a la galería al finalizar:

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

La pregrabación usa un búfer circular en memoria para capturar 3–10 segundos antes de pulsar REC:

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

Las propiedades IsPreRecording e IsRecording son vinculables para actualizar la UI. Cancelar limpia el búfer: StopVideoRecording(true).

Ideal para acciones impredecibles como deportes, vida silvestre o cámaras de seguridad activadas por movimiento.

Shaders SKSL para Efectos de Video

Aplica filtros a previsualizaciones, fotos y videos con shaders SKSL. Sobrescribe RenderPreviewForProcessing y RenderFrameForRecording:

CameraControl.VideoEffect = ShaderEffect.Movie;

Los shaders se renderizan en SKPaint antes de codificar, integrando el efecto en el MP4. La demo de UI incluye un selector de filtros: Noir, Movie y más.

Subtítulos IA y Visualización de Audio

La generación de subtítulos impulsada por OpenAI se integra en tiempo real y se incrusta directamente en los videos. Un visualizador de audio (EQ) se superpone como elemento responsivo, reaccionando a la rotación del dispositivo mediante RotationChanged.

Secciones de configuración:

• Entrada: selección de cámara, formato, modo.
• Procesamiento: monitoreo de audio, subtítulos, shaders.
• Salida: audio/video, pregrabación, calidad.

La UI rota los iconos de botones independientemente del bloqueo de pantalla.

Puntos Clave

• SkiaCamera procesa fotogramas en GPU mediante lienzo Skia para efectos en tiempo real integrados en el video final.
• Pregrabación con búfer circular captura eventos antes del disparador sin escrituras constantes al disco.
• Shaders SKSL se aplican a previsualizaciones y grabaciones sin posprocesado; callbacks ProcessFrame/Preview distinguen modos.
• Subtítulos IA de OpenAI y superposiciones EQ se incrustan en MP4; UI se adapta a la orientación.
• Pausa automática en segundo plano, propiedades vinculables para grabación/pregrabación.

— Editorial Team