Quickstart: capturing video using the MediaCapture API (Windows)

0 out of 3 rated this helpful - Rate this topic

In this article

Prerequisites
Declare the webcam capability
Initialize the MediaCaptureSettings
Create the MediaCapture object
Initialize the MediaCapture object
Create an encoding profile
Start recording
Stop recording
Complete example
Summary
Related topics

This topic shows you how to capture video to a file using the Windows.Media.Capture API. You can use the Windows.Media.Capture API to control the asynchronous capture operation, select an encoding profile and send the resulting video to a file.

For another example of capturing media in a Windows Store app using JavaScript, see the Media capture sample.

Objective: This tutorial shows how to capture video using the Windows.Media.Capture API.

Prerequisites

This topic assumes that you can create a basic Windows Store app built for Windows using JavaScript that uses the Windows Library for JavaScript template. For help creating your first app, see Create your first Windows Store app using JavaScript.

Instructions

Declare the webcam capability

Use the designer of the application manifest file to add the webcam capability. Select the Capabilities tab and then select Webcam from the list.

Initialize the MediaCaptureSettings

The MediaCaptureSettings property provides the configuration settings for the MediaCapture object. Use the MediaCaptureInitializationSettings class to initialize these properties, as in the following example.

JavaScript


// Initialize the MediaCaptureInitialzationSettings.
function initCaptureSettings() {
    captureInitSettings = null;
    captureInitSettings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
    captureInitSettings.audioDeviceId = "";
    captureInitSettings.videoDeviceId = "";
    captureInitSettings.streamingCaptureMode = Windows.Media.Capture.StreamingCaptureMode.audioAndVideo;
    captureInitSettings.photoCaptureSource = Windows.Media.Capture.PhotoCaptureSource.videoPreview;
    captureInitSettings.realTimeModeEnabled = true;
    if (deviceList.length > 0)
        captureInitSettings.videoDeviceId = deviceList[0].id;
}

Create the MediaCapture object

The MediaCapture object contains the methods and asynchronous operations that you need to capture a video.

JavaScript


    oMediaCapture = new Windows.Media.Capture.MediaCapture();

Initialize the MediaCapture object

Use the MediaCapture.InitializeAsync method to initialize the MediaCapture object. By default, InitializeAsync uses the default video capture device and will capture either audio or video. Alternatively, you can create and initialize your own MediaCaptureInitializationSettings object and pass it to the InitializeAsync method.

JavaScript


// Create and initialze the MediaCapture object.
function initMediaCapture() {
    oMediaCapture = null;
    oMediaCapture = new Windows.Media.Capture.MediaCapture();
    oMediaCapture.initializeAsync(captureInitSettings).then (function (result) {
       createProfile();
    }, errorHandler);    
}

Create an encoding profile

The encoding profile contains all of the settings for how the destination file will be encoded. The MediaProperties API provides several options for creating a MediaEncodingProfile object.

The Windows.Media.MediaProperties namespace provides a set of predefined encoding profiles:

AAC audio (M4A)
MP3 audio
Windows Media Audio (WMA)
MP4 video (H.264 video plus AAC audio)
Windows Media Video (WMV)

The first three profiles in this list contain audio only. The other two contain video and audio.

The following code creates a profile for MP4 video.

JavaScript


// Create a profile.
function createProfile() {
    profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
        Windows.Media.MediaProperties.VideoEncodingQuality.qvga);
}

The static CreateMp4 method creates an MP4 encoding profile. The parameter to this method gives the target resolution for the video. In this case, VideoEncodingQuality.HD720p means 1280 x 720 pixels at 30 frames per second. ("720p" stands for 720 progressive scan lines per frame.) The other methods for creating predefined profiles all follow this pattern.

Alternatively, you can create a profile that matches an existing media file by using the MediaProperties.MediaEncodingProfile.CreateFromFileAsync method. Or, if you know the exact encoding settings that you want, you can create a new MediaProperties.MediaEncodingProfile object and fill in all of the profile details.

Start recording

