HTML5 canvas (videothumbnail) gives SecurityError

Asked Jul 16 '15 at 21:01

Active Jul 16 '15 at 21:17

Viewed 464 times

I have read lost of threads on this but wasnt able to find solution. This is the situation. I've loaded a video and created a thumbnail with HTML5 canvas. But when I try to save that canvas image with =toDataUrl then I get this error:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

<video id="video" width="200"     
src="https://sportsquare.s3.amazonaws.com/2012030311_big_1.mp4"   
type="video/mp4" controls></video><br/>
<canvas id="canvas"></canvas><br/>

<script>
    window.setInterval(function(){
        var canvas = document.getElementById('canvas');
        var video = document.getElementById('video');
        canvas.getContext('2d').drawImage(video, 0,0,175,125);
        var dataURL = canvas.toDataURL("image/png");
        dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
    }, 2000);
</script>

edited Jul 16 '15 at 21:17

asked Jul 16 '15 at 21:01

APS_dev

Try to run your code in a user triggered event (on click). – Ibu Jul 16 '15 at 21:07
Thx lbu, i did try that aswell but still got same error. – APS_dev Jul 16 '15 at 22:03
Try it with [`crossorigin="anonymous"`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) as referenced by the answer to [this question](http://stackoverflow.com/questions/20424279) (which makes this a semi-dupe). – Sebastian Simon Jul 16 '15 at 22:44
I have tried that but no success. Because i can not set `img.src = URL;` – APS_dev Jul 16 '15 at 23:24
`img`? I mean, add `crossorigin="anonymous"` to you ` – Sebastian Simon Jul 17 '15 at 01:57
Have tried that but is not. I have now setup Cors in my cloud (amazon) but no success. Even if i host this video on my own hosting, i till get that security error. Can somebody get this to work at all? – APS_dev Jul 17 '15 at 09:06
did you find any solution ? – coding_idiot Apr 21 '16 at 08:34

HTML5 canvas (videothumbnail) gives SecurityError

0 Answers0