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
