ウェブカメラに映った自分の姿にグリッチをかけてみた(WebRTC getUserMedia + glitch-canvas + WebAudio API)
こんにちは。目がちかちかします。きたけーです。
この前のキタソンでつくったやつ(http://kitak.hatenablog.jp/entry/2014/11/23/175021)を応用して、ウェブカメラに映った自分の姿にグリッチをかけるアプリをつくってみました。 マイクから音をとって、音が大きいとグリッチ度合いが増すようにしています。
https://oregli.herokuapp.com/ (けっこうチカチカするので注意)
様子です
音が小さいとき
音が大きいとき
やっていること
- WebRTC getUserMedia で撮った動画をCanvasに表示する
- Canvasから取得した画像データを snorpey/glitch-canvas · GitHub をつかってグリッチ効果をかけて再びCanvasに表示する
- WebRTC getUserMedia で撮った音声をWebAudio APIのアナライザに渡して解析結果から平均の利得を計算する(グリッチ効果をかけるときのパラメータに平均利得をつかう)
所感
目がちかちかしてつかれました。 WebRTC getUserMediaを使うときは、videoタグにmuted属性を設定しておかないとハウリングをおこして、目がただでさえつかれるのに、耳もつかれるので注意です。
