Page refresh after CameraPreview.stopCamera() doesn't work properly

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

1 post - 1 participant

Read full topic