How to add video stabilization (HTML)

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

The VideoStabilization effect can help reduce shakiness in video, such as from a hand-held camera. This effect can be added during live capture or added as a post-processing step during transcoding.

Prerequisites

This topic assumes that you can create a basic Windows Store app 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

Step 1: Add the video stabilization effect during live capture

To add the stabilization effect during live capture, use the Windows.Media.Capture.AddEffectAsync method. This method takes the following parameters:

  • MediaStreamType - One of the values of the MediaStreamType enumeration that specifies whether the stream is for video recording, video preview, audio, or photo.
  • effectActivationID - The class identifier of the activatable runtime class that implements the effect. The runtime class must implement the IMediaExtension interface. The Windows.Media namespace provides a VideoEffects class.
  • effectSettings - An IPropertySet that contains additional configuration parameters for the effect. If no additional configuration is needed for the effect, then this parameter should be null.

You can call this method multiple times to add several effects.

This example adds a VideoStabilization effect to the chain of effects that are attached to the source stream coming out of the device source. And it calls the ClearEffectsAsync method to clear all of the effects from the stream.

    //
    // Create a Media Capture object and add VideoStabilization.
    //

    oMediaCapture = new Windows.Media.Capture.MediaCapture();
    oMediaCapture.initializeAsync().then(function (result) {
        createProfile();
    }, errorHandler);
    // captureMgr is a MediaCapture object defined elsewhere
    capturMgr.addEffectAsync(
        Windows.Media.Capture.MediaStreamType.videoRecord,
        "Windows.Media.VideoEffects.VideoStabilization",
        null);


    //
    // To clear all the effects from this stream type, use ClearEffectsAsync.
    //
    var clearEffectsOperation = oMediaCapture.clearEffectsAsync(Windows.Media.Capture.MediaStreamType.videoRecord);

Step 2: Add the video stabilization effect during transcoding

To add the stabilization effect during transcoding, use the MediaTranscoder.AddVideoEffect method and provide the class identifier of the activatable runtime class that implements the effect. You can call AddVideoEffect multiple times to add several effects.

This example adds the VideoStabilization effect to the MediaTranscoder object. You can call this method multiple times to add several effects. Call the MediaTranscoder.ClearEffects method to clear all of the effects from the transcoder.

//
// Create a Transcoder object and add VideoStabilization.
//

var oTranscoder = new Windows.Media.Transcoding.MediaTranscoder();

oTranscoder.addVideoEffect("Windows.Media.VideoEffects.VideoStabilization");


//
// To clear all the effects from this stream type, use ClearEffects.
//
oTranscoder.clearEffects();

Media Capture Sample

Transcoding Media Sample

Windows.Media.Capture

Windows.Media.Transcoding