code: function CameraUI() {
  
      // Root element for preview 
      var container = document.createElement('div');
      container.style.cssText = "left: 0px; top: 0px; width: 100%; height: 100%; position: fixed; z-index:9999;" +
                                     "padding: 40px; background-color: rgba(0,0,0,0.75);" + 
                                     "text-align:center; visibility: hidden";
  
      // Set up root element contetnts
      container.innerHTML =
          '<div id="captureHint" style="height:100%; position:relative; display:inline-flex; align-content:flex-start;">' +
          '<h2 style="position: absolute; width: 100%; background-color: rgba(255,255,255,0.25); margin: 0">' +
              'Click on preview to capture image. Click outside of preview to cancel.</h1>' + 
          '<video id="capturePreview" style="height: 100%"></video>' +
          '</div>';
  
      // Add container element to DOM but do not display it since visibility == hidden
      document.body.appendChild(container);
  
      // Create fullscreen preview
      var preview = document.getElementById('capturePreview');
      preview.autoplay = true;
      // We'll show preview only when video element content
      // is fully loaded to avoid glitches
      preview.onplay = function () {
          container.style.visibility = 'visible';
      };
  
      this.container = container;
      this.preview = preview;
  }
docs: Creates basic camera UI with preview 'video' element and 'Cancel' button
  Capture starts, when you clicking on preview.