Cross Origin resource sharing enabled video Safari 7 canvas

Question

I've built a javascript application which lets you take a snapshot of a video.

The video is hosted by amazon s3, and the bucket has cross origin resource sharing headers set to allow all.

The video tag has the crossOrigin="anonymous" attribute set.

The application works fine in Chrome and Firefox without errors.

When I call toDataURL() on the canvas, I get the following message

Unable to get image data from canvas because the canvas has been tainted with cross-origin data.

SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.

What other steps do I need to take to get this to work with both a remotely hosted video and and toDataURL()?

Answer 1

Short of proxying the video from your server, there is nothing you can do here. Safari does not yet support the crossOrigin attribute on an HTMLVideoElement.