一定間隔でウェブカメラで写真を撮って、同じページをみている人に送るアプリをNode.js + socket.ioで作った

こんにちは。レバニラ炒めを食べました、きたけーです。

今日はキタソンで、ブラウザで一定間隔でウェブカメラで写真を撮って、同じページをみている人に送るアプリをNode.js + socket.ioで作りました。

朝からぽよぽよ始めて、昼ぐらいに必要な部分は大体できたかんじでした。その後は本読んだり、顔認識のライブラリを色々試したりをこれまでずっとやっていたかんじです。

kitak/faces · GitHub

つくった経緯

最近、リモートワークを助けるツールを色々調べて、Sqwiggleがいいなーと感じて、定期的に自分の様子を映す部分だけでもつくってみたいな、と思ったのでした。

なにをやっているか

  • Navigator.getUserMedia( Navigator.getUserMedia - Web API インターフェイス | MDN )でウェブカメラで撮った動画をvideoタグで表示(実際にはvideoタグ自体は非表示)
  • 数秒おきにvideoタグで表示している内容をcanvasのcontextに描画する (context.drawImage)
  • canvas.toDataURLで描画した内容をdataURLにして、socket.ioを使って、同じページをみている人に配信する

こんだけです。他にも顔認識のライブラリをつかって、認識しないとき(=退席している)とみなして、半透明に表示させたりしてみたんですが、うまく顔認識のライブラリが動かないときがあっていまいち。

様子

一緒に映っているのは、仮想通貨が好きな同僚のワッカム氏です。

f:id:kitak:20141123173044p:plain

幸せそうな僕

f:id:kitak:20141123175328p:plain