live2d-web ドキュメント

モバイル

モバイルブラウザでのカメラ入力と描画の注意点を確認します。

モバイルチェックリスト

自動画質調整では Canvas の描画解像度を制限できますが、カメラ推論の性能は端末によって異なります。iOS Safari と Android Chrome は、どちらも実機での検証が必要です。iOS Safari は0.7の必須確認項目で、実機の iPhone で Main thread と Worker をそれぞれ5分間確認するまで完了とはしません。Android Chrome は発行を止めない確認項目とし、未検証であることを公開したまま発行します。デスクトップ版 WebKit・Chromium や端末エミュレーションでは代用できないため、デスクトップでの測定値は参考値として扱ってください。

• カメラ・マイク権限には HTTPS を使います。
• ページが非表示の間はカメラ入力を停止します。
• 画面回転とバックグラウンドからの復帰を確認します。
• 実機で性能を測定してから Worker の利用を判断します。

カメラとページのライフサイクル

ユーザー操作からカメラを開始し、visibilitychange や pagehide でフレーム生成を停止します。復帰時は以前の stream が無効になる場合があるため、video.readyState を確認してください。

let stream: MediaStream | undefined
 
async function startCamera() {
  stream = await navigator.mediaDevices.getUserMedia({ video: true })
  video.srcObject = stream
}
 
function stopCamera() {
  stream?.getTracks().forEach(track => track.stop())
  stream = undefined
  video.srcObject = null
}
 
document.addEventListener('visibilitychange', () => {
  if (document.hidden)
    stopCamera()
})
addEventListener('pagehide', stopCamera, { once: true })

端末に合わせた描画サイズ

モデル読み込み前から Canvas の CSS サイズを確保します。上半身 framing と自動品質から始め、frame 時間を測定して解像度を上げます。

実機で確認

デスクトップのエミュレーションでは、カメラ権限、熱制御、バックグラウンド復帰、mobile WebKit Worker は検証できません。端末・OS・ブラウザーを記録し、Main の後に Worker を確認します。