How to Build a Windows Phone App Capable of Recording Video

Introduction

The first version of Windows Phone platform did not support recording video for non-native applications. However, with Windows Phone 7.1 onwards, Microsoft has provided platform support for capturing video. This has enabled application developers to integrate video capturing capability with their applications.

Before we dive into how we can capture video in a Windows Phone application, let us first understand the basics of video recording.

Basics of video Recording

To record video in an application, you need to declare it as part of the capability in the application manifest file. Needless to say, it is useful to also declare the microphone capability unless you only want to capture video without any audio.

The ability to capture video is offered through the System.Windows.Media.CaptureSource class. The output of the capture needs to be directly to a System.Windows.Media.FileSink object.

To use the capture source, you need to create a new instance of CaptureSource class.

Next, we need to call the CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice API to get the default Video Capture device. We would need to initialize it first, and then invoke the CaptureSource.Start() method to start capturing the video stream.

Capturing the video stream does not equal recording the video (video recording only happens when you direct the captured video stream to an instance of a  FileSink object by setting the CaptureSource property.

We will now explore building a very simple video recording application.

Hands On

Create a new Visual Studio Windows Phone App project titled WPVideoRecordingDemo.

New Visual Studio Windows Phone App project
New Visual Studio Windows Phone App project

Open the application manifest file by double clicking on WMManifest.xml.

Open WMManifest.xml
Open WMManifest.xml

Declare the ID_CAP_ISV_CAMERA and ID_CAP_MICROPHONE capabilities under the capabilities tab.

The ID_CAP_ISV_CAMERA and ID_CAP_MICROPHONE The ID_CAP_ISV_CAMERA and ID_CAP_MICROPHONE
The ID_CAP_ISV_CAMERA and ID_CAP_MICROPHONE

If you want, you can also demand that either a front-facing or rear-facing camera be present as a condition of install by specifying it as part of the requirements.

Hardware Requirements
Hardware Requirements

Next, we will build the UI for presenting the view of what we will be recording.

It is recommended that all video capture applications have landscape orientation. You can set that by updating the phone:PhoneApplicationPage element in MainPage.xaml.

Changes are highlighted below.

<phone:PhoneApplicationPage
    x:Class="WPVideoRecordingDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Landscape" Orientation="LandscapeLeft"
    shell:SystemTray.IsVisible="True"> 

Next, we will build the UI for displaying what we are capturing.

By default, there will be a Grid element named LayoutRoot just below the phone:PhoneApplicationPage element. We will replace it with a canvas where we will render what we are capturing.

The canvas will have the name of LayoutRoot. In this canvas, we will add a rectangle, which will host a media element for displaying the video being captured.

Our LayoutRoot element is shown below.

<Canvas x:Name="LayoutRoot" Background="Transparent">
 
        <!--Camera viewfinder >-->
        <Rectangle 
            x:Name="myViewfinderRectangle"
            Width="640" 
            Height="480" 
            HorizontalAlignment="Left" 
            Canvas.Left="80"/>
 
        <MediaElement 
            x:Name="MyVideoPlayer" 
            Width="640" 
            Height="480"
            AutoPlay="True" 
            RenderTransformOrigin="0.5, 0.5" 
            VerticalAlignment="Center" 
            HorizontalAlignment="Center" 
            Stretch="Fill"
            Canvas.Left="80"/>
    </Canvas>

For our application, we will start recording when we tap on the recording and stop recording when we tap on it again.

Our XAML for the rectangle will now look like:

<Rectangle 
            x:Name="myViewfinderRectangle"
            Width="640" 
            Height="480" 
            HorizontalAlignment="Left" 
            Canvas.Left="80" Tap="myViewfinderRectangle_Tap"/>

Now, we will make changes in MainPage.xaml.cs.

We will now declare the variables of type VideoBrush (for capturing video), CaptureSource  (for source for capturing video), VideoCaptureDevice (device for capturing video), and a FileSlink (for storing the recording).

We will also add a variable to track if we are recording or not.

public partial class MainPage : PhoneApplicationPage
    {
        private VideoBrush myVideoRecorderBrush;
        private CaptureSource myCaptureSource;
        private VideoCaptureDevice myVideoCaptureDevice;
        private FileSink myFileSink;
        private bool recordingStarted = false;
        private bool playbackStarted = false;
        
        // Constructor
        public MainPage()

Next, we will write code to initialize the video recorder.

public MainPage()
        {
            InitializeComponent();
            myCaptureSource = new CaptureSource();
            myFileSink = new FileSink();
            // Get a handle to the camera on the device.
            myVideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();
            myCaptureSource.CaptureFailed += myCaptureSource_CaptureFailed; // setting up what to do in case of capture failed.
            if (myVideoCaptureDevice != null)
            {
                myVideoRecorderBrush = new VideoBrush();
                myVideoRecorderBrush.SetSource(myCaptureSource); // set the source so that we can render what the camera sees on the screen
                myViewfinderRectangle.Fill = myVideoRecorderBrush;
                myCaptureSource.Start(); // start the video camera 
            }
        }

We will now implement the event handler when the capture fails.

void myCaptureSource_CaptureFailed(object sender, ExceptionRoutedEventArgs e)
        {
            MessageBox.Show("Capture failed");
        }

Next, we will implement the method to start recording.

public void StartRecording()
        {
            // stop recording if it is in progress.
            if (myCaptureSource.VideoCaptureDevice != null
            && myCaptureSource.State == CaptureState.Started)
            {
                myCaptureSource.Stop();
                recordingStarted = false;
 
                myFileSink.CaptureSource = myCaptureSource;
                myFileSink.IsolatedStorageFileName = "FileRecording1.mp4";
            }
 
            // Begin recording.
            if (myCaptureSource.VideoCaptureDevice != null
                && myCaptureSource.State == CaptureState.Stopped)
            {
                myCaptureSource.Start();
                MessageBox.Show("Recording started");
                recordingStarted = true;
                playbackStarted = false;
            }
        }

Next in line is the method that will stop the recording.

public void StopRecording()
        {
            if (myCaptureSource.State == CaptureState.Started)
            {
                myCaptureSource.Stop();
                MessageBox.Show("Recording stopped");
            }
 
            recordingStarted = false;
            playbackStarted = false;
            myFileSink.CaptureSource = null;
            myFileSink.IsolatedStorageFileName = null;
        }

We will now implement the method to handle taps on the screen. With every tap, we will either start or stop recording.

private void myViewfinderRectangle_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            if (recordingStarted == false)
                StartRecording();
            else
                StopRecording();
        }

Finally, we need to clean up the resources when the user navigates away from the application.

private void CleanupVideoRecorder()
        {
            if (myCaptureSource != null)
            {
                if (myCaptureSource.VideoCaptureDevice != null
                    && myCaptureSource.State == CaptureState.Started)
                {
                    myCaptureSource.Stop();
                    recordingStarted = false;
                }
 
                myCaptureSource.CaptureFailed -= myCaptureSource_CaptureFailed;
 
                myCaptureSource = null;
                myVideoCaptureDevice = null;
                myFileSink = null;
                myVideoRecorderBrush = null;
            }
        }

This cleanup code is called as shown below.

protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            // Dispose of camera and media objects.
            CleanupVideoRecorder();
 
            base.OnNavigatedFrom(e);
        }

Our application is now complete. When you run this application, you will get messagebox notification when the recording has started and when it stops. You can start/stop recording by tapping on the screen.

If you have trouble following along, you can download the sample code below.

Summary

In this article, we learned how to build a simple video recording application on Windows Phone 8. I hope you have found this information useful.

About the Author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com



Related Articles

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: November 20, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Are you wanting to target two or more platforms such as iOS, Android, and/or Windows? You are not alone. 90% of enterprises today are targeting two or more platforms. Attend this eSeminar to discover how mobile app developers can rely on one IDE to create applications across platforms and approaches (web, native, and/or hybrid), saving time, money, and effort and introducing apps to market faster. You'll learn the trade-offs for gaining long …

  • Live Event Date: October 29, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you interested in building a cognitive application using the power of IBM Watson? Need a platform that provides speed and ease for rapidly deploying this application? Join Chris Madison, Watson Solution Architect, as he walks through the process of building a Watson powered application on IBM Bluemix. Chris will talk about the new Watson Services just released on IBM bluemix, but more importantly he will do a step by step cognitive …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds