How to disable auto rotate for a video preview in a Windows Phone 8.1 App using javascript/html5

1
votes

I followed the tutorial below to create a Windows Phone 8.1 app for previewing the camera capture: http://msdn.microsoft.com/en-us/library/windows/apps/Hh452789(v=win.10).aspx

However, there is an undesired behavior of this basic app. When the device is placed horizontally, with the top pointing to the left, the orientation of the preview is the same as the scene, which is fine. However, when the device rotates to the portrait position (top up), the preview auto rotates to a confusing orientation. Below is a picture demonstrating this behavior.

enter image description here

I guess what I want is the same behavior as the built-in Camera app of a Windows Phone, that the preview orientation always follows the camera (image panel) orientation. In other words, no matter how the device is rotated, the house roof tip should always point upward. Is that possible using the developer API? If so, what function or attributes should I use?

One potential solution I can think of is to disable auto rotate for the element that is used to hold the preview. However, I don't know how to do that. In addition, can one disable the auto rotate for only some elements in an app page instead of the entire page? I ask because I want to display some text over the video preview and I want the text to auto rotate for legibility.

1
javascripthtmlcamerawindows-phone-8.1

1 Answers

1
votes
MediaCapture _mediaCapture = new MediaCapture();

_mediaCapture.SetPreviewRotation(VideoRotation.Clockwise90Degrees);

await _mediaCapture.InitializeAsync();

await _mediaCapture.StartPreviewAsync();

Check the phone orientation on orientation changed and set the MediaCapture .SetPreviewRotation(VideoRotation.Clockwise90Degrees) as you want.