#現場管理#DX#スマホアプリCapacitorCamera APIデバッグ
現場写真がスマホで撮れない！WEB版は動くのになぜ？
問題発生
モバイルアプリの「現場記録」機能で、カメラ撮影した写真が表示されない。
WEBブラウザでは動くのに、アプリだと真っ白。
原因調査
-
Chrome DevToolsで確認
- chrome://inspect でAndroid WebViewをデバッグ
- コンソールエラー: Failed to load resource: net::ERR_INVALID_URL
-
base64データを確認
- image.base64String が undefined になっている
- Capacitor 6.x で仕様が変わっていた
解決策
Capacitor 6.x では webPath を使う方が推奨されていた。
```typescript
const image = await Camera.getPhoto({
quality: 90,
allowEditing: false,
resultType: CameraResultType.Uri // Base64 → Uri に変更
})
// webPath を直接使う
setPhoto(image.webPath!)
```
これで解決！
学び
-
公式ドキュメントは最新版を見る
- Capacitor 5.x の記事を参考にしていた
- バージョンアップで仕様が変わる
-
WebとNativeの違い
- ブラウザ: FileReader でbase64変換
- Native: プラグインが自動でパス変換
-
デバッグ方法
- Chrome DevToolsの chrome://inspect が最強
- adb logcat でネイティブログも見る