首页 > 解决方案 > Ionic 4 PWA - 电容器和相机插件怪异的行为

问题描述

我正在尝试从 Ionic 4 PWA 应用程序中拍照。
我从 Ionic 团队阅读了这份文档并实施了所有建议的步骤......(https://capacitor.ionicframework.com/docs/guides/ionic-framework-app/
(奇怪的)结果如下图所示:

在此处输入图像描述

当显示此图片中的摄像头提示时,Chrome 控制台会打印出一个名为 MediaStreamTrack 的对象,其值如下:
kind: "video"
id: "6250dfa4-d9aa-4a87-ab9f-ae085f929c3f"
label: "screen-capture-recorder"
启用:真
静音:假
onmute:null
onunmute:null
readyState:“live”
onended:null
contentHint:“”
proto:MediaStreamTrack

当我单击按钮拍照时,我可以看到以下消息:

Unable to take photo! DOMException: setOptions failed - pwa-camera.entry.js:259

我使用了 Ionic 团队在文档中提供的示例代码:

export class Tab2Page {
    photo: SafeResourceUrl;

    constructor(
        private sanitizer: DomSanitizer
    ) { }

    async takePicture() {
        const image = await Plugins.Camera.getPhoto({
            quality: 100,
            allowEditing: false,
            resultType: CameraResultType.DataUrl,
            source: CameraSource.Camera
        });

        this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
    }

}

和...

<ion-content>
    <img [src]="photo">

    <ion-fab vertical="bottom" horizontal="center" slot="fixed">
        <ion-fab-button (click)="takePicture()">
            <ion-icon name="camera"></ion-icon>
        </ion-fab-button>
    </ion-fab>
</ion-content>

我更改了这段代码中的所有内容,试图找出问题所在,但似乎没有任何东西可以解决这种行为。
谁能指出我正确的方向?
我的 Chrome 版本是 79.0.3945.79

提前致谢。

标签: pluginscameraionic4progressive-web-appscapacitor

解决方案


推荐阅读