オンライン飲み会などで、Webカメラでアクション出来ると面白いかもしれないと思い試しに作成。今回は単純に目をハートにしているだけですが、p5jsを応用すれば色々なエフェクトでアクションが出来て面白いと思う。 WebカメラからfaceAPIで目の位置を特定し、目をハートにしてみました。 画像なので少し分かり辛いかもしれませんが、動くと目の位置に合わせてハートが付いてきてくれます。 実装あれこれ 利用したライブラリ関係 ・ml5.js ・faceapi.js ・p5.js ※今回は使えてない。 VSCodeで作成 heart.pngがハート画像。 コード <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1