当网络运行时，电容相机 API 抛出错误

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);

有没有我做错了什么或者这是电容相机中的错误API

Answer 1

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

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

Answer 2

如果您正在使用 Ionic With Capacitor 那么这适合您 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

当网络运行时，电容相机 API 抛出错误

Capacitor Camera API throws error when running on web

ionic4

capacitor

camera-api

当网络 运行 时，电容相机 API 抛出错误

Capacitor Camera API throws error when running on web

ionic4

capacitor

camera-api

当网络运行时，电容相机 API 抛出错误