I’m building a large-scale Content Management System (CMS) for Video, tied to a Content Delivery Network (CDN), and one of the big issues we’ve identified relates to the difficulty of thumbnailing video files which are loaded into our system with missing images.

HTML5 is great, and the good folks at flowplayer.org have built a tidy little video player which enables us to display the video in a <video> element on the page. Flowplayer allows quite a lot of control over the video.

And, the wonderful <canvas> tag allows the developer to extract a thumbnail image, directly from that video.

function takeThumbnail() {
	$('#new_thumbs').prepend('<canvas id="thingamajigger' + cnt + 
		'" style="height:240px; width:428px;"></canvas>');
	var tc = document.getElementById('thingamajigger' + cnt);
	var v = document.getElementById('vidyo');

	ctx = tc.getContext('2d');
	ctx.drawImage(v,0,0,107,60);
}

It would seem that all I have to do is call canvas.getImageData() to get a base64-encoded copy of the image, which I can then post to a server.

And, this works fine.

If the page, and the video are on the same server. I’m told that if the server hosting the image has the proper headers for CORS, then it works, too. Our CDN does not, so I cannot verify.

Anyway, when I try this with a video on my CDN, I get an exception (18) indicating that I have poisoned my DOM, and cannot access the resultant image programatically.

IMHO, this is stupid. Fucking hackers.

So, the solution, is the great folks over at Transloadit.com. Great API for doing this.