SkiaCamera: .NET MAUI의 비디오 효과 및 자막

.NET MAUI SkiaCamera로 실시간 비디오 처리와 AI 자막 구현

SkiaCamera는 모바일 기기 카메라로 사진과 비디오를 촬영하면서 효과, 오버레이, AI 생성 자막을 실시간으로 적용할 수 있게 해줍니다. 모든 프레임이 인코딩 전에 Skia 캔버스를 거치며, 후처리 없이 처리된 데이터를 최종 MP4에 완벽히 통합합니다. 시작하려면 DrawnUi.Maui.Camera NuGet 패키지를 설치하고 MauiProgram.cs에서 builder.UseDrawnUi()로 DrawnUI를 초기화하세요.

draw:Canvas 안에 컴포넌트를 배치하고 RenderingMode="Accelerated"를 설정하세요:

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

렌더링 아티팩트를 피하려면 컨테이너를 Fill에 고정하세요. 올바른 비디오 방향을 위해 앱을 세로 모드로 고정: Android에서는 MainActivity.cs의 ScreenOrientation.SensorPortrait, iOS에서는 Info.plist의 UISupportedInterfaceOrientations를 사용하세요.

필요한 권한 설정:

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

캔버스 첫 렌더링 후나 네비게이션 이벤트에서 카메라를 시작하세요.

카메라 제어와 프레임 처리

IsOn 속성으로 시작/중지를 제어합니다. 앱이 백그라운드로 전환되면 카메라가 자동 일시정지됩니다. Display 속성의 SkiaImage로 프리뷰를 렌더링하며, 블러나 기타 효과를 추가하기에 완벽합니다.

실시간 처리를 활성화하세요:

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

핸들러는 SKCanvas, SKImage, Scale, IsPreview 플래그를 포함한 DrawableFrame을 받습니다. 녹화 중에는 처리된 프레임의 축소 버전이 프리뷰에 표시되어 실제와 동일(WYSIWYG)하게 보입니다.

커스텀 컨트롤러 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;
    }
}

사전 녹화가 포함된 비디오 녹화

녹화 시작:

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

완료 후 갤러리로 이동:

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

사전 녹화는 메모리 링 버퍼를 사용해 REC 버튼 전에 3~10초를 캡처합니다:

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

IsPreRecording과 IsRecording 속성은 UI 업데이트를 위해 바인딩 가능합니다. 취소 시 버퍼를 지우려면 StopVideoRecording(true)를 사용하세요.

스포츠, 야생 동물, 모션 감지 보안 카메라처럼 예측 불가능한 액션에 이상적입니다.

비디오 효과를 위한 SKSL 셰이더

SKSL 셰이더로 프리뷰, 사진, 비디오에 필터를 적용하세요. RenderPreviewForProcessing과 RenderFrameForRecording을 오버라이드:

CameraControl.VideoEffect = ShaderEffect.Movie;

셰이더는 인코딩 전에 SKPaint에 렌더링되어 효과를 MP4에 직접 구워넣습니다. UI 데모에는 Noir, Movie 등 필터 전환기가 포함되어 있습니다.

AI 자막과 오디오 시각화

OpenAI 기반 자막 생성이 실시간으로 통합되어 비디오에 직접 임베드됩니다. 오디오 비주얼라이저(EQ)는 RotationChanged로 기기 회전에 반응하는 반응형 요소로 오버레이됩니다.

설정 섹션:

• 입력: 카메라 선택, 형식, 모드.
• 처리: 오디오 모니터링, 자막, 셰이더.
• 출력: 오디오/비디오, 사전 녹화, 품질.

UI는 화면 고정과 독립적으로 버튼 아이콘을 회전시킵니다.

주요 요약

• SkiaCamera는 Skia 캔버스를 통해 GPU에서 프레임을 처리해 실시간 효과를 최종 비디오에 직접 적용합니다.
• 링 버퍼 사전 녹화로 트리거 전에 이벤트를 캡처하며, 디스크 쓰기를 최소화합니다.
• SKSL 셰이더는 후처리 없이 프리뷰와 녹화에 적용; ProcessFrame/Preview 콜백으로 모드 구분.
• OpenAI AI 자막과 EQ 오버레이가 MP4에 임베드; UI가 방향에 적응.
• 백그라운드에서 자동 일시정지, 녹화/사전 녹화 속성 바인딩 가능.

— Editorial Team