[Ionic6/React] 버튼 클릭하여 스크린샷 저장하기

xeptember·2022년 11월 8일
0
post-thumbnail

요즘 작업하고 있는 프로젝트가 ionic6로 만들어진 하이브리드 앱인데, 검색하다보면 Ionic2, 3 버전은 레퍼런스가 많은데... 6버전은 사람들이 많이 안쓰는지 레퍼런스 찾기가 너무 힘들었다

아무튼, 이번에는 로그인한 상태에서 2차 인증(OTP) 을 설정하는 기능을 개발중에 있는데 보통 OTP 코드는 기기를 분실했거나, OTP 코드를 확인할 수 없는 경우를 대비해 복구 코드(Recovery Code)를 제공한다

플로우

대략적으로 정리하자면 아래와 같다

여기서 '복구 코드 보여줌' 부분에 추가될 기능이다
복구 코드는 사용자가 OTP 코드를 불가피한 사유로 확인할수 없는 경우 OTP 코드의 대체 코드를 미리 제공해주는데, 이 시점에 보여주는 복구 코드를 개인이 보관해야 하기 때문에 .txt 파일로 다운로드 및 스크린샷 저장하는 기능을 추가했다

개발 기능

스크린샷 저장

  • 현재 화면 캡쳐 떠서 그 파일을 디바이스 내 앨범으로 저장
  • 토스트 팝업으로 저장 완료 메세지 노출

설치한 패키지

yarn add @ionic/native
yarn add @ionic-native/screenshot
yarn add com.darktalker.cordova.screenshot
yarn add @capacitor-community/media

@ionic/native 는 Ionic 코어 패키지를 추가했고
comm.darktalker.cordova.screenshotIonic Native API 문서를 참고해서 설치했다
근데 이 또한 옛날 문서인것 같긴 한게, 최신 버전 Ionic Native API에는 스크린샷에 대한 문서가 없다;;)

스크린샷을 찍고 그 이미지를 앨범에 저장하기 위해서는 2가지 패키지가 필요하며, 이 2가지 모두 사용 방법은 간단하다.

스크린샷 캡쳐

com.darktalker.cordova.screenshot

스크린샷 저장

cordova-plugin-file

*Ionic에서는 ui component로 토스트 팝업을 제공하기 때문에 이것을 활용했다

소스코드

  const [present] = useIonToast();
  const saveRecoveryScreenshot = useCallback(async () => {
    await Screenshot.save().then((res) => {
      if (isPlatform(`ios`)) {
        present({
          message: `Saved to camera roll.`,
          duration: 4000,
        });
      } else {
        present({
          message: `A screenshot of the backup code has been saved in the gallery.`,
          duration: 4000,
        });
      }
      Media.savePhoto({
        path: `file://${res.filePath}`, // 'file://' 꼭 붙여야 함
      });
    });
  }, [present]);

isPlatform으로 ios/android 판별하여 스크린샷 저장 시 각 os별로 다른 메세지를 노출시켰다.

또한 스크린샷을 찍을때 파라미터로 이미지 파일 포맷, 품질, 저장할 파일 명을 지정할 수 있다.

Screenshot.save(format, quality, filename).then(onSuccess, onError)
  • format: string (default: jpg)
    • jpg, png로 지정 가능하지만 ios는 jpg만 지원
  • quality: number (default: 100)
    • 0~100까지의 숫자로 입력 가능
  • filename: string (default: 임의의 16진수 등의 네이밍)
    • 저장소에 저장할 파일명

@capacitor-community/media

  • 추가 미디어 기능을 활성화 하기 위한 capacitor 커뮤니티 플러그인
  • savePhoto, saveVideo, saveGif, createAlbum, getAlbums, getMedias 등의 API를 제공한다

Usage

import { Media } from '@capacitor-community/media';

//
// Save video to a specific album
Media.saveVideo({ path: '/path/to/the/file', album: 'My Album' })
  .then(console.log) // on android it returns {filePath: 'uri to media'}
  .catch(console.log);

//
// Get a list of user albums
Media.getAlbums()
  .then(console.log) // -> { albums: [{name:'My Album', identifier:'A1-B2-C3-D4'}, {name:'My Another Album', identifier:'E5-F6-G7-H8'}]}
  .catch(console.log);

출처 : capacitor-community/media

iOS scheme

iOS는 Info.plist에 해당 스키마를 필수로 추가해야 스크린샷 저장 등 네이티브 기능에 접근할 수 있다

<key>NSPhotoLibraryUsageDescription</key>
<string>Keep sensitive information as images</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Keep sensitive information as images</string>

참고 URL

https://ionicframework.com/docs/v3/native/screenshot/
https://github.com/gitawego/cordova-screenshot
https://ionicframework.com/docs/native/file
https://github.com/capacitor-community/media

정리하고 보니 소스코드가 복잡하거나 길지도 않았지만, 아무래도 앱 네이티브 기능에 대해 잘 모르다보니 검색하고 적용하고 빌드하는데에 오랜 시간이 걸렸다. ㅠ 그래도 이번 기회를 통해 새로운 기능도 개발해보고 재밌음!

profile
Front-end engineer

0개의 댓글