Camera Preview plugin orientation change issue


#1

Hi guys,

In the following the Camera Preview plugin do not displays screen correctly.
It happens on Samsung SM-J100H - Android 4.4.4 and also HTC Desire 510 - Android 4.4.3.
On Android 5+ screen is displayed correctly.

Issue: When device is rotated, ‘orientationchange’ EventListener is triggered, stopCamera, then startCamera with new dimensions:
width: window.screen.width,
height: window.screen.height,
and with new dimensions screen is crashed.
But when Camera is started first time, its displayed correctly in both cases - landscape and also portrait.

ionic info:
global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.1
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.2.3 ios 4.4.0
Ionic Framework                 : ionic-angular 3.2.0

System:

Node       : v6.10.1
OS         : Windows 10
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
npm        : 3.10.10

code of Preview.ts:

import { Component, NgZone } from “@angular/core”;
import { NavParams, ViewController, NavController, Events } from “ionic-angular”;
import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions } from ‘@ionic-native/camera-preview’;
import { GlobalService } from ‘…/…/app/GlobalService’;

@Component({
selector: ‘page-Preview’,
templateUrl: ‘Preview.html’
})

export class Preview {

public cameraPreviewOpts: CameraPreviewOptions = {
    x: 0,
    y: 0,
    width: window.screen.width,
    height: window.screen.height,
    camera: this.cameraPreview.CAMERA_DIRECTION.BACK,
    toBack: true,
    tapPhoto: false,
    previewDrag: false,
};

public pictureOpts: CameraPreviewPictureOptions = {
    width: 1280,
    height: 1280,
    quality: 85
}

private paramthis;
private handler;
public userNote: string;
public userNoteArr = [];

constructor (
    private params: NavParams,
    private navCtrl: NavController,
    private viewCtrl: ViewController,
    private zone: NgZone, 
    private cameraPreview: CameraPreview,
    private gs: GlobalService,
    public events: Events
    
){
    this.paramthis = this.params.get('paramthis');
    this.userNoteArr = this.params.get("userNote");
    this.userNote = this.userNoteArr[0];

    this.handler = () => this.refresh();
}

takePicture() {
    this.cameraPreview.takePicture(this.pictureOpts).then((imageData) => {
        let picture = 'data:image/jpeg;base64,' + imageData;
        this.takePictureHandler(picture);
    }, (err) => {
    console.log(err);
        console.log("takePicture error=",err);
    });
}

takePictureHandler(picture) {
    let fileName: string = this.gs.myGetTime() + "_" + this.gs.makeid() + ".jpg";
    this.gs.picBase64Str(this.paramthis, picture, "292", fileName, this.userNote);

    if (this.userNoteArr.length > 1) {
        this.userNoteArr.shift();
        this.userNote = this.userNoteArr[0];
        this.setHTMLLabel();
    } else {
        this.close();
    }
}

setHTMLLabel() {
    (<HTMLInputElement>document.getElementById('fotoPopisek')).innerText = this.getLabel(this.userNote);
}

startCamera() {
    this.cameraPreview.startCamera({
        x: 0,
        y: 0,
        width: window.screen.width,
        height: window.screen.height,
        camera: this.cameraPreview.CAMERA_DIRECTION.BACK,
        toBack: true,
        tapPhoto: false,
        previewDrag: false,
    }).then((res) => {
        this.setHTMLLabel();
        console.log("startCamera succes",res);
    },(err) => {
        console.log("startCamera error",err);
    });
}

ionViewDidEnter() {
    console.log("ionViewDidEnter...");
    window.addEventListener('orientationchange', this.handler );
    this.startCamera();
}


//ionViewWillLeave
ionViewDidLeave() {
    console.log("ionViewWillLeave...");
    this.userNoteArr = [];
    this.userNote = "";
    window.removeEventListener('orientationchange', this.handler );
    this.stopCamera();
    
}

refresh() {
    console.log("orientationchanged");
    this.stopCamera();
    this.startCamera();
}

close() {
    this.navCtrl.pop();
}

stopCamera(){
    this.cameraPreview.stopCamera().then((res) => {
        console.log("stopCamera succes",res);
    },(err) => {
        console.log("stopCamera error",err);
    });
}

getLabel (userNote) : string {
    let userNoteLabel: string;
    switch (userNote) {
        case "FDVPredniPrava":
            userNoteLabel = "Přední pohled, pravý bok";
            break;
        case "FDVPredniLeva":
            userNoteLabel = "Přední pohled, levý bok";
            break;
        case "FDVZadniLeva":
            userNoteLabel = "Zadní pohled, levý bok";
            break;
        case "FDVZadniPrava":
            userNoteLabel = "Zadní pohled, pravý bok";
            break;
        case "FDVPalubka":
            userNoteLabel = "Palubní deska, kilometry";
            break;
        case "FDVVin":
            userNoteLabel = "VIN";
            break;
        case "OstatniVybava":
            userNoteLabel = "Nestandardní výbava";
            break;
        case "OstatniPoskozeni":
            userNoteLabel = "Viditelná poškození";
            break;
        case "OstatniDokumenty":
            userNoteLabel = "Dokumenty (technický průkaz ...)";
            break;
    }
    return userNoteLabel;
}

}

Anyone faced this problem?
Thx for advice,
regards
Petr


#2

Exactly the same problem. Hi, did you resolve this?


#3

Did you find the solution?


#4

Not quiet a refresh solution but i check with Platform.isPortrait() and change the layout.


#5

I did the same and it works like a charm.