Performance problem when using with Angular

[Martin-Luckow]

The plugin successively transfers an image to a canvas. In an Angular app, this causes Angular Change Detection to be triggered on every "drawImage" (216 in CanvasCamera.js) and every "clearRect" (206 in CanvasCamera.js) and elsewhere ... up to 60 times a second, which could make the app really slow and a phone melts

In Angular, change detection can be bypassed by zone.runOutSideAngular (...) when drawing on a canvas. But this is not possible in the context of the plugin, since there is no zone.

Solution 1: An Angular version of the plugin that uses runOutSideAngular :)

Solution 2: Optionally provide a wrapper callback that is defined by the app and performs all drawing operations in the context of the wrapper.

Some other ideas to tackle this problem wtihout changing the plugin?

Best Regards

Martin

[Sami-Radi]

Hello,

Did your try to start the CanvasCamera plugin within its own zone like this :

import { Component, NgZone, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  name = 'Angular';
  private _canvasCameraOptions: CanvasCameraOptions
  @ViewChild("Camera",{static: false}) _cameraRef: ElementRef;

  constructor(private _ngZone: NgZone){

  }

  startCamera() {
    this._ngZone.runOutsideAngular(() => {  
      console.log('Outside Angular Zone name: ', Zone.current.name);
      Zone.current.fork({
        name: 'CanvasCamera'
      }).run(() => {
        console.log('Inside CanvasCamera Zone name: ', Zone.current.name);
        let canvasCamera = new CanvasCamera();
        canvasCamera.initialize(this._cameraRef.nativeElement, null);
        this._canvasCameraOptions = {
          width: 320,
          height: 240
        };
        canvasCamera.start(
          this._canvasCameraOptions,
          (error) => {
            console.log('CanvasCamera onError callback Zone name: ', Zone.current.name);
          },
          (data) => {
            console.log('CanvasCamera onSuccess callback Zone name: ', Zone.current.name);
          }
        );
      });
    });
  }
}

[Martin-Luckow]

Hi Sami.

I've tried that. My logs are "root", then "CanvasCamera" and (strange) "root" in the onSuccess-callback. Nevertheless Angular's change detection was triggered somewhere in the plugin.

Meanwhile I switched off Angular's change detection in the app and it works well.

Best Regards

Martin

[Sami-Radi]

Hello,

Indeed, the callback is invoked by the native part of the plugin (Java or Objective-C). Therefore, there's no zone check at this point. So the zone is again the Angular Zone...

I'll try to find a way to fix this issue without having to switch off Angular's change detection.

Best Regards,

[a0fzide]

Hello,

Can you share any example of Ionic 4 Angular 8 code?