ウェブカメラを一度キャンバスへ転送、絵を加工して表示させるJavaScriptをつくったときにサファリだとうまくいかないケースについて。
この場合、ウェブカメラも表示していればいいが、「$("#video").css("display","none");」のようにビデオ要素は非表示にするものとします。
この場合アンドロイドはOK、iOSでもクロームはOKでしたがサファリでひっかかりました。
いろいろ試していると、ビデオを表示していればキャンバスのほうも更新されます。
コマってChatGPTに聞いたら、ビデオ要素の幅を０にするという案を提示されました。
#yourVideoElementId {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
これでビデオは表示しているが、サイズ０なので実質非表示。ただし全く表示されないわけではないことになります。
このやり方ならサファリでも、無事ビデオはみせないで、ビデオを加工したCanvasだけ表示することができました。
たまにはChatGPTも役に立つものです。
