How to mirror the video (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]

Mirroring the preview image is useful for video conferencing and video chat applications. Typically the user wants to see a reflected image of themselves. The "correct" (non-mirrored) view can look strange, because we are used to seeing ourselves in a mirror.

Note   You can use SetPreviewMirroring and GetPreviewMirroring, as described in the instructions below, to flip the preview image horizontally. However for Windows Runtime app using JavaScript the preferred and most efficient way to mirror the preview video is to instead use the msHorizontalMirror property of the video object.

Instructions

Step 1: Create the MediaCapture object

The MediaCapture object contains the methods, properties, and asynchronous operations (Initialize Async, Start, Stop, etc.) that you need to mirror the preview image.

    oMediaCapture = new Windows.Media.Capture.MediaCapture();
    oMediaCapture.initializeAsync().then(function (result) {

Step 2: Set preview mirroring

The MediaCapture class provides methods for managing the preview image horizontal orientation. GetPreviewMirroring indicates whether the preview image is mirror or not. SetPreviewMirroring enables or disables horizontal mirroring of the video preview stream.

This example queries whether horizontal mirroring is enabled. Horizontal mirroring is enabled if it is disabled.

    if( !oMediaCapture.getPreviewMirroring() )
        oMediaCapture.setPreviewMirroring(true);

Step 3: Start previewing

To start previewing video, call the startPreviewAsync method.

// Start Previewing
await _mediaCapture.StartPreviewAsync();
(App.Current as App).IsPreviewing = true;

    // Start Previewing
    var startPreviewOperation = oMediaCapture.startPreviewAsync();

Step 4: Stop previewing

To stop the preview, call the StopPreviewAsync method.

    // Set the handler for the StopPreviewOperation.    
    var stopPreviewOperation = oMediaCapture.stopPreviewAsync();

Step 5: Complete example

This example shows how to preview a video using horizontal mirroring. The entry point in this example is the StartPreview function. This function calls a function to enable horizontal mirroring and creates the handler for the startPreviewOperation to begin previewing.

var oMediaCapture;
var profile;

function turnMirroringOn()
{
    if( !oMediaCapture.getPreviewMirroring() )
        oMediaCapture.setPreviewMirroring(true);
}

function OnStartPreviewComplete(startPreviewOperation)
{
    // This method does not return a value.
    //
    startPreviewOperation.GetResults();
    // Set the handler for the StopPreviewOperation.    
    var stopPreviewOperation = oMediaCapture.stopPreviewAsync();

    stopPreviewOperation.Completed = OnStopPreviewComplete;
    stopPreviewOperation.Start();

    startPreviewOperation.Close();
}

function OnStopPreviewComplete(stopPreviewOperation)
{
    // This method does not return a value.
    //
    stopPreviewOperation.GetResults();

    stopPreviewOperation.Close();
}

function startPreview()
{

    oMediaCapture = new Windows.Media.Capture.MediaCapture();
    oMediaCapture.initializeAsync().then(function (result) {
        createProfile();
    }, errorHandler);
    // Enable horizontal mirroring.
    //
    turnMirroringOn();

    // Start Previewing
    var startPreviewOperation = oMediaCapture.startPreviewAsync();
    startPreviewOperation.Completed = OnStartPreviewComplete;
    startPreviewOperation.Start();
}

Related topics

Media Capture Sample

MediaCapture