createObjectURL to avoid tainted canvas

[Jakob Eriksen]

To avoid error when using getImageData (The canvas has been tainted by cross-origin data)
consider adding source as objectURL:

//  HTML: <video playsinline muted autoplay loop></video>
function loadAsObjectURL(video, url){
  const xhr = new XMLHttpRequest();    
  xhr.responseType = 'blob';
  xhr.onload = (response) => video.src = URL.createObjectURL(xhr.response);
  xhr.onerror = () => { /* Houston we have a problem */}; 
  xhr.open('GET', url, true);
  xhr.send();
  video.onload = () => URL.revokeObjectURL(target.src);
}

const video = document.querySelector('video');    
video.addEventListener('loadedmetadata', ()=> {
  seeThru.create(video);    
});
loadAsObjectURL(video, '../video.mp4');

Test https://codepen.io/jakob-e/pen/RZypBp

[Frederik Ring]

Thanks for the info. Would you mind opening a PR with that info against the README (just like for #39)? That's be super helpful and much appreciated.

[Frederik Ring]

Solved via #41