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.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…