Support for cross-origin videos in canvas - Safari 7?

Question

topher6345 Author

Level 1

0 points

Support for cross-origin videos in canvas - Safari 7?

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()?

OS X Mavericks (10.9)

Posted on Mar 3, 2014 10:52 AM

Reply

Answer 1

yzap

Level 1

0 points

Sep 26, 2014 11:15 AM in response to topher6345

We're experiencing the same issue as well with our HTML5 Video editor (https://vidmaker.com). We've correctly set up CORS in S3 and in our web app. Everything works fine in Chrome & FF, but Safari on Mavericks (with WebGL enabled)/Yosemite/IOS8 throws the DOM Exception 18 error when trying to load data from a S3 hosted video (in a correctly setup HTML5 Video Element) into a canvas or into a webgl texture.

It seems the crossorigin attribute is working a-ok for images and web audio in safari, just not for the video tag. : (

This seems like one of the things that should "just work" since it's been part of the HTML5 spec for years now and all other browsers have supported it for years. http://www.w3.org/TR/html5/embedded-content-0.html#attr-media-crossorigin

So, that leaves us attempting to workaround this issue in order to support Safari users. We believe the only viable workaround for Safari users at the moment is to proxy the S3 video through our own domain, which we are in the process of implementing. This is obviously not preferred since as I said before, CORS should just work on Video elements according to long establish web standards, but even beyond that, it prevents us from just serving files from S3 or via the Cloudfront CDN. : (

Without looking at the Webkit code base, this seems like it should be a relatively straight forward thing to get added to a near future update of Mac and IOS Safari since the CORS handling code is already implemented and is already used for image tags and web audio in Safari...

Reply