Canvasでvideo要素をキャプチャするとAndroid版Chrome・Firefoxだけエラーが出る

Question

前提

JavaScript のプレイヤーにて再生している HLS 形式の動画を Canvas の機能でキャプチャ（スクリーンショット）し、それを HTMLCanvasElement.toBlob() で Blob 化して XHR でサーバーにアップロードする機能を実装していますが、Android 版の Chrome・Firefox でのみうまく動きません。

• Android 版の Chrome 系ブラウザと Firefox でのみ発生する
• Chrome と Firefox はエラー内容が異なる
• PC 版の Safari・Chrome・Firefox ではエラーも発生せず、正常にキャプチャができる
• iOS 版の Safari では Canvas が空になり画像化しても真っ白になる現象が起きていたが、こちらは同じ関数内でキャプチャする事で解決した
• HLS 形式ではなく通常の MP4 の動画をキャプチャすると Android 版の Chrome では正常にキャプチャができるようになるが、Android 版の Firefox は HLS の時と同様のエラーが表示されている

JavaScript は初心者で Canvas もほとんど触ったことがなく、どのように解決すればいいか悩んでいます。
宜しくお願いします。

確認ブラウザ

• iOS: Safari (Chrome・Firefox)
• Android: Chrome・Firefox
• PC (Windows・Mac): Safari・Chrome・Firefox

Comments

[x_x]

書き込んでいるのは img ではなく this.player.video なので、それを明らかにしてください

Answer 1

結局、自己解決しました。

原因ですが、

• ブラウザが HLS 形式の再生にネイティブで対応している場合、プレイヤー側でネイティブの HLS を利用するような実装になっていたこと
• Android 版の Chrome は HLS 形式の再生にネイティブで対応しているが、PC 版の Chrome では HLS 形式の再生には hls.js が必要で、ネイティブでは対応していない
• Android 版の Chrome の HLS 形式のネイティブ再生実装にはいくつかバグがあるようで、Canvas でキャプチャする事ができない不具合を抱えている
• iOS の Safari は hls.js での再生に対応していないが、キャプチャは可能（バグは発生しない）。ただし、関数を跨いで Canvas を受け渡すと Canvas が空になってしまう

…といったものでした。

そのため、hls.js に対応していないブラウザを除き、基本的に hls.js を利用させるようにプレイヤーのコードを変更し、またキャプチャした Canvas を同じ関数内で扱う事で、解決することができました。

なお、Android 版の Firefox は依然として謎のエラーメッセージが表示されてキャプチャに失敗するのですが、これはブラウザの不具合が原因しているみたいです。開発チームも不具合を認識しているものの修正できていないのだとか。
Android 版の Firefox はシェアも少ないですし、一旦無視して開発を進めたいと思います。