Bach face plant // source http://jsbin.com/yatigi

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="I'll Be Bach" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>I'll Be Bach</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

<script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>

<script src="bowser.js"></script>

<script src="machina.js"></script>
  
  
  <link rel="stylesheet" href="//media.wnyc.org/static/gotham/176205/1D6F0D9D0E2D9044E.css" type="text/css">

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    body {
      background-color: black;
      color: white;
    }
    body, #trigger, #save, #cancel {
      font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
    }
    h1, h2, h3 {
      font-weight: normal;
      font-family: 'Gotham A', 'Gotham B', Helvetica, Arial, sans-serif;
    }
    .header, .buttons {
      text-align: center;
    }
    .buttons {
      margin-top: 10px;
    }
    #picture {
      display: block;
      margin: 10px auto;
      border: 1px solid #222;
    }
    #trigger,#save,#cancel {
      border-radius: 30px;
      border: none;
      outline: none;
      cursor: pointer;

background-color: #aaa;
      color: black;
      padding: 8px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;

text-decoration: none;

-webkit-transition: background-color 250ms ease-out;
      -o-transition: background-color 250ms ease-out;
      transition: background-color 250ms ease-out;

text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
      text-transform: uppercase;
      font-weight: 600;
    }
    #trigger:hover, #save:hover, #cancel:hover {
      background-color: white;
      text-decoration: none;
    }
    #trigger {
      width: 200px;
    }
    #trigger:before, #save:before, #cancel:before {
      font-family: FontAwesome;
      display: block;
      margin-bottom: 3px;
      font-size: 18px;
      font-weight: initial;
    }
    #trigger:before {
      font-size: 25px;
    }
    #cancel, #save {
      width: 40px;
      height: 40px;
      font-size: 18px;
      line-height: 24px; /* 40 - 8 - 8 */
      vertical-align: 10px;
    }
    .notifier {
      position: absolute;
      display: none;
      top: 0;
      padding: 10px;
      background-color: black;
    }
    .links {
      text-align: center;
      margin-top: 5px;
    }
    .links a {
      color: white;
    }
  </style>
</head>
<body>
  <div class="notifier" id="notifier">
    Activate your webcam!
  </div>

  <canvas id="picture" width="480" height="600"></canvas>
  <div class="buttons">
    <a id="save" style="display:none;" class="fa fa-save"></a>
    <a id="trigger" class="fa fa-camera">Snap my Bach</a>
    <a id="cancel" style="display:none;" class="fa fa-refresh"></a>
  </div>
  <div class="links">
    <a href="https://www.wqxr.org/">Visit WQXR.org</a> |
    <a href="https://www.wqxr.org/mobile">Get the mobile app</a>
  </div>
  <script src="jsbin.yatigi.js"></script>
  
  <script type="text/javascript">

var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-283599-23']);
   _gaq.push(['_trackPageview']);

(function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga, s);
   })();

</script>
  
</body>
</html>

Modified http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js

https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js