Используйте Capacitor for Camera Plugin, но получите ошибку относительно Cordova - PullRequest
Новая
       12

Используйте Capacitor for Camera Plugin, но получите ошибку относительно Cordova

1 голос
/ 14 мая 2019

В моем приложении Ionic я разрешаю пользователю открывать камеру, делать снимки текста и использовать OCR API (Tesseract) для преобразования его в текст (что работает).

Сначала я проверяю, использую ли я приложение с рабочего стола, и если оно есть, я использую Загрузка файла вместо открытия камеры, и это прекрасно работает.

Когда я пробую камеру после запуска андроида на эмуляторе или реальном устройстве, открывается камера, и я могу сделать снимок, но отображается ошибка (в эмуляторе это показывает, в реальном устройстве это не так, но он есть в лог в Android Studio): 

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

Я не использую кордову, а конденсатор, поэтому я не уверен, почему я получаю это.

это ошибка из журнала в 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();
          });
      });
  }
}

Любая помощь, пожалуйста?

1 Ответ

0 голосов
/ 15 мая 2019

Это была ошибка в бета-версии 22, обновление до бета-версии 24

...