function draw_green(){
  $('.preloader').hide();
  $('.green').show();
 }
function draw_red() {
  $('.preloader').hide();
  $('.red').show();
 }

<div class="main-wrapper">
  <div class="preloader green" style="display: none">
     <div class="loader-container">
        <div>
          <div class="text-logo">Green</div>
          </div>
      </div>
  </div>

  <div class="preloader red" style="display: none">
    <div class="loader-container">
      <div>
        <div class="text-logo">Red</div>
      </div>
    </div>
  </div>
  <canvas></canvas>

navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
            stream.getTracks().forEach(function(track) {

              if (track.kind == 'video')
                      document.getElementById('video').srcObject = stream;
                  startLoop();
            });
        }, function(err) {
            alert('Could not acquire media: ' + err);
        });


    var canvas = document.querySelector('canvas');
    var video =  document.querySelector('video');
    var ctx = canvas.getContext('2d')
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      var loopFrame = false;
      function loop(){
        loopFrame = requestAnimationFrame(loop);
        ctx.save();
        ctx.drawImage(video, 0, 0, canvas.width,   canvas.height);
        ctx.restore();
      }

      function startLoop(){
        loopFrame = loopFrame || requestAnimationFrame(loop);
      }