Canvas that created from video raising "Tainted canvases may not be exported." error when saving

Question

I'm creating snapshot from HTML5 video, using this example . Video is hosted on 3rd party servers, that I can't control.

So I wanted to save image, but toDataURL failing because of security reason.

Here is error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

I guess there is a solution for image. img.crossOrigin = "Anonymous" something like that. Here and here .

I tried videoDomElm.crossOrigin = "Anonymous" , but no luck.

Is there any solution for video?

Thanks in advance.

Answer 1

crossOrigin='anonymous' is only half the solution to passing cross-domain security requirements. It causes the browser to read the response headers and not taint the canvas if the headers allow for cross-origin access of the content.

The other half of the solution is for the server to be configured to send the proper cross-origin permissions in its response headers. Without the server being configured to allow cross-origin access, the canvas will still be tainted.

The only ways to satisfy cross-origin security are:

1. Have the video originate on the same domain as your web pages.

2. Have the video server configured to send the appropriate cross-origin access in its headers.

There are no workarounds -- you must satisfy the security restrictions.