使用電容器作為相機插件，但會收到有關Cordova的錯誤

Question

在我的Ionic應用程序中，我允許用戶打開相機，拍攝文字圖片並使用OCR API（Tesseract）將其轉換為文字（有效）。

我首先檢查是否從桌面使用該應用程序，如果是，我使用文件上傳而不是打開相機，效果很好。

當我在仿真器或真實設備上運行android之后嘗試使用相機時，相機會打開，我可以拍照，但顯示錯誤（在仿真器中顯示，在真實設備中則沒有，但登錄中有Android Studio）：

    cordova.fireDocumentEvent is not a function
TypeError: cordova.fireDocumentEvent is not a function
    at <anonymous>:1:9

我不使用Cordova，而是使用電容器，所以我不確定為什么要使用它。

這是來自Android Studio中日志的錯誤：

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}

這是組件HTML：

<div>
  <ion-button color="secondary" (click)="onPickImage()" *ngIf="!selectedImage" expand="block">
    <ion-icon name="camera" slot="start"></ion-icon>
    <ion-label>Open Camera</ion-label>
  </ion-button>
</div>
<input
  type="file"
  *ngIf="usePicker"
  #filepicker
  (change)="onFileChosen($event)"
/>
<ion-button
    (click)="recognizeImage()"
    expand="block"
    [disabled]="!selectedImage"
    color="tertiary"
    >Recognize Text</ion-button
  >
<ion-card *ngIf="imageText">
    <ion-card-header>Image Text</ion-card-header>
    <ion-card-content>
      ID: {{ this.id }}, Name: {{ this.name }}
    </ion-card-content>
  </ion-card>

這是組件TS文件：

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<HTMLInputElement>;
  @Output() imagePick = new EventEmitter<string | File>();
  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') && !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 => {
        this.selectedImage = image.base64String;
        this.imagePick.emit(image.base64String);
      })
      .catch(error => {
        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 = () => {
      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 => {
        loadingEl.present();
        Tesseract.recognize(this.selectedImage)
          .progress(message => {
            console.log(message);
          })
          .catch(error => {
            console.error(error);
            loadingEl.dismiss();
          })
          .then(result => {
            this.imageText = result.text;
            console.log(this.imageText);
          })
          .finally(resultOrError => {
            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();
          });
      });
  }
}

有什么幫助嗎？

Answer 1

這是Beta 22的錯誤，更新為Beta 24