Display Live Preview of your Webcam Stream in Windows Store App

Friends,

In this post, we will see how simple it is to stream a live preview from your webcam on a small screen in your Windows store App. You can use it to display user’s picture in the side of a screen or also can show what the camera is focusing on at a given instance. To do this, we will make use of 2 classes. One is CaptureElement control present in Windows.UI.Xaml.Controls and other is MediaCapture class present in Windows.Media.Capture namespace. This post will show how to instantiate the camera and display camera’s stream on the app as soon as the app loads. So, let’s get started –

• Make sure you have added App capabilities to use Webcam + Microphone in App manifest file.

• On XAML page, we declare a CaptureElement control as below.

  protected override async void OnNavigatedTo(NavigationEventArgs e)
  {
        MediaCapture captureMgr = new MediaCapture();
        await captureMgr.InitializeAsync();
        
        capturePreview.Source = captureMgr;
        await captureMgr.StartPreviewAsync();
  }
  

• Inside the OnNavigatedTo() event hander, we will write the below code.
• You’re done.

If you see the 2nd step above, we are 1st declaring an object of MediaCapture class and then we are calling the asynchronous InitializeAsync() to initialize the webcam. ON this line, you can also specify the webcam you want to use for the app. You can choose a webcam as discussed in this link. In the next line, we set the Source of the CaptureElement declared in Step 1 to the initialized webcam. In the final line, we call StartPreviewAsync() function of MediaCapture class to start displaying the webcam’s stream to the app.

Hope you liked reading this article. Keep learning & sharing. Cheers!