k-ibaraki/react-camera-sample

react-camera-sample's Issues

Videoエレメントが画面上に表示されてないと、Canvas上に動画が再生されない

• Webカメラの動画をReact-webcamで表示している。
  • 内部的にはおそらく<video>を使っている。
• その情報をCanvasに渡して、Canvas上でもWebカメラの動画を表示できるようにしている。
• しかし、元のWebカメラ画像(<video>)がブラウザの画面上に存在していないとCanvas上の動画も再生されなくなる。
  • 特にiPadのSafariは他のブラウザより厳しい。
• つまりCanvas上でWebカメラの動画を表示するには、元のカメラ画像の表示も必要。２重に表示される。

とりあえず、元のカメラ画像の透過度100%、画面右上固定、z-indexをマイナスにして見た目上は消せるようにしたが、本質的には画面上に存在していて、無駄でスマートではない。

画像ファイル指定後、onloadを待っていない

正しくは、描画される前にonloadを待つべき

forceUpdateで強制レンダリングさせている箇所がある。

２箇所ある。なんか微妙。

• videoの再生が開始された時にCanvasを再生成する為に使用（初回ロード時にはまだvideoがなくてCanvas側でvideoを読み取れない。再生開始のタイミングなら確実にvideoを読めるなのでこのタイミングでCanvasを再生成したい）
  • なにかいい対応案あれば、、、
• videoのサイズが変更された時に、Canvasのサイズも変更する為に使用( iPadを回転させた時にカメラの向きが代わり縦横比も変わるのに対処するために実装 )
  • Canvasのサイズの変更のために実施しているので、Canvasのサイズをstateに持たせて更新すればいいはずだが面倒くさくてやっていない