<div id="container">
  <video autoplay="true" id="videoElement"></video>
  <canvas id="canvas"></canvas>
  <div class="mask"></div>
  
 [[[https://codepen.io/andimal/pen/wzkjVZ]]]
</div>

<button class="snapshot">Snap!</button>
body
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/10922/AndysCodepenGuts.png)
  background-size: cover

#container
  position: absolute
  top: 50%
  -webkit-transform: translateY(-50%)
  transform: translateY(-50%)
  margin: 0px auto
  width: 500px
  height: 375px

#videoElement
  width: 100%
  height: 100%
  // temp
  // background-image: url("https://unsplash.it/600/600")
  background-size: cover
  box-shadow: 0 0 50px black

@-webkit-keyframes mask-play
  from
    -webkit-mask-position: 20% 0
    mask-position: 20% 0

  to
    -webkit-mask-position: 50% 0
    mask-position: 50% 0

@keyframes mask-play
  from
    -webkit-mask-position: 0% 0
    mask-position: 0% 0
    opacity: 1

  to
    -webkit-mask-position: 100% 0
    mask-position: 100% 0
    opacity: 1

.mask
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/10922/grunge.jpg)
  background-size: 100% 100%
  background-position: center

  -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/10922/mask2.png)
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/10922/mask2.png)
  -webkit-mask-size: 1300% 100%
  mask-size: 800% 100%
  -webkit-mask-position: 0% 0
  // -webkit-animation: mask-play 1.0s steps(11) infinite alternate
  animation: mask-play 1.5s steps(11) infinite alternate

.flag
  position: absolute
  bottom: -30%
  transform: scale(0.3)
  box-shadow: 0 0 50px black

.codepen-logo
  visibility: visible

.star-icon
  visibility: hidden

.snapshot
  position: relative
  top: 300px

canvas
  position: absolute
  top: 0
  width: 100%
  height: 100%
  
View Compiled
var video = document.querySelector("#videoElement");
 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
 
if (navigator.getUserMedia) {       
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}
 
function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}
 
function videoError(e) {
    // do something
}

jQuery('.snapshot').click(function() {
  var video = document.querySelector('video'); 
    var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d'); 
    ctx.drawImage(video,0,0);
  
    var Pic = document.getElementById("canvas").toDataURL("image/png");
    // Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
  
  // $.ajax({
  //       type: 'POST',
  //       url: '',
  //       data: '{ "imageData" : "' + Pic + '" }',
  //       contentType: 'application/json; charset=utf-8',
  //       dataType: 'json',
  //       success: function (msg) {
  //           alert("Done, Picture Uploaded.");
  //       }
  //   });
  
 //  $.ajax({
 // url: 'https://content.dropboxapi.com/2/files/upload',
 // type: 'post',
 // data: Pic,
 // processData: false,
 // contentType: 'application/octet-stream',
 // headers: {
 // "Authorization": "Bearer ",
 // "Dropbox-API-Arg": '{"path": "/test3.png","mode": "add"}'
 // },
 // success: function (data) {
 // console.log(data);
 // },
 // error: function (data) {
 // console.log(data);
 // }
 // })
});
Run Pen

External CSS

  1. https://codepen.io/andimal/pen/wzkjVZ

External JavaScript

  1. https://codepen.io/andimal/pen/wzkjVZ
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  3. https://www.gstatic.com/firebasejs/3.6.4/firebase.js