title: canvas.toDataURL() Security Error The operation is insecure
body: <p>When I am trying to get a screenshot and save it as PNG before uploading video to server, I am having the following problem</p>
  
  <p><img src="https://i.stack.imgur.com/AkUcx.png" alt="enter image description here"></p>
  
  <p>I hope you can solve my problem ...</p>
  
  <pre class="lang-js prettyprint-override"><code>/*Output image show view*/
  $('#file_browse').change(function(e){
      getVideo(this);
  });
  
  var capbtn = document.querySelector('#video_capture');
  var video = document.querySelector('video');
  var canvas = document.querySelector('canvas');
  var context = canvas.getContext('2d');
  var w, h, ratio;
  
  video.addEventListener('loadedmetadata', function() {
      ratio = video.videoWidth / video.videoHeight;
      w = video.videoWidth - 100;
      h = parseInt(w / ratio, 10);
      canvas.width = w;
      canvas.height = h;           
  }, false);
  
  capbtn.addEventListener("click", function(){
      context.fillRect(0, 0, w, h);
      context.drawImage(video, 0, 0, w, h);
      var objImageData = canvas.toDataURL("data:image/png;");  
  });
  
  function getVideo(input) {
      if (input.files &amp;&amp; input.files[0]) {
          var reader = new FileReader();
          reader.onload = function (e) {
              var video = document.getElementsByTagName('video')[0];
              var sources = video.getElementsByTagName('source');
              sources[0].src = e.target.result;
              video.load();
              video.style.display="block";
          }
          reader.readAsDataURL(input.files[0]);
      }
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input id="video_capture" type="submit" value="Capture" /&gt;
  &lt;video id="video_view" controls&gt;
      &lt;source src="movie.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  &lt;canvas width="300" height="300"&gt;&lt;/canvas&gt;
  </code></pre>