2

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

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

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 中的错误

4

2 回答 2

3

问题是相机不能从http使用，它需要https。尝试运行ionic serve --ssl并更新capacitor.config.json以使用 https url

"server": {
  "url": "http://192.your.local.ip:8100"
}
于 2019-06-11T12:19:41.290 回答
1

如果您使用带电容器的离子，那么这是给您的 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
于 2019-10-01T06:10:59.703 回答