DotNetCurry Logo

ScreenCapture API in Windows Phone 8.1

Posted by: Vikram Pendse , on 5/4/2015, in Category Windows Phone
Views: 8712
Abstract: ScreenCapture class in Windows Phone 8.1 allows you to build screen capturing functionality for your applications. This feature can be useful to understand your end audience and how they interact with your app.

Microsoft has released a wide range of APIs for Windows and Windows Phone. Some of these APIs can be used on both Platforms using the Universal App Development Model. However there are some features that are limited to an individual platform only, one of them being the ScreenCapture feature which is currently available only on Windows Phone 8.1.

With these APIs, developers across the world are building some unique Windows Store apps every day. We have a variety of devices at our disposal and some fully functional Windows and Windows Phone emulators to test our apps, but we still share the Beta version of our apps to a limited set of people for testing and getting feedback.

When it comes to Games and other critical enterprise apps, it is important to capture the behavior of the end user. It is important to capture how they interact with the app, how they navigate and which options they choose frequently on a screen. If you have used Microsoft Test Management Studio, it actually records the screen which helps the QA team to file an exact bug by using this recording. This is also helpful for developers to check the video and follow the steps to reproduce the bugs and fix the same.

This article is published from the DotNetCurry .NET Magazine – A Free High Quality Digital Magazine for .NET professionals published once every two months. Subscribe to this eMagazine for Free and get access to hundreds of free .NET tutorials from experts

For Windows Phone apps, if you want to test and observe how users are interacting with your apps, then recording the screen is a good option here. You may have come across various desktop recording tools like Camtasia Studio and Expression encoder, but there aren’t many tools available out-of-the-box from Microsoft for Windows Phone.

Luckily we have the ScreenCapture API that allows us to build such functionality in our apps. Though the API (Namespace) we are going to use for our example here is available in the Desktop application development as well, but the classes and methods we will talk about in this article, are currently only available in Windows Phone 8.1. Let’s explore this in detail.

Namespace used for ScreenCapture class

The ScreenCapture class falls under the namespace “Windows.Media.Capture”. Although this namespace is also available for Windows Store Applications to capture photos and perform other image related tasks; the ScreenCapture class is only made available for Windows Phone 8.1. To be more specific, it is available on Windows Phone Silverlight 8.1 and Windows Runtime (WinRT) apps as well.

Screen Recording Application for Windows Phone 8.1 (WinRT)

I have already mentioned that the ScreenCapture feature is available for both Windows Phone 8.1 WinRT and Silverlight Project. However here we will take WinRT as our base project. For this, you must have Visual Studio 2013 Update 3 and above which consists of the tools and APIs required in the Visual Studio update package.

file-new-project

Once you create a new Project, It is important to make the following changes in the Capabilities tab in Package.appxmanifest :

app-manifest

Now lets do our XAML design. In this example, we are building a simple RTO (Regional Transport Office) Vehicle Registration Screen with a couple of Textboxes and a DatePicker. I have used a simple layout, but you can design the XAML according to your business scenario.

Step 1 : Build XAML

Here is our XAML Design


    
        
        
        
        
        
        
        
        
        
        
        
    


    
        
    


Step 2: Understanding the structure of Windows.Media.Capture Namespace

The following namespaces need to be added:

using System;
using System.Threading.Tasks;
using Windows.Media.Capture;
using Windows.Media.MediaProperties;
using Windows.Storage;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

Here Windows.Media.Capture is our core namespace which is widely used in Windows Store and Windows Phone apps for capturing Image. However in our example, we are using the ScreenCapture class which is part of this namespace. If you open the definition of the ScreenCapture class, you will be able to see the following methods and members details:

screencapture-class-def

Let’s build the recording functionality using this ScreenCapture class.

Step 3: Building ScreenCapturing functionality and storing output as Video file

We need to globally define a variable of type MediaCapture which will be used across methods.

private MediaCapture mCap;

First we will see how we can start the recording. Check the following code which will be part of the button click placed in the App Bar of the application. This will first initialize the current screen to be captured with ScreenCapture.GetForCurrentView(); method.

//Record the Screen
private async void btnRecord_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    if (btnRecord.IsChecked.HasValue && btnRecord.IsChecked.Value)
    {
        // Initialization - Set the current screen as input
        var scrCaptre = ScreenCapture.GetForCurrentView();              

        mCap = new MediaCapture();
        await mCap.InitializeAsync(new MediaCaptureInitializationSettings
        {
             VideoSource = scrCaptre.VideoSource,
             AudioSource = scrCaptre.AudioSource,
        });

        // Start Recording to a File and set the Video Encoding Quality
        var file = await GetScreenRecVdo(); 
await mCap.StartRecordToStorageFileAsync(MediaEncodingProfile.CreateMp4(VideoEncodingQuality.Auto), file);
       }
       else
       {                
           await StopRecording();                
       }
}