To start capturing video to a file, create a file for the captured video. Then call the StartRecordToStorageFileAsync method, passing in the MediaEncodingProfile and the destination storage file.

JavaScript


// Start the video capture.
function startMediaCaptureSession() {
   Windows.Storage.KnownFolders.videosLibrary.createFileAsync("cameraCapture.mp4", Windows.Storage.CreationCollisionOption.generateUniqueName).then(function (newFile) {
        storageFile = newFile;
        oMediaCapture.startRecordToStorageFileAsync(profile, storageFile).then(function (result) {           
           
        }, errorHandler);
    }  );   
}

Stop recording

To stop capturing video, call the StopRecordAsync method.

JavaScript


// Stop the video capture.
function stopMediaCaptureSession() {
    oMediaCapture.stopRecordAsync().then(function (result) {
        
    }, errorHandler);         
}

Complete example

The following example shows how the steps for capturing video to a file are put together.

JavaScript



var oMediaCapture;
var profile;
var captureInitSettings;
var deviceList = new Array();
var recordState = false;
var storageFile;



function errorHandler(e) {
    sdkSample.displayStatus(e.message + ", Error Code: " + e.code.toString(16));
}



// Begin initialization.
function initialization() {
    document.getElementById("message").innerHTML = "Initialization started.";
    enumerateCameras();   
}


// Identify available cameras.
function enumerateCameras() {
    var deviceInfo = Windows.Devices.Enumeration.DeviceInformation;
    deviceInfo.findAllAsync(Windows.Devices.Enumeration.DeviceClass.videoCapture).then(function (devices) {
        // Add the devices to deviceList
        if (devices.length > 0) {
           
            for (var i = 0; i < devices.length; i++) {
                deviceList.push(devices[i]);              
            }
     
            initCaptureSettings();
            initMediaCapture();
            document.getElementById("message").innerHTML = "Initialization complete.";

        } else {
            sdkSample.displayError("No camera device is found ");            
        }
    }, errorHandler);
}


// Initialize the MediaCaptureInitialzationSettings.
function initCaptureSettings() {
    captureInitSettings = null;
    captureInitSettings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
    captureInitSettings.audioDeviceId = "";
    captureInitSettings.videoDeviceId = "";
    captureInitSettings.streamingCaptureMode = Windows.Media.Capture.StreamingCaptureMode.audioAndVideo;
    captureInitSettings.photoCaptureSource = Windows.Media.Capture.PhotoCaptureSource.videoPreview;
    captureInitSettings.realTimeModeEnabled = true;
    if (deviceList.length > 0)
        captureInitSettings.videoDeviceId = deviceList[0].id;
}


// Create a profile.
function createProfile() {
    profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
        Windows.Media.MediaProperties.VideoEncodingQuality.qvga);
}

// Create and initialze the MediaCapture object.
function initMediaCapture() {
    oMediaCapture = null;
    oMediaCapture = new Windows.Media.Capture.MediaCapture();
    oMediaCapture.initializeAsync(captureInitSettings).then (function (result) {
       createProfile();
    }, errorHandler);    
}


// Start the video capture.
function startMediaCaptureSession() {
   Windows.Storage.KnownFolders.videosLibrary.createFileAsync("cameraCapture.mp4", Windows.Storage.CreationCollisionOption.generateUniqueName).then(function (newFile) {
        storageFile = newFile;
        oMediaCapture.startRecordToStorageFileAsync(profile, storageFile).then(function (result) {           
           
        }, errorHandler);
    }  );   
}

// Stop the video capture.
function stopMediaCaptureSession() {
    oMediaCapture.stopRecordAsync().then(function (result) {
        
    }, errorHandler);         
}

Summary

This topic described how to capture video using the MediaCapture class.

Quickstart: capturing video using the MediaCapture API

Prerequisites

Instructions

Declare the webcam capability

Initialize the MediaCaptureSettings

Create the MediaCapture object

Initialize the MediaCapture object

Create an encoding profile

Start recording

Stop recording

Complete example

Summary

Related topics