I try to display a video in canvas, but I got this error:
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data
I though it because the video doesn't have a CORS, but when I test it using test-cors, I can see that this video has CORS definition because I'm getting the response:
Url with cors:
https://res.cloudinary.com/dwaquopnm/video/upload/v1582007937/blink2013_itacxp.mp4
Url without cors:
What can I do to solve this error? I can't use proxy becuase I have a cdn for the videos. (one server is in usa, the another is in china) so if I use proxy I missing the cdn point.
document.addEventListener('DOMContentLoaded', function(){
var v = document.getElementById('my-video');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var back = document.createElement('canvas');
var backcontext = back.getContext('2d');
var cw,ch;
console.log({ v });
v.addEventListener('play', function(){
cw = v.clientWidth;
ch = v.clientHeight;
canvas.width = cw;
canvas.height = ch;
back.width = cw;
back.height = ch;
draw(v,context,backcontext,cw,ch);
},false);
},false);
function draw(v,c,bc,w,h) {
if(v.paused || v.ended) return false;
// First, draw it into the backing canvas
bc.drawImage(v,0,0,w,h);
// Grab the pixel data from the backing canvas
var idata = bc.getImageData(0,0,w,h);
var data = idata.data;
idata.data = data;
// Draw the pixels onto the visible canvas
c.putImageData(idata,0,0);
// Start over!
setTimeout(draw,20,v,c,bc,w,h);
}#c {
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 20px;
}<head>
<link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="https://res.cloudinary.com/dwaquopnm/video/upload/v1582007937/blink2013_itacxp.mp4" type="video/mp4" crossorign="anonymous" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<canvas id="c" ></canvas>
<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
</body>