Webカメラの映像はHTMLからgetUserMediaで取り込むことができます。そのままvideoタグに当てはめたり、一部だけ切り出してCanvasや画像のソースに当てることも可能です。 しかし見たまま使っても面白くありません。そこで一例としてTemporalisを紹介します。Webカメラの映像に面白い効果を施してくれます。

Temporalisの使い方

実行例です。映像を平行に切り取って、全体がずれるような効果を生み出しています。

手を振ったりするとこんな感じ。

縦のスライスも可能です。マトリックスでありそうな映像っぽいですね。

TemporalisはWebカメラの映像を取り込んで加工しています。リアルタイムで処理を行っていますが、若干の遅延があるのは致し方ないでしょう。非常に面白い効果なので、ぜひ試してください。

TemporalisはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Temporalis positlabs/temporalis: Slit-scan webcam with canvas