Firefoxのcanvas操作でNS_ERROR_NOT_INITIALIZEDが出る場合の対処方法

canvasの操作でNS_ERROR_NOT_INITIALIZEDが出る場合

備忘録として残します。

エラーが出る処理

ここではCanvasからcaptureStreamでMediaStreamを取得しています。

const canvas = document.getElementById('canvas');
const video = document.getElementById('video');
video.srcObject = canvas.captureStream();       /* ここでエラーがでる */

実行結果

Browser	結果
Chrome	OK
Edge	OK
Firefox	NS_ERROR_NOT_INITIALIZED
Safari	OK

回避方法

getContext('2d')の行を追加します。
この処理を入れてもほかのブラウザに影響はありません。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');            /* この行を追加 */
const video = document.getElementById('video');
video.srcObject = canvas.captureStream();