如何在 CaptureElement 中旋转相机视图？

Question

I have a following problem. I wrote StackPanel with CaptureElement :

 <StackPanel>
        <CaptureElement x:Name="PreviewElement"
                        HorizontalAlignment="Center" 
                        VerticalAlignment="Center"
                        Width="380"
                        Height="560"
                        Stretch="UniformToFill"/>
 </StackPanel>

In xaml.cs file under that view:

protected override async void OnNavigatedTo(NavigationEventArgs e)
{
     cameraCapture = new CameraCapture();
     PreviewElement.Source = await cameraCapture.Initialize();
     await cameraCapture.StartPreview();            
} 

And I have a class CameraCapture.cs in which I have all methods:

public class CameraCapture 
    {
        MediaCapture mediaCapture;
        ImageEncodingProperties imgEncodingProperties;

        public async Task<MediaCapture> Initialize(CaptureUse primaryUse = CaptureUse.Photo)
        {
            //Create media capture and INIT
            var cameraID = await GetCameraID(Windows.Devices.Enumeration.Panel.Back);
            mediaCapture = new MediaCapture();
            await mediaCapture.InitializeAsync(new MediaCaptureInitializationSettings
            {
                StreamingCaptureMode = StreamingCaptureMode.Video,
                PhotoCaptureSource = PhotoCaptureSource.Photo,
                AudioDeviceId = string.Empty,
                VideoDeviceId = cameraID.Id
            });
            mediaCapture.VideoDeviceController.PrimaryUse = primaryUse;

            //Create photo encoding properties as JPEG and set the size that should be use for photo capturing
            imgEncodingProperties = ImageEncodingProperties.CreateJpeg();
            imgEncodingProperties.Width = 640;
            imgEncodingProperties.Height = 480;

            return mediaCapture;
        }
        public async Task StartPreview()
        {
            //Start preview stream
            await mediaCapture.StartPreviewAsync();
        }       
        private static async Task<DeviceInformation> GetCameraID(Windows.Devices.Enumeration.Panel desired)
        {
            DeviceInformation deviceID = (await DeviceInformation.FindAllAsync(DeviceClass.VideoCapture))
                .FirstOrDefault(x => x.EnclosureLocation != null && x.EnclosureLocation.Panel == desired);

            if (deviceID != null) return deviceID;
            else throw new Exception(string.Format("Camera of type {0} doesn't exist.", desired));
        }
    }

When I run application in portrait rotation I have camera view rotated by 90 degrees counterclockwise. After I turn to Landscape view I have smaller window in which is camera view but rotation is good.

Any ideas how to solve this problem?

Answer 1

To rotate your preview you can use MediaCapture.SetPreviewRotation . Additianally if you want to rotate the preview once the phone's orintation changes, then you can subscribe to SimpleOrientationSensor.OrientationChanged event. It may look for example like this:

 captureManager.SetPreviewRotation(VideoRotation.Clockwise90Degrees);
 capturePreview.Source = captureManager;
 await captureManager.StartPreviewAsync();
 SimpleOrientationSensor sensor = SimpleOrientationSensor.GetDefault();
 sensor.OrientationChanged += (s, arg) =>
 {
     switch (arg.Orientation)
     {
         case SimpleOrientation.Rotated90DegreesCounterclockwise:
             captureManager.SetPreviewRotation(VideoRotation.None);
             break;
         case SimpleOrientation.Rotated180DegreesCounterclockwise:
         case SimpleOrientation.Rotated270DegreesCounterclockwise:
             captureManager.SetPreviewRotation(VideoRotation.Clockwise180Degrees);
             break;
         default:
             captureManager.SetPreviewRotation(VideoRotation.Clockwise90Degrees);
             break;
     }
 };

Please also remember to unsubscribe from sensor once you finish preview/dispose MediaCapture .

Answer 2

I've found the best way to do this is to actually rotate the control or, for full-on camera applications where the camera preview is the main control, the entire page on the OnNavigatedTo event for the page with the CaptureElement:

DisplayInformation.AutoRotationPreferences = DisplayOrientations.Landscape;

This will look odd if the user keeps their device in portrait orientation, because your other controls may have the wrong orientation. If you want to handle that, you can do as Romasz suggests, subscribe to the OrientationChanged event, and in there apply a RotateTransform to each the buttons in your UI (except for the AppBar, which should right itself automatically) to counteract the device rotation and keep them right-side-up.