ブラウザのタブにある「Favicon(ファビコン)」にウェブカメラの映像を映す

ウェブサイトのブックマークアイコンになったりブラウザのタブ部分に表示されたりするのが「Favicon(ファビコン)」です。このファビコンにウェブカメラの映像を映すことに、開発者のdavyさんが成功しています。

Tiny Mirror
https://wybiral.github.io/code-art/projects/tiny-mirror/

一体どういうことかというと、以下のムービーを見ればその詳細がよくわかります。

普通のウェブブラウザ

画面がズームしていき……

タブの赤枠部分にあるファビコンが動いていることがわかります。

実際にdavyさんが作成した「ウェブカメラの映像を映すファビコン」を体験したい場合は、以下のページにアクセスしてみればOKです。

Tiny Mirror
https://wybiral.github.io/code-art/projects/tiny-mirror/

今回はFirefoxを使ってページにアクセスしてみました。すると「あなたのカメラの使用を許可しますか？」という通知が表示されるので、「許可する」をクリック。

赤枠部分のように、タブのファビコンにPCのカメラが映す映像が表示されました。少しラグはあるものの、しっかりと映像がファビコンになっています。

Firefoxの場合はブラウザの検索バー部分にある「i」をクリックして、「カメラの使用」の「一時的に許可」の隣にある「×」アイコンをクリックすればPCカメラの動作を止めることができます。

なお、davyさんによるとファビコンに表示される映像のフレームレートはブラウザによってまちまちだそうで、ブラウザによってはかなり遅くなるものもある模様。ソースコードは以下にまとめられています。

Added tiny-mirror · wybiral/code-art@dff12eb · GitHub
https://github.com/wybiral/code-art/commit/dff12eb8d05a0279f2798e29f55ae45748515d89