p5jsでカメラを使うアプリを使うにはcreateCaptureでカメラ映像を取得できる。
createCaptureではwidthとheightの値を指定することでカメラの解像度を設定することができるようになっているが、その挙動がよくわからなかったので、テスト用のアプリを作成して実際に試せるようにした。

https://muid7989.github.io/camera-setting-test/

createCaptureで指定するwidthとheightの値を選択し、createCaptureで取得した後に実際のwidthとheightの値を表示する。

操作方法

  • 下部のセレクトボックスでwidthとheightの指定値を選択する（0の場合は指定なしになる）
  • ボタンを押してカメラの映像を表示する
  • 実際のwidthとheightの値が表示されるので確認する
  • 別の選択で試す場合は一度リロードしてカメラ映像をOFFにする

スマホなどの縦持ちの場合について

挙動が気になったのはスマホなどの端末を縦持ちにした場合。
試してみて確認できたが、縦持ちの場合にはwidthの指定値がheightに適用され、heightの指定値がwidthに適用される。
縦長の映像として480x640で取得したい場合、widthに640、heightに480を指定する必要がある。

取得後は逆になるわけではなく、widthが480、heightが640として扱われる。
映像が横向きになったりするわけでもない。

投稿タグ