【Flutter2.0】カメラのプレビューが真っ黒で動かなくなった時の対処

こんにちは！
個人開発でアプリ開発をしているYuKiOです。

こんなアプリを開発しています。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">HackerMemoを大幅にアップデートしたので、<br><br>海外向けのPVを作ってみました😆<br><br>夜なべして頑張って作ったので、拡散頂けたら泣いて喜びます😭🙏<br><br>音有りがオススメです！<br><br>元ネタわかる人いるかな〜🤔<br><br>アプリはこちら🔽<br>■iPhoneの方<a href="https://t.co/6T10L94Ld1">https://t.co/6T10L94Ld1</a><br><br>■Androidの方<a href="https://t.co/uBevCXrNw2">https://t.co/uBevCXrNw2</a> <a href="https://t.co/wiGLv46kaG">pic.twitter.com/wiGLv46kaG</a></p>&mdash; YuKiO｜個人開発｜Flutter x Firebase | Rails (@oo_forward) <a href="https://twitter.com/oo_forward/status/1348103082769453056?ref_src=twsrc%5Etfw">January 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">「絵本の読み聞かせ記録 ユリウス」に<br><br>ママさん・パパさんからアプリへの要望で多かった<br><br>記録の「共有機能」を追加しました📕<br><br>絵本版の「みてね」の感じで、じぃじ・ばぁばともシェア可能です。<br><br>是非使ってみてください！<br><br>■iPhone<a href="https://t.co/Jdp9dDTp9H">https://t.co/Jdp9dDTp9H</a><br>■Android<a href="https://t.co/QHF2QfGFbX">https://t.co/QHF2QfGFbX</a> <a href="https://t.co/msCxUuBKbO">pic.twitter.com/msCxUuBKbO</a></p>&mdash; YuKiO｜個人開発｜Flutter x Firebase | Rails (@oo_forward) <a href="https://twitter.com/oo_forward/status/1394200652843085828?ref_src=twsrc%5Etfw">May 17, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Flutter環境
- Flutter version 2.2.1 
- Dart version 2.13.1

```.ymal
camera: ^0.8.1+3
google_mobile_ads: ^0.13.0
```

## 不具合の内容

今一番アップデートしている「絵本の読み聞かせ記録 ユリウス」をアップデートしたところ、どこかのタイミングでAndroid版のみ、カメラのプレビューを呼び出すと、真っ黒もしくは静止画のように動かない不具合に遭遇しました。

## 結論 「google_mobile_ads」が犯人
自分で見つけたわけではなく、Kaboさんから教えていただきました。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">google_mobile_adsと相性が悪いのを少し前に確認しましたよ。</p>&mdash; Kabo (@kabochapo) <a href="https://twitter.com/kabochapo/status/1405466489453379586?ref_src=twsrc%5Etfw">June 17, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

試しに、「google_mobile_ads」を停止したところ正常に動作を確認。他のバーコードスキャナー関連は動いていたのですが、私のAndroid環境では「camera: ^0.8.1+3」のみ発現していました。

どうもAndroid側の仕様で、うまく表示できていなさそうですが、何がだめなのかはっきりしません。

表示方法を変えることで解決するとのことですが、・・・
https://flutter.dev/docs/development/platform-integration/platform-views#virtual-display

こちらはパフォーマンスや別の影響を出す可能性があるとのことで、ますはgoogle_mobile_adsの代替を探すことにします。

## 「google_mobile_ads」の代替は「admob_flutter」でいいけれど。
https://pub.dev/packages/admob_flutter/versions/2.0.0-nullsafety.1
早い話、「admob_flutter」にすんなり入れ替えできれば簡単なんですが・・・・。

実は、Flutter2.0にアップグレードするにあたり、Firebase系もアップデートしました。
しかしiOSの場合、admob_flutterで使われている Google-Mobile-Ads-SDKが7.64のままなので、8.0.0系に対応しておらず、pod installでエラーに。

そのため、最新のSDKに対応している「google_mobile_ads」に入れ替えた一番の理由です。

githubに回避方法として、以下が載っていましたが、ネイティブ側のエラーでまったく動きません。
誰もがあきらめているところを見ると、ネイティブコードがわかる人でも解決が難しいかも。

https://github.com/kmcgill88/admob_flutter/issues/272#issuecomment-853150697

打つ手がないので、現状はビルドレベルで、androidとiosでpubを入れ替えてリリースするか、カメラのpubを別途入れ替えるしかなさそうです。

また「google_mobile_ads」が出てきてしまったので、もともとそこまで更新されていなかった、「admob_flutter」　が活発に修正される可能性は低いと思っているので、google_mobile_adsの修正が終わるまでは待つしかないかもです。

また、何かわかったらこの記事に書き込みます。

※追記
githubやstackoverflowにもissueとして書いている人がいますが、数ヶ月前の投稿でも誰も書いていません。
すぐ対応される可能性は低いかもしれません。
今回の不具合は実装までは問題なく、広告を表示させると不具合が発生するので、カメラを起動時だけ広告をOFFにすることで問題を解決しました。

※追記 21/6/24
kaboさんから追加で情報をいただきました。

「google_mobile_ads」でAndroid環境下でパフォーマンス低下するというissueがあり、その中で個人の方が改修したバージョンを適用することで、正常にカメラが動作するようになりました。
https://github.com/googleads/googleads-mobile-flutter/issues/80#issuecomment-797510235

koboさんもおっしゃっている通り、個人の方の改修のため、使用は各々の判断となります。

個人的な見解として、アプリ事態のパフォーマンスを上がった気がするため、要件がシビアな企業案件でなければ、オリジナルがアップデートされるまでは、こちらのバージョンを使った方がアプリ的には良さそうな気がします。

もし何か問題があれば、広告をオフにする手法で回避すればいいので。