[morse]Capacitor 構建一個 Ionic Framework Camera 應用程序

Web框架：Ionic 4 + Angular

平台：Web，iOS，Android

通過Capacitor，可以輕鬆構建可在iOS，Android，台式機和Web上本地運行的Web應用程序。在本指南中，我們會將相機功能添加到可在Web，iOS和Android上運行的Ionic Angular應用中。準備使用一個JavaScript方法調用來捕獲照片嗎？讓我們開始吧。

所需的依存關係

構建和部署iOS和Android應用程序需要其他依賴項，包括iOS和Android設備。請按照此處的說明進行操作 在繼續之前。

準備一個離子應用程序

如果您有現有的Ionic應用程序，請跳過此部分。如果沒有，讓我們先創建一個Ionic應用程序。在終端中，安裝Ionic（這也會更新為Ionic的最新版本）：

npm install -g ionic

接下來，基於“ tabs”啟動程序項目創建一個新的Ionic應用程序，並同樣安裝Capacitor：

ionic start capApp tabs --capacitor

接下來，使用您的應用程序信息初始化電容器。

npx cap init

應用名稱： CapApp
應用包ID： com.example.capapp

添加電容器：現有的離子項目

電容器的設計可插入任何現有的現代JavaScript網絡應用程序-包括Ionic！如果您在--capacitor上面創建Ionic項目時沒有添加標誌，或者有現有的Ionic項目，則沒問題。運行以下命令：

cd capApp
ionic integrations enable capacitor

接下來，使用您的應用程序信息初始化電容器。

npx cap init

應用名稱： CapApp
應用包ID： com.example.capapp

一次構建應用

在向該項目添加任何本機平台之前，必須至少構建一次該應用程序。Web構建會創建Capacitor需要的Web資產目錄（wwwIonic項目中的文件夾）：

ionic build

接下來，添加您要為其構建的所有平台（當然，除了網絡之外）：

npx cap add ios
npx cap add android

運行這些命令後，將在項目根目錄下創建android和ios文件夾。這些是完全獨立的本機項目工件，應將其視為Ionic應用程序的一部分（即，將其檢入源代碼控制中）。

添加相機功能

接下來，我們將添加使用Capacitor Camera API使用設備的相機拍攝照片的功能。

首先，打開src/app/tab2文件夾下的Tab2 HTML頁面。添加一個圖像標籤，以顯示使用相機拍攝的當前照片，並添加一個Ionic fab按鈕，單擊該按鈕將打開相機：

<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>

接下來，我們需要添加將為相機功能提供動力的邏輯。打開src/app/tab2/tab2.page.ts並導入電容器插件和相機類：

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

接下來，實現takePicture()方法：

export class Tab2Page {
  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));
  }
}

注意這裡的魔力：這裡沒有提到iOS或Android！只有一個方法調用-- Camera.getPhoto()將打開設備的相機並允許我們拍照。

接下來，我們需要告訴Angular信任動態圖像數據。為此，請DomSanitizer通過構造函數注入並用於sanitizer.bypassSecurityTrustResourceUrl()允許將圖像數據顯示在我們的應用程序中：

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

export class Tab2Page {
  photo: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {  }
}

這是完整的Camera實施：

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

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
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));
  }
}

讓我們在瀏覽器中嘗試一下：

ionic serve

打開開發人員工具，然後選擇Console選項卡。然後，導航至選項卡2，然後單擊新創建的Camera fab按鈕。控制台中出現錯誤：

ERROR Error: Uncaught (in promise): TypeError: cameraModal.present is not a function

一些電容器插件（包括相機）通過Ionic PWA Elements庫提供基於Web的功能和UI 。這是一個獨立的依賴項，因此請使用終端安裝（取消ionic serve當前首先運行的命令）：

npm install @ionic/pwa-elements

@ionic/pwa-elements通過編輯導入src/main.ts：

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

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

現在已正確配置了該配置，重新運行ionic serve並單擊Camera fab按鈕。如果您的計算機有任何類型的網絡攝像頭，則會顯示一個模態窗口，您可以拍照！

 “我很帥。” - 作者

接下來，讓我們在iOS和Android上運行此應用。

的iOS

電容式iOS應用通過Xcode進行配置和管理，依賴性由CocoaPods管理。在iOS設備上運行此應用之前，需要完成幾個步驟。

從終端運行Capacitor copy命令，該命令將所有Web資產（在這種情況下為Ionic Angular應用程序）複製到本地iOS項目中：

npx cap copy

注意：對代碼的本機部分進行更新（例如添加新插件）後，請使用以下sync命令：

npx cap sync

接下來，運行Capacitor open命令，以Xcode打開本機iOS項目：

npx cap open ios

在Xcode中，App在左側的Project Navigator中單擊，然後在該Signing部分中，選擇您的開發團隊。

接下來，要使Camera插件正常工作，我們必須配置“隱私-攝像機使用”權限。首次Camera.getPhoto()調用後，iOS會自動顯示一個模式對話框，提示用戶允許該應用使用相機。要進行設置，Info.plist必須修改文件（這裡有更多細節）。要訪問它，請單擊“信息”，然後展開“自定義iOS目標屬性”。

中的每個設置Info.plist都有一個低級參數名稱和一個高級名稱。默認情況下，屬性列表編輯器顯示高級名稱，但是切換到顯示原始的低級名稱通常很有用。為此，請在屬性列表編輯器中的任意位置單擊鼠標右鍵，然後切換“顯示原始鍵/值”。

找到NSCameraUsageDescription鍵（或添加鍵）並將“值”設置為描述應用程序為何需要使用相機的原因，例如“拍照”。權限提示打開時，該值將顯示給應用程序用戶。

有了權限，我們準備在真實設備上嘗試該應用程序！將iOS設備連接到Mac計算機，然後在Xcode中單擊“構建”按鈕以在設備上構建，安裝並啟動該應用程序：

在選項卡二上點擊“相機”按鈕後，將顯示權限提示。點擊確定，然後用相機拍攝照片。之後，照片顯示在應用程序中：

安卓系統

電容器Android應用是通過Android Studio配置和管理的。在Android設備上運行此應用之前，需要完成幾個步驟。

從終端運行Capacitor copy命令，該命令將所有Web資產（在這種情況下為Ionic Angular應用程序）複製到本地Android項目中：

npx cap copy

注意：對代碼的本機部分進行更新（例如添加新插件）後，請使用以下sync命令：

npx cap sync

接下來，運行Capacitor open命令，這將在Android Studio中打開本機Android項目：

npx cap open android

與iOS相似，我們必須啟用正確的權限才能使用相機。在AndroidManifest.xml文件中配置這些。Android Studio可能會自動打開此文件，但如果沒有打開，請在下找到它android/app/src/main/。

滾動到該Permissions部分，並確保包括以下條目：

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

保存文件。有了權限，我們準備在真實設備上嘗試該應用程序！將Android設備連接到計算機。在Android Studio中，單擊“運行”按鈕，選擇連接的Android設備，然後單擊“確定”以在您的設備上生成，安裝並啟動該應用程序。

再次，在選項卡二上點擊“相機”按鈕時，應顯示權限提示。點擊確定，然後用相機拍攝照片。之後，照片應出現在應用程序中。

下一步是什