ionic @capacitor/camera 사용해보기

사실 이미 npm에 너무 잘 설명이 되어있어 글로쓰기 민망하지만 ... ^^...하하핫...

https://www.npmjs.com/package/@capacitor/camera

@capacitor/camera

 

✔ 설치하기

npm install @capacitor/camera

 

✔ Bottom Sheet 작성하기

[ photo.ts ]

우선 camera를 사용하기 앞서 import 해줍니다.

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

 

카메라와 겔러리를 선택하여 열 수 있는 바텀시트를 생성해줍니다. 엑션시트는 ionic/angular에서 제공하는 ActionSheetController를 사용하였습니다. 각각의 버튼을 클릭하면 핸들러를 통해 카메라, 또는 겔러리에 접근하도록 하였습니다.

async presentActionSheet() {
    const actionSheet = await this.actionSheetCtrl.create({
      cssClass: 'action-sheet-custom',
      buttons: [
        {
          cssClass: 'btn-custom',
          icon: 'camera',
          text: '카메라',
          role: 'destructive',
          data: {
            action: 'delete',
          },
          handler: () => {
            this.takeCamera()
          },
        },
        {
          cssClass: 'btn-custom',
          icon: 'images',
          text: '겔러리',
          data: {
            action: 'share',
          },
          handler: () => {
            this.takePhoto()
          },
        },

      ],
    });
    await actionSheet.present();
  }

 

✔ 카메라, 겔러리를 열어 이미지 얻어오기

카메라 옵션은 위에 링크에 더 자세하게 설명되어있지만 아래의 옵션을 간략하게 설명드리면

source	이미지를 가져올 소스를 지정합니다. 예를 들어, CameraSource.Camera를 사용하여 카메라에서 이미지를 가져올 수 있고, CameraSource.Photos를 사용하여 사용자의 사진 앨범에서 이미지를 선택할 수 있습니다.
quality	촬영된 이미지의 품질을 지정합니다. 0부터 100까지의 값을 가질 수 있으며, 높은 값일수록 더 높은 품질의 이미지가 됩니다
allowEditing	이미지 편집을 허용할지 여부를 지정합니다. true로 설정하면 사용자가 이미지를 편집할 수 있습니다.
resultType	이미지를 가져온 후 반환되는 결과의 타입을 지정합니다. 일반적으로 사용되는 타입은 다음과 같습니다: CameraResultType.Uri: 이미지를 웹 경로로 반환합니다. 이는 이미지 파일의 URL을 제공합니다. CameraResultType.Base64: 이미지를 Base64 문자열로 반환합니다. 이는 이미지 데이터를 Base64 형식으로 인코딩한 문자열입니다. CameraResultType.DataUrl: 이미지를 Data URL로 반환합니다. 이는 이미지 데이터를 Data URL 형식으로 인코딩한 문자열입니다. saveToGallery: 이미지를 갤러리에 저장할지 여부를 지정합니다. true로 설정하면 이미지가 사용자의 사진 앨범에 저장됩니다.

  image = ""
  async takeCamera() {
    const _image = await Camera.getPhoto({
      source: CameraSource.Camera,
      quality: 100,
      allowEditing: false,
      resultType: CameraResultType.Uri
    });

    this.image = _image.webPath ?? ""
  };
  
async takePhoto() {
    const _image = await Camera.getPhoto({
      source: CameraSource.Photos,
      quality: 90,
      allowEditing: false,
      resultType: CameraResultType.Uri
     });
     
     this.image = _image.webPath ?? ""
});

 

웹경로를 이미지 변수에 저장하였기 때문에

<img [src]="image ?? '/assets/img/emo7.png'"/>

위에 코드로 이미지를 올바르게 가져오는것을 보실 수 있습니다.

 

✔  카메라, 겔러리 권한 설정하기 (android, ios)

웹사이트에서는 카메라, 겔러리에 접근 가능할지 몰라도 모바일에서 접근 가능하게 하기위해서는 관련 권한을 설정해줘야합니다

그리고 권한 설정하기전 android와 ios 플랫폼이 추가되어 있어야하며, 각각 sync 되어있어야 합니다.

관련 글을 참고해주시기 바랍니다.

https://develop-const.tistory.com/35

ionic Capacitor 사용하여 ANDROID, IOS 환경으로 실행하기

android

[ project/android/app/src/main/AndroidManifest.xml ]

 <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

 

 ios

vscode ios 파일에 lnfo 파일을 직접 수정해주셔도 되지만

[project/meal-log-project/ios/App/App/Info.plist ]

<key>NSCameraUsageDescription</key>
<string>카메라 접근 권한 허용해주세요</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>겔러리 접근 허용</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>겔러리 접근권한 허용해주세요</string>

 

xcode로 수정해주셔도 됩니다

key	value
Privacy - Camera Usage Description	카메라 접근 권한 허용해주세요
Privacy - Photo Library Additions Usage Description	겔러리 접근 권한 허용해주세요
Privacy - Photo Library Usage Description	겔러리 접근 권한 허용해주세요

 

하지만 이렇게 가져온 webPath는 서버에 저장하기에 적합하지 않기 때문에 다음에는 파일 데이터로 변환 하여 supabase storage에 저장하는 방법을 알아보겠습니다 ㅎㅎ