Mozilla Firefox twitter extension that draws attention to your presense in reality as you scroll. Read the blog post at http://www.jameshancock.art/webcam-presence/

manifest.json

{

  "manifest_version": 2,
  "name": "Phasing Presence Twitter Extensino",
  "version": "1.0",

  "description": "A Twitter extension that draws attention to your presense in reality as you scroll.",

  "icons": {
    "48": "icons/icon-48.png",
    "96": "icons/icon-96.png"
  },

  "content_scripts": [
    {
      "matches": ["*://twitter.com/*"],
      "js": ["phasing-presence.js"]
    }
  ]

}

phasing-presense.js

let videoElement = document.createElement('video');
let canvas = document.createElement('canvas');

videoElement.style.cssText = 'display:none;';
canvas.style.cssText = 'pointer-events:none; position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; z-index:100;';

//If you want to do something fancy with aspect ratio & position
//https://stackoverflow.com/questions/12021159/webrtc-get-webcams-aspect-ratio
//.getVideoTracks()[0].getSettings().aspectRatio
//In the meantime, I'll use some default values.
canvas.width = 800;
canvas.height = 500;

document.body.appendChild(videoElement);
document.body.appendChild(canvas);

let context = canvas.getContext('2d');
context.globalAlpha = 0.5;

let frameCount = 0;

if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
        let timerId = setTimeout(function tick() {
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
          videoElement.srcObject = stream;
          frameCount += 1;

          context.globalAlpha = ((Math.sin(frameCount / 100) + 1) / 2) / 1.25 + 0.1;
          //Opacity changes from 0.1 to 0.9. Never quite gone, never quite fully there.
          //To be honest, it would be better if it was 0 to 1 - you're forced to look at yourself
          //instead of straining your eyes to read the Twitter content.
          //Change the 0.1 to a 0.2.
          
          timerId = setTimeout(tick, 100);
        }, 50); //These values work best to prevent frame flicker.
                //Twitter resets the stream object of video elements as soon as you set them
                //Hence the neverending videoElement.srcObject = stream; loop
        })
    .catch(function (error) {
      console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
    });
}