Note that the capturing functionality has to be triggered based on consent provided by end user. Once you start your app, you can either “allow” or “block” capturing functionality. Once you allow, you cannot then block it again unless you uninstall and reinstall and enforce blocking option. The following screen will help you to understand the consent part once you run the application for the first time.

appscreen

In the mCap.StartRecordToStorageFileAsync(MediaEncodingProfile.CreateMp4(VideoEncodingQuality.Auto), file); method, MediaEncodingProfile has various methods to create output files of different categories as shown here:

  • CreateAvi
  • CreateM4a
  • CreateMp3
  • CreateMp4
  • CreateWav
  • CreateWma
  • CreateWmv

You can choose any one of the methods. For this example we are creating a MP4 file. Also VideoEncodingQuality enum allows you to select Video Encoding quality type for the video which is being captured. Currently it is kept at Auto

  • Auto
  • HD1080p
  • HD720p
  • Wvga
  • Ntsc
  • Pal
  • Vga
  • Qvga

For stopping the recording, we have the StopRecordAsync() method as shown here:

private async Task StopRecording()
{
   // Stop recording and dispose resources
    if (mCap != null)
    {
        await mCap.StopRecordAsync ();
        mCap.Dispose();
        mCap = null;
     }
}
protected override async void OnNavigatedFrom(NavigationEventArgs e)
{
  await StopRecording();
}

Step 4: Set the Target Output Folder and Test the Screen Recorder

The following method will help you to set the Video file name and destination folder where you want to save the file. Note that we are not storing Video on an SD card, we are storing it in the Phone storage. To store the video on an SD card, you need to make some code changes and also turn on “Removable Storage” capability from Package.appxmanifest file.

//Create File for Recording on Phone/Storage
private static async Task GetScreenRecVdo(CreationCollisionOption creationCollisionOption = CreationCollisionOption.ReplaceExisting)
{
            return await KnownFolders.SavedPictures.CreateFileAsync("VehicleDetails.mp4", creationCollisionOption);
}

KnownFolders class from Windows.Storage gives you the flexibility to choose the destination location to store Video File. Out-of-the-box, the following locations are present as StorageFolder

  • CameraRoll
  • DocumentsLibrary
  • HomeGroup
  • MediaServerDevic
  • MusicLibrary
  • PicturesLibrary
  • RemovableDevices
  • SavedPictures
  • VideosLibrary

Currently we are storing Video in SavedPictures folder, so you can see the Video file is available at the given location once you stop the recording. Note that Start and Stop ScreenCapture works from single button provided in the App Bar.

videolocation

Step 5: Watch the Screen Recording

Now you can watch the video from your Phone and see how screen capturing is done. If you do not have a device and still want to test, you can do it on the emulator by storing the file in some folder on the emulator and then accessing it and displaying it in the MediaElement control.


You can then access the video from the SavedPictures once you stop recording. You can put this code right after Stop Recording or in a separate Method.

var file = await GetScreenRecVdo(CreationCollisionOption.OpenIfExists);
OutPutScreen.SetSource(await file.OpenReadAsync(), file.ContentType);

Summary

With the ScreenCapture class, you can build simple Screen Capturing functionality for your application. This functionality can be used to understand nature and behavior of end users of an application. You can also use it to understand bugs in an application and determine enhancements that can be made to fix them. This is specifically useful for critical enterprise applications and games where User interaction is considered as a key aspect for the success of the app and used for benchmarking as well as to record user satisfaction. This also helps to generate analytical data by capturing different types and levels of interaction of users with the app.

I hope you will try this unique feature of Screen Capture for your app in the pre-release phase to understand your end audience and how they interact with your app.

Download the entire source code from GitHub at bit.ly/dncm18-screencapture

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on Google+
Further Reading - Articles You May Like!
Author
Vikram Pendse is currently working as a Technology Manager for Microsoft Technologies and Cloud in e-Zest Solutions Ltd. in (Pune) India. He is responsible for Building strategy for moving Amazon AWS workloads to Azure, Providing Estimates, Architecture, Supporting RFPs and Deals. He is Microsoft MVP since year 2008 and currently a Microsoft Azure and Windows Platform Development MVP. He also provides quick start trainings on Azure to startups and colleges during weekends. He is a very active member in various Microsoft Communities and participates as a Speaker in many events. You can follow him on Twitter @VikramPendse


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!