Question

我正在遵循电容器相机APi https://capacitor.ionicframework.com/docs/guides/ionic-framework-app的说明

在Android设备ionic capacitor run android -l上运行应用程序时，该插件工作正常，但在网络上投放该应用程序时，出现此运行时错误：

core.js:15724 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'split' of undefined
TypeError: Cannot read property 'split' of undefined
    at camera.js:62
    at new ZoneAwarePromise (zone.js:910)
    at CameraPluginWeb.push../node_modules/@capacitor/core/dist/esm/web/camera.js.CameraPluginWeb._getCameraPhoto (camera.js:60)
    at CameraPluginWeb.<anonymous> (camera.js:40)
    at step (tslib.es6.js:99)
    at Object.next (tslib.es6.js:80)
    at tslib.es6.js:73
    at new ZoneAwarePromise (zone.js:910)
    at Module.__awaiter (tslib.es6.js:69)
    at HTMLElement.<anonymous> (camera.js:29)
    at resolvePromise (zone.js:831)
    at zone.js:741
    at rejected (tslib.es6.js:71)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17299)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)

这是我的代码：

import {Injectable} from '@angular/core';
import {from, Observable} from 'rxjs';
import {CameraOptions, CameraResultType, CameraSource, Plugins} from '@capacitor/core';

const { Camera } = Plugins;

@Injectable()
export class MediaService {
    takePhoto(): Observable<string | void> {

        const options: CameraOptions = {
            quality: 100,
            allowEditing: false,
            source: CameraSource.Camera,
            resultType: CameraResultType.Base64
        };
        return from(Camera.getPhoto(options).then(photo => {
            return 'data:image/png;base64,' + photo.base64String;
        }).catch(err => {
            console.error('Error: ', err);
        }));
    }

}

我还在main.ts

中添加了这些

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

我做错了什么吗，或者这是Capacitor Camera API中的错误

Answer 1

问题是无法通过http使用相机，它需要使用https。尝试使用ionic serve --ssl运行并更新capacitor.config.json以使用https网址

"server": {
  "url": "http://192.your.local.ip:8100"
}

Answer 2

如果您正在使用带有电容器的离子，那么这是给您的 1）安装pwa元素

"@ionic/pwa-elements": "^1.4.1",

2）在您的main.ts文件中添加此行

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';


platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

 // Call the element loader after the platform has been bootstrapped
 defineCustomElements(window);  // add this line

在网络上运行时，Capacitor Camera API会引发错误

2 个答案: