Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Camera in Browser Fails With setOptions failed Error #726

Closed
matthew-valenti opened this issue Aug 13, 2018 · 5 comments

Comments

Projects
None yet
4 participants
@matthew-valenti
Copy link

commented Aug 13, 2018

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

This comment has been minimized.

Copy link
Member

commented Aug 17, 2018

what desktop browser?

@matthew-valenti

This comment has been minimized.

Copy link
Author

commented Aug 17, 2018

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

This comment has been minimized.

Copy link

commented Sep 16, 2018

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

This comment has been minimized.

Copy link

commented Feb 10, 2019

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

@jcesarmobile

This comment has been minimized.

Copy link
Member

commented May 1, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.