この記事は公開されてから1年以上経過しており、最新の内容に追従できていない可能性があります。
目次
これはなに
- 三倍濃縮をいい感じにする | tools.gomiba.co
- カメラの画像の上にx倍で割るときのラインを出して分量を測る
- 3D空間を認識して角度を合わせるとかそういうリッチな機能ではない
なぜつくったのか
- めんつゆの3倍濃縮とかはかるの面倒だけどざっくりいれると分量おかしくなるしいいソリューションが欲しかった
- というのは建前で
- MediaStreamでカメラから映像をとってvideoに出せるのは知っていたけどcanvasに出してどうこうできるのかな？という実験
- あとVueなコンポーネント操作でcanvas内に反映ってうまくできるんかな〜
どうやってつくったのか
- MediaStreamをいったんvideo要素に入れて、そのvideo要素がCanvasImageSourceになるので
CanvasRenderingContext2D.drawImageに渡せる- CanvasRenderingContext2D.drawImage() - Web APIs | MDN
- MediaStream - Web API | MDN
- CanvasImageSource - Web APIs | MDN
- あとは
requestAnimationFrameでループしてカメラの映像をcanvasに転送できた - video要素は
display: noneでも大丈夫
- CanvasRenderingContext2D を自由にこねくり回せるので、たとえば getImageData してカメラの映像にフィルタをかけたり色々いじるのもできそう
- ということはWebGLでもどうようにカメラからの映像をテクスチャとしていろいろ使えるんじゃないだろうか、と思うのだった