CODEWITHSUNDEEP
htmlvideocanvashtml5-canvas
NullReference
NullReference

Reputation: 4484

How to tell if HTML5 video tag source supports CORS?

I'm using a HTML5 canvas to take a screen shot of a video tag. This works about 80% of the time on Chrome. The other 20% of the time I'm getting "Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported" error. I'm assuming this is because the video source doesn't support CORS.

I've tried adding the attribute 'videoTag.attr('crossorigin', 'anonymous');' to the video tag but that doesn't seem to help.

So my question is there anyway to tell if the video tag supports CORS?

    // Get handles on the video element
    var video = videoContainer[0];

    var canvas = jQuery('#temp-canvas')[0];
    var context = canvas.getContext('2d');

    canvas.width = 640;
    canvas.height = 360;

    // Define the size of the rectangle that will be filled (basically the entire element)
    context.fillRect(0, 0, 640, 390);

    // Grab the image from the video
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    //return the url so we can use it 
    //Failed to execute toDataURL exception thrown here
    imageUrl = canvas.toDataURL();

Upvotes: 0

Views: 187

Answers (1)

markE
markE

Reputation: 105015

Since you're testing for an error condition rather than a browser feature, you can use a try-catch block.

Upvotes: 1

Related Questions