canvas.toDataURL() Security Error The operation is insecure

Question

When I am trying to get a screenshot and save it as PNG before uploading video to server, I am having the following problem

Answer 1

Sounds like a CORS issue.

The Video is on a different origin than the web server.

If you can get the video to include an "Access-Control-Allow-Origin: *" header in the response, and you can set video.crossorigin = "Anonymous", then you can probably pull this off.

I used Charles Web Proxy to add the header to any image or video I wanted to work with.

See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

See Also https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

Here's a Fiddle working with an Image: http://jsfiddle.net/mcepc44p/2/

var canvas = document.getElementById("canvas").getContext("2d");

var button = document.getElementById("button");

var image = new Image();
image.crossOrigin = "anonymous";  // This enables CORS
image.onload = function (event) {
    try {
        canvas.drawImage(image, 0, 0, 200, 200);
        button.download = "cat.png";
        button.href = canvas.canvas.toDataURL();        
    } catch (e) {
        alert(e);
    }
};
image.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/"

Is this what you're looking for?