<video id="video"></video>
<img id="demo">
<div>
  <button id="record">Record</button>
  <button id="play">Play</button>
  <button id="reset">Reset recording</button>
</div>
 
<!-- some packages for getting and attaching user media -->
<script src="node_modules/getusermedia/getusermedia.bundle.js"></script>
<script src="node_modules/attachmediastream/attachmediastream.bundle.js"></script>
<!-- a package for playing back the recording -->
<script src="node_modules/fauxplay/fauxplay.bundle.js"></script>
 
<script src="video-recorder.bundle.js"></script>
<script>
  var image = document.getElementById('demo');
  var video = document.getElementById('video');
  var record = document.getElementById('record');
  var play = document.getElementById('play');
  var reset = document.getElementById('reset');
  var recorder;
 
  getUserMedia(function (err, stream) {
    if (err) return console.log(err);
 
    attachMediaStream(stream, video, {muted: true});
 
    recorder = window.recorder = new VideoRecorder(video);
  });
 
  record.addEventListener('click', function () {
    if (recorder.running) {
      recorder.stop();
      this.innerHTML = 'Record';
    } else {
      recorder.record();
      this.innerHTML = 'Pause';
    }
  });
 
  play.addEventListener('click', function () {
    fauxplay(recorder.data, image, {loop: true, duration: recorder.runningTime})
  });
 
  reset.addEventListener('click', function () {
    recorder.stop();
    recorder.reset();
  });
</script>