How to rotate captured 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]
You can rotate video captured from a camera by using the SetPreviewRotation and SetRecordRotation methods on the MediaCapture class.
The full code for this example is listed at the end of this how-to.
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: Create the MediaCapture object
The MediaCapture class contains methods and properties for managing captured video. To capture and rotate video from a camera, you will need to use InitializeAsync, StartPreviewAsync, and SetPreviewRotation. Use SetRecordRotation to set the rotation for video that is being recorded.
This example instantiates a new MediaCapture object and calls InitializeAsync to initialize the MediaCapture object to the default settings. You can pass a MediaCaptureInitializationSettings object into InitializeAsync to specify settings.
oMediaCapture = new Windows.Media.Capture.MediaCapture();
oMediaCapture.initializeAsync().then(function (result) {
Step 2: Set the video rotation for recording
Set the rotation of your video image for recording by passing a Windows.Media.Capture.VideoRotation enumeration value to the SetRecordRotation method of the MediaCapture object. The VideoRotation enumeration specifies the amount by which to rotate the video. It contains values for 0, 90, 180, and 270 degrees.
oMediaCapture.setRecordRotation(Windows.Media.Capture.VideoRotation.clockwise90Degrees);
To get the rotation value that will be used for recording, call the GetRecordRotation method. This method returns a VideoRotation enumeration value.
var videoRotation = oMediaCapture.getRecordRotation();
Similarly, the rotation that is used for previewing a video is set by calling the GetPreviewRotation and SetPreviewRotation methods. These methods also use the VideoRotation enumeration values to specify the amount by which to rotate the video.
Step 3: Record the video
After setting the new video rotation value, you can record the rotated video by following the steps outlined in the How to Record to Files topic. Typically, you would set the video rotation before you initialize the MediaCapture object.
var oMediaCapture;
function setRotation() {
oMediaCapture = new Windows.Media.Capture.MediaCapture();
oMediaCapture.initializeAsync().then(function (result) {
// Set the video rotation value.
oMediaCapture.setRecordRotation(Windows.Media.Capture.VideoRotation.clockwise90Degrees);
}, errorHandler);
//Check rotation value;
var videoRotation = oMediaCapture.getRecordRotation();
// Ready to start the capture session
}