Rotate a CamerePreviewImageSource

Question

I'm trying to rotate a CameraPreviewImageSource to make it appear (only) in portrait mode:

    private async Task InitializeAsync()
    {
        this.cameraPreviewImageSource = new CameraPreviewImageSource();

        DeviceInformationCollection devices = await Windows.Devices.Enumeration.DeviceInformation.FindAllAsync(Windows.Devices.Enumeration.DeviceClass.VideoCapture);
        String backCameraId = devices.FirstOrDefault(x => x.EnclosureLocation != null && x.EnclosureLocation.Panel == Windows.Devices.Enumeration.Panel.Back).Id;
        await cameraPreviewImageSource.InitializeAsync(backCameraId);

        VideoEncodingProperties properties = await this.cameraPreviewImageSource.StartPreviewAsync();

        double width = 1280;
        double height = 720;

        this.writeableBitmap = new WriteableBitmap( (int)width, (int)height );
        this.capturePreview.Source = this.writeableBitmap;

        this.writeableBitmapRenderer = new WriteableBitmapRenderer();
        this.jpegRenderer = new JpegRenderer();

        this.cameraPreviewImageSource.PreviewFrameAvailable += OnPreviewFrameAvailable;
    }

I also tried in the XAML file, but most of the time the result is weird (like 90% of the picture is hidden):

<Image x:Name="capturePreview" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" Width="auto"  Height="auto" Canvas.ZIndex="0" >
    <Image.RenderTransform>
        <CompositeTransform CenterX="0.5" CenterY="0.5" Rotation="90" />
    </Image.RenderTransform>
</Image>

Any ideas?

What do you mean make it appear only in portrait mode? Do you mean make it so that no matter which way they turn it, it always appears as if it is in portrait mode? Or do you mean not visible unless in portrait mode? — Nate Diamond, Nov 04 '14 at 17:46
"no matter which way they turn it, it always appears as if it is in portrait mode" — Sebastien Receveur, Nov 04 '14 at 18:08

score 2 · Accepted Answer · edited Dec 04 '14 at 02:01

Try this switch, Width and Height, and add a RotationFilter with rotation set to 90. Also set the Device Orientation to Portrait. If you want to have support for another orientation in the rest of the application, just set Orientation in OnNavigatedTo/OnNavigatedFrom.

private async Task InitializeAsync()
{
    this.cameraPreviewImageSource = new CameraPreviewImageSource();

    DeviceInformationCollection devices = await Windows.Devices.Enumeration.DeviceInformation.FindAllAsync(Windows.Devices.Enumeration.DeviceClass.VideoCapture);
    String backCameraId = devices.FirstOrDefault(x => x.EnclosureLocation != null && x.EnclosureLocation.Panel == Windows.Devices.Enumeration.Panel.Back).Id;
    await cameraPreviewImageSource.InitializeAsync(backCameraId);

    VideoEncodingProperties properties = await this.cameraPreviewImageSource.StartPreviewAsync();

    double width = 1280;
    double height = 720;

    this.writeableBitmap = new WriteableBitmap( (int)height, (int)width );
    this.capturePreview.Source = this.writeableBitmap;
    var effect = new FilterEffect(m_cameraPreviewImageSource);
    effect.Filters = new IFilter[] { new RotationFilter(90) };

    this.writeableBitmapRenderer = new WriteableBitmapRenderer(effect);
    this.jpegRenderer = new JpegRenderer();

    this.cameraPreviewImageSource.PreviewFrameAvailable += OnPreviewFrameAvailable;
}


protected override void OnNavigatedTo(NavigationEventArgs e)
{
    m_displayOrientations = DisplayInformation.AutoRotationPreferences;
    DisplayInformation.AutoRotationPreferences = DisplayOrientations.Portrait;
    NavigationHelper.OnNavigatedTo(e);
}

protected override void OnNavigatedFrom(NavigationEventArgs e)
{
    DisplayInformation.AutoRotationPreferences = m_displayOrientations;
    NavigationHelper.OnNavigatedFrom(e);
}

Sorry for late reply, I did something very similar yesterday and it worked, thanks for your support. — Sebastien Receveur, Nov 12 '14 at 18:31

score 0 · Answer 2 · answered Nov 10 '14 at 07:34

0

Since you are using the Nokia Imaging SDK to achieve this, have you tried adding a RotateFilter in your rendering chain and rotate it when needed?

Your chain will then be: CameraPreviewSource -> FilterEffect [ rotateFilter] -> WriteableBitmapRenderer.

answered Nov 10 '14 at 07:34

David Božjak

16,887
18
67
98

Sorry for late reply I followed that yesterday and it worked. Thanks – Sebastien Receveur Nov 12 '14 at 18:30

Rotate a CamerePreviewImageSource

2 Answers2