Utilize o OpenCV com o MediaFrameReader

Este artigo mostra como usar a biblioteca OpenCV (Open Source Imagem Digitalizada) com um MediaFrameReader para processar fotogramas da câmara em tempo real. Esta técnica é útil para tarefas de análise de imagens, como deteção de bordas, rastreio de objetos e subtração em segundo plano numa aplicação de ambiente de trabalho WinUI 3.

Pré-requisitos

Antes de começar, certifique-se de que tem:

  • Um projeto de desktop WinUI 3 (embalado ou não embalado).
  • Uma webcam compatível ligada ao seu dispositivo.
  • Os pacotes NuGet OpenCvSharp4 e OpenCvSharp4.runtime.win instalados no seu projeto.
  • Acesso à câmara declarado para a sua aplicação, conforme descrito em Declarar acesso à câmara.

Para instalar o OpenCV para .NET:

dotnet add package OpenCvSharp4
dotnet add package OpenCvSharp4.runtime.win

Declarar acesso à câmara

Antes de a sua aplicação poder utilizar MediaFrameReader para ler fotogramas de uma câmara Web, deve declarar que utiliza a câmara. A forma como fazes isto depende de a tua aplicação estar ou não embalada.

  • Aplicações incluídas: Adicionar a webcam capacidade do dispositivo a Package.appxmanifest:

    <Capabilities>
        <DeviceCapability Name="webcam" />
    </Capabilities>
    
  • Aplicações não empacotadas: As aplicações não empacotadas não têm manifesto de pacote, por isso não há possibilidade de declarar. O acesso à câmara para aplicações não empacotadas é controlado, em vez disso, pela definição Permitir que as aplicações de ambiente de trabalho acedam à sua câmara em Definições>Privacidade e segurança>Câmara no dispositivo do utilizador.

Em ambos os casos, o utilizador pode ainda negar o acesso à câmara ao nível do sistema operativo. Verifique o acesso antes de inicializar a câmara e trate do caso negado de forma elegante, conforme descrito na definição de privacidade da câmara do Windows.

Configurar o MediaFrameReader

Primeiro, cria uma MediaCapture instância e encontra uma fonte de fotogramas de vídeo a cores. Depois, crie um MediaFrameReader frame para receber:

using System.Linq;
using Windows.Media.Capture;
using Windows.Media.Capture.Frames;
using Windows.Graphics.Imaging;

private MediaCapture _mediaCapture;
private MediaFrameReader _frameReader;

private async Task InitializeFrameReaderAsync()
{
    // Find a color video source group
    var sourceGroups =
        await MediaFrameSourceGroup.FindAllAsync();

    var selectedGroup = sourceGroups.FirstOrDefault(group =>
        group.SourceInfos.Any(info =>
            info.MediaStreamType == MediaStreamType.VideoPreview &&
            info.SourceKind == MediaFrameSourceKind.Color));

    if (selectedGroup == null)
    {
        // No suitable camera found
        return;
    }

    _mediaCapture = new MediaCapture();
    var settings = new MediaCaptureInitializationSettings
    {
        SourceGroup = selectedGroup,
        MemoryPreference = MediaCaptureMemoryPreference.Cpu,
        StreamingCaptureMode = StreamingCaptureMode.Video,
    };

    await _mediaCapture.InitializeAsync(settings);

    // Find the color video source
    var colorSource = _mediaCapture.FrameSources
        .Values.FirstOrDefault(source =>
            source.Info.SourceKind == MediaFrameSourceKind.Color);

    if (colorSource == null)
    {
        return;
    }

    _frameReader =
        await _mediaCapture.CreateFrameReaderAsync(colorSource);
    _frameReader.FrameArrived += FrameReader_FrameArrived;

    await _frameReader.StartAsync();
}

Importante

Defina MemoryPreference como Cpu para que os fotogramas cheguem como objetos SoftwareBitmap aos quais pode aceder diretamente a partir de código gerido.

Processar fotogramas com OpenCV

No FrameArrived gestor de eventos, retira o SoftwareBitmap do frame e converte-o para OpenCV Mat para processamento. Precisas da interface COM IMemoryBufferByteAccess para aceder aos dados brutos dos píxeis. Adicione esta definição ao seu projeto:

using System.Runtime.InteropServices;

