HTML5 Video with Dynamic Thumbnails

Question

I have a problem, when creating thumbnails. The cross-domain problem I solved with the help of html2canvas PHP proxy.

No error message in the Console. But that Thumnbnails unfortunately are not visible, transparent or white.

Output cut in the source code:

<img src="data:image/png;base64,iVBORw0KGgoAAAA.......Output cut in the source code:NSUhEUgAABN8AAAS4=" width="120">

The script:

  <script>
var video = document.getElementById("thumb");
video.addEventListener("loadedmetadata", initScreenshot);
video.addEventListener("playing", startScreenshot);
video.addEventListener("pause", stopScreenshot);
video.addEventListener("ended", stopScreenshot);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ssContainer = document.getElementById("screenShots");
var videoHeight, videoWidth;
var drawTimer = null;

function initScreenshot() {
  videoHeight = video.videoHeight; 
  videoWidth = video.videoWidth;
}

function startScreenshot() {
  if (drawTimer == null) {
    drawTimer = setInterval(grabScreenshot, 1000);
  }
}

function stopScreenshot() {
  if (drawTimer) {
    clearInterval(drawTimer);
    drawTimer = null;
  }
}

function grabScreenshot() {
  ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
  convert(document.getElementById("thumb-parent"));
}
function convert(target) {
        html2canvas(target, {
            "proxy": "../html2canvasproxy.php",
            "logging": true, //Enable log (use Web Console for get Errors and Warnings)
            "onrendered": function(canvas) {
                var img = new Image();
                    img.onload = function () {
                        img.onload = null;
                        img.width = 120;
                        document.getElementById("screenShots").appendChild(img);                            
                    };
                    img.src = canvas.toDataURL("image/png");
            }
        });
    }   

Answer 1

From the looks of things, it's because the browser considers your canvas 'tainted' - using the example you provided above, I've let the video run a little, then tried to log the toDataURL output:

console.log(canvas.toDataURL()); VM1344:2 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

My suspicion is that is becuase the video is being loaded from a third party URL.

Try loading the video from the same domain as the HTML code, and see if that works