Capacitor Camera API throws error when running on web

Question

I am following the instructions for Capacitor Camera APi https://capacitor.ionicframework.com/docs/guides/ionic-framework-app

The plugin works fine when running the application on an android device ionic capacitor run android -l but when serving the app on web I am getting this runtime error:

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)

This is my code:

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

}

I also added these in main.ts

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

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

Is there anything i am doing wrong or this is a bug in Capacitor Camera API

Answer 1

The problem is the camera can't be used from http, it needs https. Try running with ionic serve --ssl and update the capacitor.config.json to use the https url

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