[ComImport]
[System.Runtime.InteropServices.Guid("5B0D3235-4DBA-4D44-865E-8F1D0E4FD04D")]
[InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
unsafe interface IMemoryBufferByteAccess
{
    void GetBuffer(out byte* buffer, out uint capacity);
}

Depois processa os frames:

using OpenCvSharp;

private void FrameReader_FrameArrived(
    MediaFrameReader sender,
    MediaFrameArrivedEventArgs args)
{
    using var frameRef =
        sender.TryAcquireLatestFrame();
    if (frameRef == null) return;

    var bitmap = frameRef.VideoMediaFrame?.SoftwareBitmap;
    if (bitmap == null) return;

    // Convert to Bgra8 format if needed
    SoftwareBitmap convertedBitmap = null;
    if (bitmap.BitmapPixelFormat != BitmapPixelFormat.Bgra8)
    {
        convertedBitmap = SoftwareBitmap.Convert(
            bitmap, BitmapPixelFormat.Bgra8);
        bitmap = convertedBitmap;
    }

    // Access the pixel buffer
    using var buffer = bitmap.LockBuffer(
        BitmapBufferAccessMode.Read);
    using var reference =
        buffer.CreateReference();

    // Get the buffer as a byte array via
    // IMemoryBufferByteAccess
    unsafe
    {
        ((IMemoryBufferByteAccess)reference).GetBuffer(
            out byte* dataInBytes,
            out uint capacity);

        // Use stride from the buffer plane description
        // to avoid corrupted images from padding
        var desc = buffer.GetPlaneDescription(0);
        using var mat = Mat.FromPixelData(
            desc.Height, desc.Width,
            MatType.CV_8UC4,
            (IntPtr)dataInBytes,
            desc.Stride);

        // Process the frame with OpenCV
        ProcessFrame(mat);
    }

    // Dispose the converted bitmap if we created one
    convertedBitmap?.Dispose();
}

Note

O bloco de código inseguro usa IMemoryBufferByteAccess para obter um apontador direto para os dados do bitmap. Precisas de ativar código inseguro nas definições do teu projeto adicionando <AllowUnsafeBlocks>true</AllowUnsafeBlocks> ao teu .csproj ficheiro.

Aplicar operações OpenCV

Pode aplicar qualquer operação de processamento de imagem do OpenCV ao Mat. Aqui está um exemplo que aplica a deteção de bordas Canny:

private SoftwareBitmap _processedBitmap;

private void ProcessFrame(Mat inputMat)
{
    // Convert to grayscale for edge detection
    using var grayMat = new Mat();
    Cv2.CvtColor(inputMat, grayMat, ColorConversionCodes.BGRA2GRAY);

    // Apply Canny edge detection
    using var edges = new Mat();
    Cv2.Canny(grayMat, edges, 50, 200);

    // Convert back to BGRA for display
    using var outputMat = new Mat();
    Cv2.CvtColor(edges, outputMat, ColorConversionCodes.GRAY2BGRA);

    // Create a SoftwareBitmap from the processed Mat
    var processedBitmap = new SoftwareBitmap(
        BitmapPixelFormat.Bgra8,
        outputMat.Width,
        outputMat.Height,
        BitmapAlphaMode.Premultiplied);

    using var destBuffer = processedBitmap.LockBuffer(
        BitmapBufferAccessMode.Write);
    using var destRef = destBuffer.CreateReference();

    unsafe
    {
        ((IMemoryBufferByteAccess)destRef).GetBuffer(
            out byte* destBytes, out uint destCapacity);

        // Copy the processed data to the SoftwareBitmap row by row.
        // outputMat.Step() and desc.Stride can differ (for example,
        // because of OpenCV's own row alignment), so a single bulk
        // copy across the whole buffer can corrupt the image. Copying
        // one row at a time, using each buffer's own stride, avoids
        // that mismatch.
        var desc = destBuffer.GetPlaneDescription(0);
        int rowBytes = outputMat.Width * outputMat.ElemSize();
        byte* sourceRow = (byte*)outputMat.Data.ToPointer();
        byte* destRow = destBytes;

        for (int row = 0; row < outputMat.Height; row++)
        {
            System.Buffer.MemoryCopy(
                sourceRow,
                destRow,
                destCapacity - (uint)(row * desc.Stride),
                (uint)rowBytes);

            sourceRow += outputMat.Step();
            destRow += desc.Stride;
        }
    }

    // Update the UI with the processed frame
    DispatcherQueue.TryEnqueue(async () =>
    {
        var source =
            new Microsoft.UI.Xaml.Media.Imaging
                .SoftwareBitmapSource();
        await source.SetBitmapAsync(processedBitmap);
        ProcessedImage.Source = source;

        _processedBitmap?.Dispose();
        _processedBitmap = processedBitmap;
    });
}

Adicione um Image controlo ao seu XAML para apresentar os fotogramas processados:

<Image x:Name="ProcessedImage" Stretch="Uniform" />

Limpeza de recursos

Pare o leitor de frames e liberte os recursos quando terminar:

private async Task CleanupAsync()
{
    if (_frameReader != null)
    {
        _frameReader.FrameArrived -= FrameReader_FrameArrived;
        await _frameReader.StopAsync();
        _frameReader.Dispose();
    }

    _mediaCapture?.Dispose();
    _processedBitmap?.Dispose();
}