So I have an application we are developing in Cordova for Android. Specifically, the user will load a video feed that the application will do real-time processing. At issue is, a CORS violation which results in a Tainted Canvas when attempting to execute toDataURL on a canvas element. Maybe we are going about this wrong, but in short, we load the video to a video tag and then use canvas to snag frames every 100 milliseconds then submit the base64 data to be processed and this is where the error comes in.
Here is the loading code:
videoElement.src = loadedFeed; //http://someserver.com/hls/somefeed.m3u8
videoElement.crossOrigin = "*"; //have also tried anonymous
videoElement.play()
Here is the image creation code:
var canvas = document.createElement("canvas");
canvas.height = videoElement.videoHeight;
canvas.width = videoElement.videoWidth;
canvas.getContext('2d').drawImage(videoElement, 0, 0,canvas.width, canvas.height);
var base64data = canvas.toDataURL();
As we do not control the remote server, we cannot dictate the CORS headers. The video loads fine in the video tag and plays without issue, but we can't get a single frame into base64 data as the following is the error:
Uncaught SecurityError: Failed to execute toDataURL on HTMLCanvasElement: Tainted canvases may not be exported
Any thoughts on what we are doing wrong or what we can try different? In addition to crossOrigin, we have tried the Cordova Whitelist plugin with:
<allow-navigation href="*"/>
<allow-intent href="*"/>
<access origin="*" />
I have looked at numerous SO answers and have yet to find the exact flavor of my issue, but do let me know if you find one.
from How to Resolve Tainted Canvas for Frame Grab of Remote Video on Cordova Android App?
No comments:
Post a Comment