読者です 読者をやめる 読者になる 読者になる

kitak.blog

Kみたいなエンジニアになりたいブログ

ウェブカメラに映った自分の姿にグリッチをかけてみた(WebRTC getUserMedia + glitch-canvas + WebAudio API)

web

こんにちは。目がちかちかします。きたけーです。

この前のキタソンでつくったやつ(http://kitak.hatenablog.jp/entry/2014/11/23/175021)を応用して、ウェブカメラに映った自分の姿にグリッチをかけるアプリをつくってみました。 マイクから音をとって、音が大きいとグリッチ度合いが増すようにしています。

https://oregli.herokuapp.com/ (けっこうチカチカするので注意)

kitak/oregli · GitHub

様子です

音が小さいとき

f:id:kitak:20141207232034p:plain

音が大きいとき

f:id:kitak:20141207232158p:plain

やっていること

  • WebRTC getUserMedia で撮った動画をCanvasに表示する
  • Canvasから取得した画像データを snorpey/glitch-canvas · GitHub をつかってグリッチ効果をかけて再びCanvasに表示する
  • WebRTC getUserMedia で撮った音声をWebAudio APIのアナライザに渡して解析結果から平均の利得を計算する(グリッチ効果をかけるときのパラメータに平均利得をつかう)

所感

目がちかちかしてつかれました。 WebRTC getUserMediaを使うときは、videoタグにmuted属性を設定しておかないとハウリングをおこして、目がただでさえつかれるのに、耳もつかれるので注意です。