nstudio / nativescript-camera-plus

MIT License
79 stars 50 forks source link

ios orientation issues #40

Open gregbrandt opened 6 years ago

gregbrandt commented 6 years ago

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 ** `

`

*** 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 commented 5 years ago

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 commented 5 years ago

I have this issue too

drewmah commented 4 years ago

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

gregbrandt commented 4 years ago

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

On Tue, Sep 3, 2019 at 7:54 AM drewmah notifications@github.com 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 .