JPEGファイルが壊れたような、グリッチエフェクトがかかります。
ブラウザのベンチマークの意味も含めて、実験的なデモになっています。（高負荷のため端末によっては重い可能性があります）

グリッチはデジタル機器に発生するエラー、ノイズのことです。
このデモではJPEGファイルが壊れたような、グリッチエフェクトがかかります。
JPEGファイルが何かしらの理由によって壊れた場合はこのような画像になります。

今回のエフェクトでは、何かしらの理由ではなく、意図的にファイルを破壊して解凍することによって壊れた画像を表示させています。

JPEGは画像の圧縮フォーマットの一つです。
DCT変換をして周波数領域への変換を行い、その際に高い周波数を削っても見た目の変化が少ないために圧縮することができるという技術です。
圧縮時に行われているDCT変換は8x8のブロックごとに処理され、グリッチ時にはこのブロックサイズに由来するパターンが画面に発生します。

また周波数データをこのブロック内で、差分として記録しており、値が間違っているとうまく復元できず画像が乱れます。

JPEG画像のグリッチを簡単に試す場合には、バイナリエディタでファイルとして開いて、数値を変えて保存し直すと、今回のエフェクトのような画像になります。（場合によっては画像が開けなくなります）

今回のデモでは、カメラからの画象をJPEGに圧縮して、安全に破壊して、解凍しています。
ブラウザの高負荷な処理のベンチマークの意味も含めていますが、JPEG圧縮、解凍のベンチマークの副産物として、JPEGのグリッチエフェクトとしてお楽しみ下さい。

JPEG GlitchではJPEGの圧縮・解凍部分にC++のライブラリであるlibjpeg-turboを使用しています。
C++のコードをEmscriptenを使用してJavaScriptに変換したものを利用しています。