HTML5 Rackspace Access-Control-Allow-Origin not working

So, I have some video files in Rackspace cloud files, but since I use the HTML5 functions (.toDataURL ()), "SECURITY_ERR: DOM Exception 18" continues to be thrown. My code works fine when I use a video file on my server.

So, I read about CORS and changed the headers of the Rackspace Cloud Files as follows:

access-control-allow-credentials:   true    
access-control-allow-origin:    [my domain here]    
access-control-allow-headers:   Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control
access-control-allow-methods:   OPTIONS, GET, POST  
access-control-expose-headers:  X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name
Content-Type:   video/webm

But the DOM Exception 18 error continues to throw. I do not know what the problem is. I checked if the HTTP headers were output by my video files on Rackspace using web-sniffer.net, and they are, so the problem is, why doesn’t it work?

I tried it in IE9, Chrome 19, Safari 5.1.2 and Aurora 12.0a2, they do not work in any of these browsers, so I am sure that this is not a problem with the browser.

I just need to get rid of this DOM Exception 18 error.

+3
source share
1 answer

toDataURL () will not work if your content is on a CDN (or any other host than the current one) which is a security limitation of the CANVAS element.

compare http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements to find out what is forbidden

basically, when you want to do something with images or videos in a canvas and save the result , you will have to have all the previous materials in the same domain. one way would be to capture the required files and temporarily save them while the user is editing it.

+2
source

All Articles