Camera in Browser Fails With setOptions failed Error

[matthew-valenti]

In an Ionic 4 + Capacitor project the camera is working okay on a mobile device but gives the following error when running on a desktop browser: "Unable to take photo! DOMException: setOptions failed".

https://www.screencast.com/t/UqhdZcAzJ0

To reproduce:

1. Create an Ionic 4 blank sample project.
2. Add capacitor.
3. Add ionicpwaelements.js to index.html head tag. <script src="https://unpkg.com/@ionic/pwa-elements@0.0.14/dist/ionicpwaelements.js"></script>
4. Add camera example code from docs: https://capacitor.ionicframework.com/docs/apis/camera

src/app/home/home.page.ts

import { Component} from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
    image: SafeResourceUrl;

    constructor(private sanitizer: DomSanitizer) {
    }

    async takePicture() {
        const { Camera } = Plugins;

        const image = await Camera.getPhoto({
            quality: 90,
            allowEditing: true,
            resultType: CameraResultType.Base64,
            source: CameraSource.Camera
        });

        // Example of using the Base64 return type. It's recommended to use CameraResultType.Uri
        // instead for performance reasons when showing large, or a large amount of images.
        this.image = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.base64Data));
    }
}

src/app/home/home.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>If you get lost, the
    <a target="_blank" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>

  <img [src]="image" />
  <ion-button (click)="takePicture()" ion-button color="primary">Take Picture</ion-button>

</ion-content>

$ ionic info
√ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)          : 4.0.6 (C:\Users\matth\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.1.3
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.4

System:

   NodeJS : v8.9.4 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

[jcesarmobile]

what desktop browser?

[matthew-valenti]

Confirmed same issue on latest Ionic Blank project + latest Capacitor.

Windows 10 Chrome:
Version 68.0.3440.106 (Official Build) (64-bit)
Click "take picture button". Photo widget shows. Prompt to allow localhost to use webcam shows -- click allow. Click picture button results in console error:
"Unable to take photo! DOMException: setOptions failed"
https://www.screencast.com/t/wGd1JdRb

Microsoft Edge:
Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134
Click "take picture button". Photo widget shows. Prompt to allow localhost to use webcam shows -- click yes. Click picture button results in console error:
"TypeError: Function expected"
https://www.screencast.com/t/tOVPeqgua

Windows 10 Firefox:
61.0.2 (64-bit)
Camera test successful!

[gbbarroso]

Can confirm it in Chrome 69.0.3497.92

• Created a project with npx @capacitor/cli create
• Then in chrome's console: Capacitor.Plugins.Camera.getPhoto()
• When I click the button to take photo it throws: Unable to take photo! DOMException: setOptions failed

[dacrypt]

I'm also experiencing this with Ionic 4 stable + capacitor

[jcesarmobile]

Closing as I can't reproduce with latest version of Capacitor and of @ionic/pwa-elements

[skyhip0811]

I am still facing it with Chrome version 80.0.3987.149
with ionic/pwa-elements version 1.5.1
capacito/core version 1.5.2

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.