5 ms·

Webcam in a Favicon

225 points by MagicPropmaker 7y ago

florian_s 7y ago
The source code is actually small enough to be posted here navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia; window.onload = () => { // Create favicon link element const favicon = document.createElement('link'); favicon.rel = 'shortcut icon'; favicon.type = 'image/png'; favicon.href = '../../images/favicon.ico'; document.getElementsByTagName('head') . [0].appendChild(favicon); // Create hidden canvas const w = 32; const h = 32; const canvas = document.createElement('canvas'); canvas.style = 'display: none'; canvas.width = w; canvas.height = h; document.body.appendChild(canvas); // Grab canvas context const ctx = canvas.getContext('2d'); // Create hidden video element const video = document.createElement('video'); video.style = 'display: none'; video.width = canvas.width; video.height = canvas.height; document.body.appendChild(video); // Assign user media to video and start loop navigator.getUserMedia({video: true}, stream => { video.srcObject = stream; video.play(); loop(); }, () => {}); // Loop forever const loop = () => { // Copy video to canvas ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // Set canvas to favicon favicon.setAttribute('href', canvas.toDataURL()); // Loop setTimeout(loop, 100); }; }; From https://github.com/wybiral/code-art/blob/master/projects/tiny-mirror/index.js https://github.com/wybiral/code-art/blob/master/projects/tin...
- deleted 7y ago
  [deleted]
- chipperyman573 7y ago
  Is there a reason that he sets a timeout of 100? Since this is all local (because of canvas.toDataURL()), can't it just run every 16ms (60 fps) instead of 100? I noticed in the gif that it was super choppy but I kind of assumed there was a technical reason, but I can't think of a reason that there would be a reason to have such a long delay.
  - wybiral 7y ago
    The browser doesn't seem to update the image any faster (at least not Chrome on Linux) than it already does. You can try different framerates though, maybe some platforms allow higher frequency?
- eridius 7y ago
  That explains why it does nothing in Safari. Safari doesn't support `navigator.getUserMedia`, as that's deprecated and no longer part of the standard. The standard way to do this is navigator.mediaDevices.getUserMedia
darkhorn 7y ago
It crashes Firefox 66.0.3 (64-bit) on Windows 10.0.17763.437. https://crash-stats.mozilla.org/report/index/7d1ca3eb-2d06-43af-a83b-d7e510190421 https://crash-stats.mozilla.org/report/index/7d1ca3eb-2d06-4...
- jniedrauer 7y ago
  Works great in Firefox 68.0a1 on Fedora 29 with the HTC Vive front-facing camera.
- y0ghur7_xxx 7y ago
  Works fine on Firefox 66.0.3 (64-bit) on Linux.
- close04 7y ago
  Tested on 66.0.3 on a fully updated Windows 10 (64bit all around) and it works fine.
- MagicPropmaker 7y ago
  If it crashes it, there may be an attack vector here!
  - wybiral 7y ago
    If you really want to crash a Firefox browser without JS, there's this: https://fan-pages.herokuapp.com/ https://fan-pages.herokuapp.com/ It basically keeps sending iframe's with data URL's for download, see code: https://github.com/wybiral/crash https://github.com/wybiral/crash On Chrome it blocks request popups after the first but FF usually crashes (even Tor Browser). The interesting thing about this is that you can keep the connection open as long as you want and then send the iframes on command.
    - chipperyman573 7y ago
      >The interesting thing about this is that you can keep the connection open as long as you want and then send the iframes on command. What do you mean?
vortico 7y ago
See also http://lab.ejci.net/favico.js/ http://lab.ejci.net/favico.js/
kalleboo 7y ago
This fails in Safari on the use of a deprecated API https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia https://developer.mozilla.org/en-US/docs/Web/API/Navigator/g...
tamentis 7y ago
That's such an awesome little hack. Next think we need is to synchronize multiple tabs and a multi-player favicon game where you get to shoot the tabs of your opponents.
Stratoscope 7y ago
It would be fun to flip the image so it really looks like a Tiny Mirror. I wonder if this would work? In the initial setup: ctx.scale( -1, 1 ); In the drawing loop: ctx.drawImage( video, 0, 0, canvas.width * -1, canvas.height ); Something like that anyway. We have guests arriving soon, so no time to test right now, but if anyone tries it I will be curious!
wybiral 7y ago
Another interesting (and more practical) use of the favicon is visit duration tracking without JS: https://twitter.com/davywtf/status/951203191944773632 https://twitter.com/davywtf/status/951203191944773632 Basically the favicon connection to the server stays open sending a periodic junk-update so that the server can detect when the tab is closed. You can do it with any asset but the favicon hides the loading indicator.
- munk-a 7y ago
  Sigh, it's neat yea - but advertisers are going to start leveraging favicon stay-alives for revenue gauging.
  - wybiral 7y ago
    It's easier and common to do with JS, so it would be a really niche target. I was investigating it as a method of tracking users on Tor where JS is often disabled.
    - chipperyman573 7y ago
      While really novel and interesting, would it really work that well on Tor/etc? Most people using those browsers are pretty privacy conscious and I feel like people would notice a connection that never closes
      - wybiral 7y ago
        Tor can also create a false sense of privacy because people think it will do all of the work for them. If they look at the network tab in their browser they can see it, but it just looks like a favicon asset that's really slow to load. And people usually assume that with JS disabled these things don't happen. That's also the purpose of using it in the favicon. It prevents the loading spinner so you'd have to inspect the connections.
    - tinus_hn 7y ago
      You could also consider that people using TOR explicitly do not want to be tracked.
amelius 7y ago
Next release: larger video image! Since it's impossible to show a larger image in the thumbnail area, we'll show the video in the main browser window.
_bxg1 7y ago
The URL equalizer further down is possibly even cooler: https://mobile.twitter.com/jake_albaugh/status/1118611365508337665 https://mobile.twitter.com/jake_albaugh/status/1118611365508...
- shard 7y ago
  Note that the link is to something that is an audio spectrum analyzer/visualizer and not an equalizer. It's even called "Analyser" in the code. At first I was amazed that an equalizer could be implemented into a URL, I was wondering how one would input the gains for the frequency bands, but alas it just displays the volume at each frequency.
  - _bxg1 7y ago
    Whoops, the person who quote-tweeted it in the original thread called it an equalizer and I didn't give it any thought

The source code is actually small enough to be posted here navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia; window.onload = () => { // Create favicon link element const favicon = document.createElement('link'); favicon.rel = 'shortcut icon'; favicon.type = 'image/png'; favicon.href = '../../images/favicon.ico'; document.getElementsByTagName('head') . [0].appendChild(favicon); // Create hidden canvas const w = 32; const h = 32; const canvas = document.createElement('canvas'); canvas.style = 'display: none'; canvas.width = w; canvas.height = h; document.body.appendChild(canvas); // Grab canvas context const ctx = canvas.getContext('2d'); // Create hidden video element const video = document.createElement('video'); video.style = 'display: none'; video.width = canvas.width; video.height = canvas.height; document.body.appendChild(video); // Assign user media to video and start loop navigator.getUserMedia({video: true}, stream => { video.srcObject = stream; video.play(); loop(); }, () => {}); // Loop forever const loop = () => { // Copy video to canvas ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // Set canvas to favicon favicon.setAttribute('href', canvas.toDataURL()); // Loop setTimeout(loop, 100); }; }; From https://github.com/wybiral/code-art/blob/master/projects/tiny-mirror/index.js https://github.com/wybiral/code-art/blob/master/projects/tin...

deleted 7y ago
[deleted]
chipperyman573 7y ago
Is there a reason that he sets a timeout of 100? Since this is all local (because of canvas.toDataURL()), can't it just run every 16ms (60 fps) instead of 100? I noticed in the gif that it was super choppy but I kind of assumed there was a technical reason, but I can't think of a reason that there would be a reason to have such a long delay.
- wybiral 7y ago
  The browser doesn't seem to update the image any faster (at least not Chrome on Linux) than it already does. You can try different framerates though, maybe some platforms allow higher frequency?
eridius 7y ago
That explains why it does nothing in Safari. Safari doesn't support `navigator.getUserMedia`, as that's deprecated and no longer part of the standard. The standard way to do this is navigator.mediaDevices.getUserMedia

darkhorn 7y ago

It crashes Firefox 66.0.3 (64-bit) on Windows 10.0.17763.437. https://crash-stats.mozilla.org/report/index/7d1ca3eb-2d06-43af-a83b-d7e510190421 https://crash-stats.mozilla.org/report/index/7d1ca3eb-2d06-4...

jniedrauer 7y ago
Works great in Firefox 68.0a1 on Fedora 29 with the HTC Vive front-facing camera.
y0ghur7_xxx 7y ago
Works fine on Firefox 66.0.3 (64-bit) on Linux.
close04 7y ago
Tested on 66.0.3 on a fully updated Windows 10 (64bit all around) and it works fine.
MagicPropmaker 7y ago
If it crashes it, there may be an attack vector here!
- wybiral 7y ago
  If you really want to crash a Firefox browser without JS, there's this: https://fan-pages.herokuapp.com/ https://fan-pages.herokuapp.com/ It basically keeps sending iframe's with data URL's for download, see code: https://github.com/wybiral/crash https://github.com/wybiral/crash On Chrome it blocks request popups after the first but FF usually crashes (even Tor Browser). The interesting thing about this is that you can keep the connection open as long as you want and then send the iframes on command.
  - chipperyman573 7y ago
    >The interesting thing about this is that you can keep the connection open as long as you want and then send the iframes on command. What do you mean?

vortico 7y ago

See also http://lab.ejci.net/favico.js/ http://lab.ejci.net/favico.js/

kalleboo 7y ago

This fails in Safari on the use of a deprecated API https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia https://developer.mozilla.org/en-US/docs/Web/API/Navigator/g...

tamentis 7y ago

That's such an awesome little hack. Next think we need is to synchronize multiple tabs and a multi-player favicon game where you get to shoot the tabs of your opponents.

Stratoscope 7y ago

It would be fun to flip the image so it really looks like a Tiny Mirror. I wonder if this would work? In the initial setup: ctx.scale( -1, 1 ); In the drawing loop: ctx.drawImage( video, 0, 0, canvas.width * -1, canvas.height ); Something like that anyway. We have guests arriving soon, so no time to test right now, but if anyone tries it I will be curious!

wybiral 7y ago

Another interesting (and more practical) use of the favicon is visit duration tracking without JS: https://twitter.com/davywtf/status/951203191944773632 https://twitter.com/davywtf/status/951203191944773632 Basically the favicon connection to the server stays open sending a periodic junk-update so that the server can detect when the tab is closed. You can do it with any asset but the favicon hides the loading indicator.

munk-a 7y ago
Sigh, it's neat yea - but advertisers are going to start leveraging favicon stay-alives for revenue gauging.
- wybiral 7y ago
  It's easier and common to do with JS, so it would be a really niche target. I was investigating it as a method of tracking users on Tor where JS is often disabled.
  - chipperyman573 7y ago
    While really novel and interesting, would it really work that well on Tor/etc? Most people using those browsers are pretty privacy conscious and I feel like people would notice a connection that never closes
    - wybiral 7y ago
      Tor can also create a false sense of privacy because people think it will do all of the work for them. If they look at the network tab in their browser they can see it, but it just looks like a favicon asset that's really slow to load. And people usually assume that with JS disabled these things don't happen. That's also the purpose of using it in the favicon. It prevents the loading spinner so you'd have to inspect the connections.
  - tinus_hn 7y ago
    You could also consider that people using TOR explicitly do not want to be tracked.

amelius 7y ago

Next release: larger video image! Since it's impossible to show a larger image in the thumbnail area, we'll show the video in the main browser window.

_bxg1 7y ago

The URL equalizer further down is possibly even cooler: https://mobile.twitter.com/jake_albaugh/status/1118611365508337665 https://mobile.twitter.com/jake_albaugh/status/1118611365508...

shard 7y ago
Note that the link is to something that is an audio spectrum analyzer/visualizer and not an equalizer. It's even called "Analyser" in the code. At first I was amazed that an equalizer could be implemented into a URL, I was wondering how one would input the gains for the frequency bands, but alas it just displays the volume at each frequency.
- _bxg1 7y ago
  Whoops, the person who quote-tweeted it in the original thread called it an equalizer and I didn't give it any thought