canvas.toDataURL() gives “Security Error” in IE 11

Question

I'm working on the browser-based tool for media distributors that require some manipulation with video.

I have HTML5 video player with video loaded from another domain (ex. http://video.com). Domain returns the following headers for the video (tries ...-Origin with * and with specific domain name):

Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: *

The video tag is like this:

<video crossorigin="anonymous" src="http://video.com/video.mp4"></video>

JS I run is the following:

        // meida is a reference to <video> tag
        var
            imgData,
            width = media.videoWidth,
            height = media.videoHeight,
            canvas = document.createElement("canvas"),
            context = canvas.getContext('2d');

        canvas.width = width;
        canvas.height = height;

        context.fillRect(0, 0, width, height);
        context.drawImage(media, 0, 0, width, height);

        imgData = canvas.toDataURL('image/png'); // line where IE throws DOMException named 'Security error'

The code works in all browsers except IE family. I've tried it on IE 11.

I understand that in this case canvas becomes tainted while it should not.

Does anybody know any way to make it work? I saw some workarounds for images but it doesn't work in my case with video.

PS: I've seen the answer Canvas.toDataURL() working in all browsers except IE10 but it is quite old and is related to images. I hope things changed since then.

Answer 1

I was trying to export pdf of page which includes highcharts. I was getting same problem with IE when trying to load svg data on canvas, same security error.

I fixed this issue using canvg.js

just include canvg library files,

Add canvas on html page,

<canvas id="canvas" width="1000px" height="600px"></canvas> 

use below method,

canvg(document.getElementById('canvas'), xml);

It worked for me in all browsers including IE.

Answer 2

By using fabric js "Security Error" in IE 11 will be gone.

    var
        imgData,
        width = media.videoWidth,
        height = media.videoHeight,
        canvas = document.createElement("canvas"),
        fabCanvas  = new fabric.Canvas('c'),
        context = fabCanvas.getContext('2d');

    canvas.width = width;
    canvas.height = height;

    fabCanvas.fillRect(0, 0, width, height);
    fabCanvas.drawImage(media, 0, 0, width, height);

    imgData = fabCanvas.toDataURL({format: "png"});