How to record audio or video (Windows Store apps using JavaScript and HTML) (Windows)

0 out of 3 rated this helpful - Rate this topic

In this article

Initialize the MediaCaptureSettings
Create the MediaCapture object
Initialize the MediaCapture object
Create an encoding profile
Start recording
Stop recording
Complete example
Related topics

You can record video from the camera and/or audio from the microphone.

Instructions

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 Windows.Media.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 Windows.Media.MediaProperties.MediaEncodingProfile.CreateFromFileAsync method. Or, if you know the exact encoding settings that you want, you can create a new Windows.Media.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 recording 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);         
}

How to record audio or video (Windows Store apps using JavaScript and HTML)

Instructions

Initialize the MediaCaptureSettings

Create the MediaCapture object

Initialize the MediaCapture object

Create an encoding profile

Start recording

Stop recording

Complete example

Related topics