CODEWITHSUNDEEP
javascripthtmlvideocanvashtml5-video
Delgermurun
Delgermurun

Reputation: 658

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

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.

Upvotes: 2

Views: 3730

Answers (1)

markE
markE

Reputation: 105035

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.

Upvotes: 3

Related Questions