見出し画像

WebAPIでの写真撮影で苦労した件

結論

- 個人のブログ記事とかじゃなく信頼のおける団体・企業のドキュメントを参照すべし(当たり前)
- WebAPIといえど、いろんなスマホやブラウザでの実機確認必須

背景

ゼロからのスタートでフレーム(額縁)付きで撮影するWebアプリを1週間でリリースというプロジェクトでした。
技術調査どころではない、とにかく実装しながら実験していくしかないという状況でした。
その中で苦戦したところをまとめておきます。

getUserMedia()

解像度はmin, maxを指定せよ!
高画質で撮影したかったので、最初はwidth: 5120, height: 3840なんて設定していました。
iPhone SE(第2世代)や、いくつかのAndroidで同作確認して大丈夫だったので安心していました。
しかし、リリース前日に、Androidの一部の機種で前面もしくは背面のカメラ画像がでないことが発覚。
結局制限付きでリリースしてから調査を進めました。
結論は、サブタイトルの通り、min, maxを指定するということでした。
MDNにはこのパラメータもしっかり解説されていますね。
ちゃんと信頼のおけるドキュメントを読みましょう…。
なお、idealを指定するとminが使われないことがあったので、idealは指定しませんでした。

min, maxを指定するとiOS Safariで動かない!?
min, maxを指定したことで不具合が解消できた!と喜んだのも束の間。
修正版リリース直前にiPhone(iOS 13.5.1)で動かなくなっていることに気が付きました。
結局、iOSの場合には、今まで通り単一の解像度、Androidの場合にはmin, maxを指定することにしました。

facingMode or deviceId
いろんなブログをみると前面カメラと背面カメラの切り替えはfacingModeというパラメータを使えと書いてあります。
しかし、一部の機種では背面カメラの解像度がものすごい低くなってしまうという問題が発生しました。
これは最近流行りの背面に複数のカメラを搭載しているタイプの一部で発生しました。
悩んだ挙げ句、facingModeではなくdeviceIdを指定してカメラを切り替えることにしました。
まか、これはこれで別の問題を引き起こしました。それについては次の章で説明します。

enumerateDevices()

enumerateDevice()は本当に機種によってまちまちです。ビデオデバイスとオーディオデバイスを列挙するので当然といえば当然です。
でも、こんな違いがあるとは思いませんでした。

- iPhone SE(iOS 13.5.1) + Safari:videoデバイスは1つだけ🤯(前面、背面の2つカメラが有るのに…)
- Huawei P20 lite:videoデバイスは2つ(背面はダブルレンズですが合わせて1つ)
- Huawei nova 5T:videoデバイスは6つ(前面、背面×4、赤外線センサー?)
- Sony Xperia 1: videoデバイスは4つ(前面、背面x3)

ここで一番困ったのがiPhoneです。
getUserMediaにdeviceIdを指定する方式ではカメラの切り替えができません。
結局、苦肉の策でiOSの場合にはfacingModeを指定して、Androidの場合にはdeviceIdを指定することにしました。

次に困ったのがnova 5Tです。予想よりも1つ多い…。しかもそのうちの1つは画面にカメラ映像が映らない…。
もうね、これは諦めました🤣

まとめ

やっぱり簡単そうに思えても、自分にとって初体験の技術を甘く見ちゃだめだということですね。
1週間でリリースに余裕でしょ!とか思っていた自分が恥ずかしい…。

そして、やっぱり信頼のおけるドキュメントをしっかりと読み込むこと。とくに焦っているときは安直なブログとかに頼りがちだけど、急がば回れです。



フリーランスのITエンジニアです。なにとぞよろしく!