Hacker News new | ask | show | jobs
by florian_s 2620 days 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/tin...
2 comments

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
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.
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?