結論と対象読者

DotLCD Cameraの対応状況は、「サイトが開くか」ではなく、カメラ、画像入力、Canvas 2D、WebGL2、書き出し、Worker、PWAなどの機能単位で調べます。互換表だけで対応済みと判断せず、機能検出と実機試験を組み合わせます。

30秒要約

  • ブラウザ名やUser-Agentだけで機能を決め打ちしません。
  • 必要なAPIを機能ごとに検出します。
  • MDNの互換表は出発点であり、権限、OS、WebView、ハードウェア差は実機で確認します。
  • 主経路とフォールバックを別々に試験します。
  • 確認日、ブラウザ版、OS、端末、成功条件を記録します。

概要と背景

DotLCD Cameraは複数のWeb APIを組み合わせます。Canvas 2Dが使えてもWebGL2が使えない、WebGL2が使えてもカメラ権限が使えない、PNGは出力できてもWebPや録画形式が使えない、といった組み合わせがあります。

そのため「Chrome対応」「Safari非対応」のような単純な表では不十分です。機能ごとに最低要件、任意機能、実験機能を分けます。

特徴・できること

最低要件を定義できる

最低要件の例は次のとおりです。

  • JavaScript
  • Canvas 2D
  • 画像ファイル入力
  • PNG出力

カメラ、WebGL2、WebP、録画、PWA、WebGPUは追加機能として分離できます。

機能検出を使える

代表例として、次を実行時に確認します。

  • navigator.mediaDevices?.getUserMedia
  • canvas.getContext("webgl2")
  • canvas.toBlob
  • window.OffscreenCanvas
  • navigator.serviceWorker
  • MediaRecorder.isTypeSupported

存在確認だけでなく、実際の取得や作成が成功するかも確認します。

テスト結果を再利用できる

ブラウザ、OS、端末、テスト日、API、結果、代替経路を表形式で保存すると、更新時の差分確認に使えます。

現在の位置付けと利用上の前提

MDNの互換表は、APIの実装状況を確認する有力な資料です。ただし、次の要因は互換表だけでは決まりません。

  • HTTPSか
  • 権限が許可されているか
  • カメラが存在するか
  • GPUドライバが利用可能か
  • 埋め込みWebViewか
  • 管理ポリシーで禁止されているか
  • 端末メモリが足りるか
  • 指定コーデックが利用可能か

User-Agent文字列だけで処理を分岐すると、派生ブラウザや将来版で誤判定しやすくなります。機能検出を優先します。

近い対象との比較

方法用途限界
MDN互換表実装状況の事前確認実機の権限や性能は分からない
機能検出現在のブラウザでAPIを確認実行成功までは保証しない
実行試験実際の取得・描画を確認テスト環境が必要
User-Agent判定既知問題の補助誤判定しやすい
自動テスト回帰確認カメラ権限などは自動化しにくい

確認/試行の条件と注意点

  1. 最低要件、推奨機能、実験機能を一覧化します。
  2. PCとスマートフォンを分けて試験します。
  3. 通常モードとプライベートモードを試します。
  4. カメラ許可、拒否、権限解除後を試します。
  5. WebGL2主経路とCanvas 2D経路を別々に試します。
  6. PNG、WebP、録画形式は出力されたMIMEタイプまで確認します。
  7. PWAは初回オンライン、再訪オンライン、完全オフラインを分けます。
  8. 結果には確認日とブラウザ版を付けます。

「対応」と表示する場合は、何ができる状態を対応と呼ぶのかを明記してください。

参考リンク

  • MDN: Testing
  • https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing
  • MDN: Web APIs
  • https://developer.mozilla.org/en-US/docs/Web/API
  • MDN: User-Agent header
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/User-Agent