Estou trabalhando na ferramenta baseada em navegador para distribuidores de mídia que requerem alguma manipulação com vídeo.

Tenho o player de vídeo HTML5 com o vídeo carregado de outro domínio (por exemplo,http://video.com) O domínio retorna os seguintes cabeçalhos para o vídeo (tenta...-Origin com * e com nome de domínio específico):

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

ovideo tag é assim:

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

JS que corro é o seguinte:

        // 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'

O código funciona em todos os navegadores, exceto na família IE. Eu tentei no IE 11.

Entendo que, neste caso, a tela fique manchada, mas não deveria.

Alguém sabe alguma maneira de fazê-lo funcionar? Vi algumas soluções alternativas para imagens, mas não funciona no meu caso comvideo.

PS: Eu já vi a respostaCanvas.toDataURL () trabalhando em todos os navegadores, exceto o IE10 mas é bastante antigo e está relacionado a imagens. Espero que as coisas tenham mudado desde então.