ios orientation issues

[gregbrandt]

We are using the camera plus control in an app and are having issues when the phone changes orientation on ios. The camera looks correct when it first loads but when we change from portrait to landscape the image capture button is really low on the screen and sometimes doesn't show on the screen. Also when the camera changes orientation the image doesn't rotate with the screen. At one point the image was inverted from the orientation of the camera. Has this been reported before? Is there a setting that is missing or someway we can reorient the image?

Below is the relevant source code from our app. Any guidance would be greatly appreciated. This control was a great help addressing some needed features.

******************* camera.component.html ************** <ActionBar class="action-bar" title="Take Photo"> <NavigationButton visibility="hidden"></NavigationButton> <ActionItem (tap)="close()"> <GridLayout rows="*" columns="auto,auto"> <Label row="0" col="0" class="fa" text="&#xf104;" horizontalAlignment="left"></Label> <Label row="0" col="1" text="Back" horizontalAlignment="left"></Label> </GridLayout> </ActionItem> </ActionBar> <StackLayout> <CameraPlus #cameraPlus opacity="1" doubleTapCameraSwitch="false" galleryPickerMode="single" showFlashIcon="true" showToggleIcon="false" showCaptureIcon="true" showGalleryIcon="false" saveToGallery="false" (loaded)="camLoaded($event)" (photoCapturedEvent)="photoCapturedEvent($event)" confirmPhotos="false" doubleTapCameraSwitch="false"> </CameraPlus> </StackLayout>

******************* camera.component.ts ` import { Component, OnInit, ElementRef, ViewChild } from "@angular/core"; import { RouterExtensions } from "nativescript-angular/router"; import { PhotoService } from "../shared/photo.service"; import { Logger } from "../../shared/default-logger.service"; import { Page, PercentLength } from "ui/page"; import { ImageAsset } from "tns-core-modules/image-asset"; import { CameraPlus } from "@nstudio/nativescript-camera-plus"; import { ImageProvider } from "../shared/image.provider"; import { LocationService } from "../shared/location.service"; import * as dialogs from "ui/dialogs"; import * as platformModule from "tns-core-modules/platform"; import * as app from "tns-core-modules/application"; import * as frame from "ui/frame";

@Component({ selector: "camera", moduleId: module.id, templateUrl: "./camera.component.html", styleUrls: ["./camera.component.css"] })

export class CameraComponent implements OnInit { source: string;

@ViewChild("cameraPlus") cameraElement: ElementRef;
constructor(private photoService: PhotoService,
    private logger: Logger,
    private page: Page,
    private imageProvider: ImageProvider,
    private locationService: LocationService,
    private routerExtensions: RouterExtensions) {
    app.on("orientationChanged", this.onOrientationChanged);
}

onOrientationChanged(evt: any): void {
    let cameraPage: Page = frame.topmost().currentPage;
    let handler: any = (child: any) => {
        if (child.camera) {
            // this.height = this.page.height as number;
            child.height = platformModule.screen.mainScreen.widthDIPs * .91;
            // this.width=this.page.width as number;
            child.width =  platformModule.screen.mainScreen.heightDIPs;
        } else if (child && child.eachChildView) {
            child.eachChildView(handler);
        }
        return true;
    };
    cameraPage.eachChildView(handler);
}

ngOnInit(): void {
    let cameraElement: CameraPlus = <CameraPlus>this.cameraElement.nativeElement;
    // this.height = this.page.height as number;
    cameraElement.height = platformModule.screen.mainScreen.heightDIPs * .91;
    // this.width=this.page.width as number;
    cameraElement.width = platformModule.screen.mainScreen.widthDIPs;
    this.imageProvider.current = null;
}

close(): void {
    this.imageProvider.current = null;
    app.off(app.orientationChangedEvent, this.onOrientationChanged);
    this.routerExtensions.backToPreviousPage();
}

photoCapturedEvent(e: any): void {
    this.logger.log("Photo captured.");
    this.imageProvider.imageLocation = null;
    this.imageProvider.current = e.data as ImageAsset;
    this.locationService.getLocation()
        .then(location => {
            this.imageProvider.imageLocation = location;
            app.off(app.orientationChangedEvent, this.onOrientationChanged);
            this.routerExtensions.backToPreviousPage();
        })
        .catch(error => {
            this.logger.error(JSON.stringify(error));
        });
}

camLoaded(e: any): void {
    this.logger.log("Photo loaded.");
    const cameraPlus: CameraPlus = e.object as CameraPlus;
    cameraPlus.confirmPhotos = false;
}

private alertPermissionsFailed(): void {
    dialogs.alert({
        title: "Camera Permissions Failed",
        message: "Unable to get permission to use the camera.",
        okButtonText: "OK",
    });
}

} `

[konradkluzniak]

I can confirm this for IOS. I've used nativescript plugin and disabled device roation. var orientation = require('nativescript-orientation'); orientation.setOrientation("landscape"); Now the issues are only with photos made (if you rotate the camera, result image will be roatated too.)

[geoffbullen]

I have this issue too

[drewmah]

I'm trying to implement this plugin too and having the same issue. Is there a fix for this?

[gregbrandt]

There was not. We reverted back to the nativescript camera.

On Tue, Sep 3, 2019 at 7:54 AM drewmah [email protected] wrote:

I'm trying to implement this plugin too and having the same issue. Is there a fix for this?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/nstudio/nativescript-camera-plus/issues/40?email_source=notifications&email_token=AETP5ZIKWGSZKYF644CSUMDQHZM7TA5CNFSM4FNG6SF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5YC26Q#issuecomment-527445370, or mute the thread https://github.com/notifications/unsubscribe-auth/AETP5ZNBDPBHLEPTP4JBDHDQHZM7TANCNFSM4FNG6SFQ .