0

This question has 2 parts, really - the getting of the thumbnail image using canvas is straight forward. K Scott Allen did a post of this here

Basically, this is the code and I have tried it:

$output = $("#output");
var video = $("#video").get(0);
var canvas = document.createElement("canvas");
    canvas.width = $video.videoWidth * scale;
    canvas.height = $video.videoHeight * scale;
    canvas.getContext('2d')
          .drawImage($video, 0, 0, canvas.width, canvas.height);

    var img = document.createElement("img");
    img.src = canvas.toDataURL();
    $output.prepend(img);

The second part is more complicated. Since my .mpg videos are being served by Azure Media Services, the call to canvas.getDataUrl() is a Cross Domain request and fails.

Setting CORS headers/flags should work but does not. There is a work around for images contained in the answer to this StackOverflow question here.

This work around has the following code example function that runs on body load:

function initialize() {

    //will fail here if no canvas support
    try {
        var can = document.getElementById('mycanvas');
        var ctx = can.getContext('2d');
        var img = new Image();
        img.crossOrigin = '';
        //domain needs to be different from html page domain to test cross origin security
        img.src = 'http://lobbydata.com/Content/images/bg_price2.gif';
    } catch (ex) {
        document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex.Message + "</span>";
    }

    //will fail here if security error
    img.onload = function () {
        try {
            var start = new Date().getTime();
            can.width = img.width;
            can.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var url = can.toDataURL(); // if read succeeds, canvas isn't dirty.
            //get pixels
            var imgd = ctx.getImageData(0, 0, img.width, img.width);
            var pix = imgd.data;
            var len = pix.length;
            var argb = []; //pixels as int
            for (var i = 0; i < len; i += 4) {
                argb.push((pix[i + 3] << 24) + (pix[i] << 16) + (pix[i + 1] << 8) + pix[i + 2]);
            }
            var end = new Date().getTime();
            var time = end - start;
            document.getElementById("results").innerHTML = "<span style='color:Green;'>" +
            "Success: Your browser supports CORS for cross domain images in Canvas <br>"+
            "Read " + argb.length+ " pixels in "+ time+"ms</span>";
        } catch (ex) {
            document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex + "</span>";
        }

    }

}

So my question is how do I modify K. Scott Allens' code to correctly set the CORS headers and generate the thumbnail from the video rather than the img as its in the example?

I have tried by setting crossOrigin ="" and crossOrigin="Anonymous" on both the video element and the canvas with no luck.

Any help would be appreciated.

Roberto

PS. There is a test for browser CORS image support here. And thsi method of getting the thumbnail does work. There's a page that uses it here (tho, no cross domain stuff)

Community
  • 1
  • 1
Roberto Bonini
  • 7,164
  • 6
  • 39
  • 47
  • How do you set video serving headers on the server side? – Mikko Ohtamaa Jan 05 '13 at 02:48
  • Also please do not refer to any article and expect people to read it... that way you are expecting people work too much to give an answer. – Mikko Ohtamaa Jan 05 '13 at 02:49
  • And which browsers you tested? – Mikko Ohtamaa Jan 05 '13 at 02:49
  • Also in this case the orignal article code may not work correctly as it does not honour media event order and the video might not be loaded when drawImage() is called. I suggest finding a better example or studying a solution of your own. – Mikko Ohtamaa Jan 05 '13 at 02:54
  • 1
    @MikkoOhtamaa Try to be a little less negative; instead of saying "please do not refer to any article", it's best to suggest the better course of action: "instead of referring to another article, please show the code that you've actually tried in the question." – Brian Campbell Jan 05 '13 at 03:25
  • I've added the code samples in for you both. – Roberto Bonini Jan 05 '13 at 12:47
  • My videos are being served from Azure Storage so I can;t modify headers on the servers side. – Roberto Bonini Jan 05 '13 at 12:52

0 Answers0