jsQRがiOS14でフリーズする場合の対策方法【JavaScript】

こんにちは。もきちです。

ブラウザ上でQR読み取りを実装するときに便利なJSライブラリ「jsQR」ですが、iOS14のSafariで動かしたときにカメラがフリーズしてしまう問題が発生しました。

今回は、その対策方法をご紹介します。

フリーズする原因

私の実装方法として、videoタグは非表示にして、canvasタグにvideoタグの内容を描画しています。同じ方法で実装している人が大半かと思いますし、Web上で見つかるサンプルソースもそうなっていることが多いですよね。

しかし、今回のフリーズは「videoタグが非表示」になっていることが原因でした。

試しにvideoタグの”display:none“を”display:block“に変更して動かしてみてください。

そのままではカメラ映像が2重で表示されてしまいますが、おそらくフリーズはしないかと思います。

videoタグが表示されていても、その親要素が非表示になっていたらダメなので気を付けてくださいね。

フリーズしないための改修方法

原因はわかったので、”display:none“を使わずに同じ状態を再現すれば大丈夫です。

今回は、videoタグに”position:absolute;opacity:0;top:0;left:0;z-index:-1000“のスタイルを適用することで対応しました。

非表示にせず、不透明度を0にして、更に見えない位置に置いちゃえばOKです。

ほぼ非表示と同じなのに、これだと上手く動くから不思議ですよね。

非表示とは一体…