Hi guys,
I implemented an App which predicts the input of the CameraPreview with Tensorflow.js and when an object is found it should disable the camera and show a text. Here is the sourcecode Im using right now
home.page.html
...
<div *ngIf="stateOfApp == State.START">
<ion-button (click)="startCamera()">Start Scan</ion-button>
</div>
<div *ngIf="stateOfApp == State.SCAN">
<!-- nothing is shown here, just the camera preview screen -->
</div>
<div *ngIf="stateOfApp == State.RESULT">
<p>Found image</p>
</div>
...
home.page.ts
async startCamera() {
this.stateOfApp = State.SCAN;
await this.cameraPreview.startCamera(this.cameraPreviewOpts);
requestAnimationFrame(() => {
this.predictionLoop();
});
}
async predictionLoop() {
console.log('predictionLoop');
const imageAsBase64 = await this.cameraPreview.takeSnapshot({ quality: 60 });
this.aiService.predictImage(imageAsBase64).then(result => { // predictImage(string) returns Promise<boolean>
if (result) {
// if the image is found result == true, works fine until here
this.takePicture();
} else {
requestAnimationFrame(() => {
this.predictionLoop();
});
}
});
}
takePicture(): void {
this.cameraPreview.takePicture(this.pictureOpts).then(
(imageData) => {
this.cameraPreview.stopCamera();
this.stateOfApp = State.RESULT; // state is set correctly, but the page doesn't show the text
this.sendImageToServer(imageData); // works also nice
},
(err) => {
this.showError(err);
}
);
}
Do you have any idea how to fix the problem that the
tag for the state RESULT is not shown/refreshed properly?
Thanks in advance!
Max