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公式サイト)

写経経過

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

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

home.page.html

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

home.page.ts

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

}

npm run build

npm run build
npx capacitor sync
npx cap open android

参考：ionic3-camera(2018/10月時点)

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

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

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

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

npm run build
npx cap copy

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

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

アプリのPWA化

ng add @angular/pwa --project app
ionic build --prod

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 > カメラロールなどから画像を選択して、アップロードする

写経元サイト