CORS error when reading video from canvas (tainted canvas)

Question

I'm running an HLS stream that I want to write to a canvas; and then read pixels from the canvas.

The video gets rendered to the canvas A-ok, but it gets kicked off at:

myPixel = c.getImageData(200, 200, 1, 1).data;

where it fails with:

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

[Error] Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

I've set the cross-domain settings on the Wowza streaming server to:

<site-control permitted-cross-domain-policies="all"/>
<allow-access-from domain="*" to-ports="*" secure="false"/>
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>

and crossOrigin="anonymous" on the client side video element.

It works and fails with different computers on the same network, all running Safari 7.0.2/Mac.

Any good ideas for debugging this?

Answer 1

If your modifications work on some computers and not on other identically configured computers, try clearing the cache on the misbehaving computers.

Force a reload on the misbehaving macs like this:

Hold Shift and Cmd and press R .