Usar la cámara a través de Capacitor

Siendo el 27/06/2021, el _CameraSource _se debe usar instalando
npm install @capacitor/camera

import { CameraResultType, CameraSource } from '@capacitor/camera'; 

Hola, podrían por favor ayudarme con una duda,
la cámara efectivamente toma la fotografía y se puede visualizar en el ion-avatar, pero al cambiar de ventana y volver, la foto que se había tomado ya no aparece, como podría solucionarlo para que quede ahí hasta que la quiera cambiar de nuevo? gracias

buenas tardes profesor tengo un problema al iniciar la camara con el capacitor se abre y automaticamente se cierra al segundo saliendo el siguiente error

ERROR Error: Uncaught (in promise): Requested device not found
at resolvePromise (zone.js:852)
at zone.js:762
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:26769)
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:910
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:26760)

link del repo al commit de la clase, a dia de hoy no cambia mucho eceptuando que se debe instalar el uso de la camara de capacitor y lo del pwa y nada más.

Para lograr un uso correcto de la camara con capacitor primero crearemos la página de settings

ionic generate page settings

posteriormente vamos a instalar varias librerias que seran necesarias para el uso de la camara

esta librería nos permitira el uso de los plugins de la cámara

npm install @capacitor/camera

esta librería cambiara el modo de vista del window adaptandose a una pwa (progressive web apps), necesario para el uso de plugins como camera o toast

npm install @ionic/pwa-elements -save

posteriormente hacemos un cambio en nuestro main.ts

main.ts

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

defineCustomElements(window);

haremos el cambio en nuestro para enviar desde app-routing.module.ts a nuestro menu-routing.module.ts la page de settings, como un hijo más de menu

menu-routing.module.ts

const routes: Routes = [

  {
    path: '',
    component: MenuPage,
    children: [
      {
        path: 'settings',
        loadChildren: () => import('../settings/settings.module').then( m => m.SettingsPageModule)
      }
    ]
  }
];

posteriormente hacemos el cambio en nuestro menupage para redireccionar con interfaz a settingspage

menu.page.ts

goToSettings() {
    this.navCtrl.navigateRoot('menu/settings');
  }

menu.page.html

<ion-list>
        <ion-item>Home</ion-item>
        <ion-item>Sports</ion-item>
        <ion-item (click)="goToSettings()">Settings</ion-item>
        <ion-item (click)="logout()">
          <ion-icon name="log-out" color="primary" slot="start"></ion-icon>
          Salir 
        </ion-item>
</ion-list>

ahora configuraremos nuestro settingspage para tomar una foto y posicionarla como imagen de usuario o cargar una imagen predefinida desde assets

settings.page.ts

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

@Component({
  selector: 'app-settings',
  templateUrl: './settings.page.html',
  styleUrls: ['./settings.page.scss'],
})

export class SettingsPage implements OnInit {
  userImage = 'assets/img/foto1.jpg';
  photo: SafeResourceUrl;
  
  constructor(
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit() {
  }

  async takePhoto() {
    const image = await Camera.getPhoto({
      quality: 100,
      allowEditing: false,
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Camera
    });
    this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(
      image && image.dataUrl
    );
  }
}

settings.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>settings</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-avatar (click)="takePhoto()">
    <img [src]="userImage" alt="" *ngIf="!photo">
    <img [src]="photo" alt="" *ngIf="photo">
  </ion-avatar>
</ion-content>

Me ha parecido sencillo el usar la cámara, lastima que no se explica como almacenar la foto en el dispositivo.

Uy muy teso esto

Que bonito es lo bonito!!!

Muy buena clase, bastante complicada de entender, pero una vez lo entiendes muy bonito! Faltaria nada mas guardar los cambios en un servicio de almacenamiento!

Hola. Tengo un problema, instalé pwa-elements siguiendo el video pero me salieron 6 vulnerabilidades. Después, utilice npm audit fix (lo que sugería la misma linea de comandos para arreglarlo) pero no se solucionó.
Seguí con el video hasta el minuto 12:10 pero me salió otro error y no sé cómo solucionarlo, podrían ayudarme? gracias.