Usercam Bookmarklet (getUserMedia Video PIP)

usercam.js

(function (nav, win, doc) {
  "use strict";

  var lib = "usercam"
    , anchor = [true, true] // === top, left
    , pending
    , pip;

  nav.getUserMedia =
    (nav.getUserMedia || nav.webkitGetUserMedia || nav.mozGetUserMedia || nav.msGetUserMedia);

  function eventListener (el, ev, fn) {
    if (win.addEventListener) {
      el.addEventListener(ev, fn, false);
    } else if (win.attachEvent) {
      el.attachEvent('on' + ev, fn);
    } else {
      el['on' + ev] = fn;
    }
  }

  function fixVid () {
    if (pip) {
      pip.style.top = pip.style.left = "";
      setTimeout(function () {
        pip.style.top = doc.body.scrollTop + (anchor[0] ? 0 : doc.documentElement.clientHeight - realHeight(pip) - 30) + "px";
        pip.style.left = (anchor[1] ? 0 : doc.body.clientWidth - pip.clientWidth) + "px";
      }, 20);
    }
  }

  function realHeight (pip) {
    return ~~parseInt(pip.clientHeight, 10)
      + ~~parseInt(pip.style.borderWidth, 10) * 2
      + ~~parseInt(pip.style.marginTop, 10) * 2
      + ~~parseInt(pip.style.paddingTop, 10) * 2;
  }

  function schedule (timing) {
    clearTimeout(pending);
    pending = setTimeout(fixVid, ~~timing || 100);
  }

  eventListener(doc.body, "click", function (event) {
    if (-~event.target.parentNode.className.indexOf(lib)) {
      var temp = doc.body.scrollTop + event.y < pip.offsetTop + realHeight(pip) / 2;
      anchor = [temp, !!(temp === anchor[0] ? !anchor[1] : anchor[1])];
      schedule();
    }
  });

  eventListener(doc.body, "keydown", function (event) {
    event.altKey && event.shiftKey && event.keyCode === 67 && usercam.toggle();
  });

  eventListener(win, "scroll", schedule);
  eventListener(win, "resize", schedule);

  win[lib] = {
    constraints: {
      audio: false,
      video: true
    }
    ,target: 'body'
    ,template: '<div class="__"><video autoplay="true"></video></div>'.replace("__", lib)
    ,close: function (el) {
      (el = doc.querySelector("." + lib)).parentNode.removeChild(el);
    }
    ,error: function () {
      (console.log || alert)(lib + ' has failed!');
    }
    ,start: function () {
      nav.getUserMedia(win[lib].constraints, win[lib].success, win[lib].error);
    }
    ,success: function (localMediaStream) {
      pip = document.createElement('div');
      pip.innerHTML = usercam.template;
      // pip = pip.childNodes[0];
      pip.style["background-color"] = "gainsboro";
      pip.style.border = "3px solid darkGray";
      pip.style.overflow = "hidden";
      pip.style.padding = "3px";
      pip.style.position = "absolute";
      pip.style.top = "0px";
      pip.style.width = "300px";
      doc.querySelector(usercam.target)
        .appendChild(pip);
      var v = doc.querySelector(usercam.target + ' video');
      v.src = win.URL.createObjectURL(localMediaStream);
      v.style["max-width"] = "100%";
      v.style["margin-bottom"] = "-4px";
      schedule(300);
    }
    ,toggle: function () {
      doc.querySelector('.' + lib) ? win[lib].close() : win[lib].start();
    }
  };
}(navigator, window, document));