📸

【PWA】PWAアプリでカメラを使う

に公開
Android
iOS
PWA
camera
tech

初めに

PWAで作成したアプリ内でカメラを使うことがあったのでその際調べたことを記事にします。

PWAでカメラは使えるの？

iOS, Android共に使えます。

https://qiita.com/1pp0/items/a3f0ea14910e25f49878
https://bugs.webkit.org/show_bug.cgi?id=252465
https://x.com/re_fort/status/1843313005091790855?lang=ca

以前は、表示モードがstandaloneの場合にiOSでカメラが表示できなかったようですが、

iOS18以降に修正されているようです。

PWAでカメラを使うための設定方法

PWAでカメラを使用するためには、ブラウザのカメラ設定を許可しなければなりません。

もしもカメラへのアクセスを拒否している場合は以下のよう設定を変更してください。

iOS編 📱

ポイント：iOSではホーム画面のPWAアプリは全部Safariの設定で管理されてる！

設定手順：

  1. デバイスの「設定」アプリを開く
  2. 下にスクロールして「Safari」を選択
  3. 「カメラ」をタップして「許可」に変更

なぜSafari？
iOS上のどのブラウザからインストールしても、全部WebKit（Appleのブラウザエンジン）使ってる為です。
これはApple社のルールでApp Storeに公開するための条件になっているようです。
だからホーム画面のPWAアプリは全部Safariの設定に従う仕様になっています。

Android編 🤖

ポイント：Androidでは使ったブラウザごとに設定が必要！

設定手順：

  • Chromeからインストールした場合：
    設定 → アプリ → Chrome → 権限 → カメラ → 許可
  • Firefoxからインストールした場合：
    設定 → アプリ → Firefox → 権限 → カメラ → 許可

なぜブラウザごと？

  • Androidは各ブラウザが自分のエンジンを使える自由がある
  • Chromeは「Blink」、Firefoxは「Gecko」など独自エンジン使用
  • だからインストールに使ったブラウザの設定を変更する必要あり💁‍♀

Discussion