====== 181009_Ionic4+Capacitor+Cameraの写経にtryしてみる ======

前回；[[181009_ionic4_firestore_capacitor_camera2]]

もうどうにもならないCapacitor\\
以下のサイトを写経して、動くのだろうか。。。

http://tphangout.com/ionic-4-camera-with-capacitor/\\
Ionic 4 – Camera with Capacitor
JULY 30, 2018


===== 参考サイト =====
https://capacitor.ionicframework.com/docs/getting-started/with-ionic/\\
Using Capacitor with Ionic(Capacitor公式サイト)

===== 写経経過 =====

<code>
ionic start camera blank --type=angular
// No, No
// 一度、VisualStudioCodeを閉じてから、
// camera/ フォルダをVisualStudioCodeで開く
npm uninstall --save cordova-plugin-splashscreen
npm install --save @capacitor/cli @capacitor/core
npx cap init camerapp com.example.app
npm run build
npx cap add android
</code>

home.page.htmlと、home.page.tsの変更

==== home.page.html ====

<code>
<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content padding>
  <img [src]="yourImage">
  <ion-button (click)="captureImage()">Capture !!</ion-button>
</ion-content>
</code>

==== home.page.ts ====
<code>
import { Component } from '@angular/core';

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  yourImage: any;

  constructor() {

  }

  async captureImage() {
    const capturedImage = await Plugins.Camera.getPhoto(
      {
        quality: 90,
        allowEditing: true,
        source: CameraSource.Camera,
        resultType: CameraResultType.Uri
      }
    );

    this.yourImage = capturedImage.webPath;
  }

}
</code>

===== npm run build =====
<code>
npm run build
npx capacitor sync
npx cap open android
</code>
参考：[[:ionic3でcameraプラグイン|ionic3-camera(2018/10月時点)]]

{{:z_blog:2018:pasted:20181009-234145.png}}

アプリメニュー：Build → Build APK

app/build/outputs/apk/ に、apkファイルが出てくるので、それを自分のAndroidスマホにGDrive経由でインストール。

=> Androidスマホにapkファイルをインストールして、カメラが起動するところまでは行けた。しかし、カメラでとった写真が表示されない。。。

コードを更新したときは、

<code>
npm run build
npx cap copy
</code>

この、androidstudioでapkファイルを作成する方法がよく紹介されているが、それなら、Ionic-Native（Cordova）で十分な気がする。

Capacitorを利用するメリットは、PWAでCameraなどが使えるからだと思う。

===== アプリのPWA化 =====

<code>
ng add @angular/pwa --project app
ionic build --prod
</code>
GitHub経由でnetlifyでデプロイしてみたが、CAPTURE!!ボタンをクリックしても、カメラは起動しなかった。

ソースコード
https://github.com/adash333/camera

===== 参考 =====

なんとプラグイン無しでpwaとしてカメラが動くionic3ソースコードが紹介されていた

https://github.com/peterpeterparker/ionic-pwa-camera-no-plugins



https://qiita.com/hedrall/items/94ef17b2e096c9d352bd\\
@hedrall
2018年08月07日に更新
Ionic > カメラロールなどから画像を選択して、アップロードする
===== 写経元サイト =====

http://tphangout.com/ionic-4-camera-with-capacitor/\\
Ionic 4 – Camera with Capacitor
JULY 30, 2018