title: Use Capacitor for Camera Plugin but get error regarding Cordova
body: <p>In my Ionic app I allow user to open the camera, take a picture of a text and use an OCR API(Tesseract) to convert it to text (which works).</p>
  
  <p>I am checking first if I use the app from desktop and if it is, I use File upload instead of Opening the camera and that works perfect.</p>
  
  <p>When I try the camera after running android on an emulator or a real device, the camera opens and I can take a picture but an error is showing (in Emulator it shows, in real device it is not but it is there in the log in Android  Studio): </p>
  
  <pre><code>    cordova.fireDocumentEvent is not a function
  TypeError: cordova.fireDocumentEvent is not a function
      at &lt;anonymous&gt;:1:9
  </code></pre>
  
  <p>I do not use cordova but capacitor so I'm not sure why I get this.</p>
  
  <p>this is the error from the log in Android Studio:</p>
  
  <pre><code>E/Capacitor/Plugin/Console: {}
  V/Capacitor: callback: -1, pluginId: Console, methodName: log, methodData: {"level":"error","message":"{}"}
  E/Capacitor/Plugin/Console: {}
  E/Capacitor: JavaScript Error: {"type":"js.error","error":{"message":"Uncaught TypeError: cordova.fireDocumentEvent is not a function","url":"http://localhost/users","line":1,"col":9,"errorObject":"{}"}}
  D/EGL_emulation: eglMakeCurrent: 0xc73b15a0: ver 3 0 (tinfo 0xcbb8b7e0)
  
  V/Capacitor: callback: -1, pluginId: Console, methodName: log, methodData: {"level":"error","message":"ERROR {\"isTrusted\":true}"}
  E/Capacitor/Plugin/Console: ERROR {"isTrusted":true}
  
  </code></pre>
  
  <p>This is the component HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;ion-button color="secondary" (click)="onPickImage()" *ngIf="!selectedImage" expand="block"&gt;
      &lt;ion-icon name="camera" slot="start"&gt;&lt;/ion-icon&gt;
      &lt;ion-label&gt;Open Camera&lt;/ion-label&gt;
    &lt;/ion-button&gt;
  &lt;/div&gt;
  &lt;input
    type="file"
    *ngIf="usePicker"
    #filepicker
    (change)="onFileChosen($event)"
  /&gt;
  &lt;ion-button
      (click)="recognizeImage()"
      expand="block"
      [disabled]="!selectedImage"
      color="tertiary"
      &gt;Recognize Text&lt;/ion-button
    &gt;
  &lt;ion-card *ngIf="imageText"&gt;
      &lt;ion-card-header&gt;Image Text&lt;/ion-card-header&gt;
      &lt;ion-card-content&gt;
        ID: {{ this.id }}, Name: {{ this.name }}
      &lt;/ion-card-content&gt;
    &lt;/ion-card&gt;
  </code></pre>
  
  <p>This is the component TS file:</p>
  
  <pre><code>import {
    Component,
    OnInit,
    Output,
    EventEmitter,
    ElementRef,
    ViewChild
  } from '@angular/core';
  import {
    Plugins,
    Capacitor,
    CameraSource,
    CameraResultType
  } from '@capacitor/core';
  import { Platform, LoadingController } from '@ionic/angular';
  import * as Tesseract from 'tesseract.js';
  import { UsersService } from '../users.service';
  
  @Component({
    selector: 'app-image-picker',
    templateUrl: './image-picker.component.html',
    styleUrls: ['./image-picker.component.scss']
  })
  export class ImagePickerComponent implements OnInit {
    @ViewChild('filepicker') filepickerRef: ElementRef&lt;HTMLInputElement&gt;;
    @Output() imagePick = new EventEmitter&lt;string | File&gt;();
    selectedImage: string;
    usePicker = false;
    imageText: string;
    id: string;
    name: string;
  
    constructor(
      private platform: Platform,
      private loadingCtrl: LoadingController,
      private usersService: UsersService
    ) {}
  
    ngOnInit() {
      console.log('Mobile:', this.platform.is('mobile'));
      console.log('Hybrid:', this.platform.is('hybrid'));
      console.log('ios:', this.platform.is('ios'));
      console.log('Android:', this.platform.is('android'));
      console.log('Desktop:', this.platform.is('desktop'));
      if (
        (this.platform.is('mobile') &amp;&amp; !this.platform.is('hybrid')) ||
        this.platform.is('desktop')
      ) {
        this.usePicker = true;
      }
    }
  
    onPickImage() {
      if (!Capacitor.isPluginAvailable('Camera') || this.usePicker) {
        this.filepickerRef.nativeElement.click();
        return;
      }
      Plugins.Camera.getPhoto({
        quality: 50,
        source: CameraSource.Camera,
        correctOrientation: true,
        width: 200,
        resultType: CameraResultType.Base64
      })
        .then(image =&gt; {
          this.selectedImage = image.base64String;
          this.imagePick.emit(image.base64String);
        })
        .catch(error =&gt; {
          console.log(error);
          return false;
        });
    }
  
    onFileChosen(event: Event) {
      const pickedFile = (event.target as HTMLInputElement).files[0];
      if (!pickedFile) {
        return;
      }
      const fr = new FileReader();
      fr.onload = () =&gt; {
        const dataUrl = fr.result.toString();
        this.selectedImage = dataUrl;
        this.imagePick.emit(pickedFile);
      };
      fr.readAsDataURL(pickedFile);
    }
  
    recognizeImage() {
      this.loadingCtrl
        .create({
          keyboardClose: true,
          message: 'Analysing Sticker...'
        })
        .then(loadingEl =&gt; {
          loadingEl.present();
          Tesseract.recognize(this.selectedImage)
            .progress(message =&gt; {
              console.log(message);
            })
            .catch(error =&gt; {
              console.error(error);
              loadingEl.dismiss();
            })
            .then(result =&gt; {
              this.imageText = result.text;
              console.log(this.imageText);
            })
            .finally(resultOrError =&gt; {
              const splitString = this.imageText.split(/\n/ig);
              console.log(splitString);
              this.id = splitString[1];
              this.name = splitString[0];
              this.usersService.formIdFromOCR = splitString[1];
              this.usersService.formNameFromOCR = splitString[0];
              loadingEl.dismiss();
            });
        });
    }
  }
  </code></pre>
  
  <p>Any help please?</p>