How to use CapturedFrame to render a web cam video preview while recording using WinRT MediaCapture in WPF Desktop app

Question

There are plenty of developers that are frustrated by the fact that the MediaCapture class is available to use in WPF, however, the CaptureElement used to preview the video recording is not.

I understand this limitation, however, I want to use the MediaCapture class to record video.. and I'd like to find a way to provide a preview in WPF if it's possible.

After a lot of digging online, I ran across the CapturedFrame class. It appears that the CapturedFrame is an abstraction that represents a single frame of video recorded from the MediaCapture object.

CapturedFrame MSDN:

https://msdn.microsoft.com/en-us/library/windows/desktop/windows.media.capture.capturedframe.aspx

The CapturedFrame class has a property SoftwareBitmap ..

My question:

Can anyone provide some code or a link which may demonstrate how you could perhaps record a video to a file from MediaCapture.. while processing each frame to some how grab the Bitamp to show the bitmap in WPF with an image control?

I understand that this is not the most effective way to handle the problem, however, if it's possible and it does work, this should be a viable work around for all of us WPF desktop devs that can't use the CaptureElement.

I would like to say that I am aware of WPFMediaKit and other open source projects, however, if this is possible, it's the way that I wish to proceed.

Thanks in advance to any replies.

Mike Mike · Accepted Answer · 2015-05-08T00:00:53

There is a sample on the Microsoft github page that is relevant, although they target Windows 10 store apps. If I were to start a new project, I'd go with the Universal Windows Platform instead of WPF, so you may be interested in migrating your project to get this and other functionality.

GetPreviewFrame: This sample will capture preview frames to a SoftwareBitmap and display them in an Image control. Here is the relevant part:

private async Task GetPreviewFrameAsSoftwareBitmapAsync()
{
    // Get information about the preview
    var previewProperties = _mediaCapture.VideoDeviceController.GetMediaStreamProperties(MediaStreamType.VideoPreview) as VideoEncodingProperties;

    // Create the video frame to request a SoftwareBitmap preview frame
    var videoFrame = new VideoFrame(BitmapPixelFormat.Bgra8, (int)previewProperties.Width, (int)previewProperties.Height);

    // Capture the preview frame
    using (var currentFrame = await _mediaCapture.GetPreviewFrameAsync(videoFrame))
    {
        // Collect the resulting frame
        SoftwareBitmap previewFrame = currentFrame.SoftwareBitmap;

        // Copy the SoftwareBitmap to a WriteableBitmap to display it to the user
        var wb = new WriteableBitmap(previewFrame.PixelWidth, previewFrame.PixelHeight);
        previewFrame.CopyToBuffer(wb.PixelBuffer);

        // Display it in the Image control
        PreviewFrameImage.Source = wb;
    }
}

Have a closer look at the sample to see how to get all the details. Or, to have a walkthrough, you can watch the camera session from the recent //build/ conference, which includes a little bit of a walkthrough through some camera samples.

Now, if you do migrate your project, you might as well use the CaptureElement, but I thought you might be interested in seeing this anyway.

How to use CapturedFrame to render a web cam video preview while recording using WinRT MediaCapture in WPF Desktop app

1 Answers