javascript - 如何解决 Cordova Android 应用程序上远程视频帧抓取的 Tainted Canvas？

Question

所以我有一个我们正在 Cordova 中为 Android 开发的应用程序。具体来说，用户将加载应用程序将进行实时处理的视频源。问题在于，当尝试在 canvas 元素上执行 toDataURL 时，CORS 违规会导致 Tainted Canvas。也许我们做错了，但简而言之，我们将视频加载到 video 标签，然后使用 canvas 每 100 毫秒捕获一次帧，然后将 base64 数据提交到被处理，这就是错误的来源。

加载代码如下:

videoElement.src = loadedFeed; //http://someserver.com/hls/somefeed.m3u8
videoElement.crossOrigin = "*"; //have also tried anonymous
videoElement.play()

这是图像创建代码:

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();

由于我们不控制远程服务器，因此我们无法指定 CORS header 。视频在 video 标签中加载正常并且播放没有问题，但是我们无法将单个帧转换为 base64 数据，因为以下是错误:

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

关于我们做错了什么或者我们可以尝试什么不同的想法？除了 crossOrigin，我们还尝试了 Cordova 白名单插件:

<allow-navigation href="*"/>
<allow-intent href="*"/>
<access origin="*" />

我已经查看了许多 SO 答案，但尚未找到我的问题的确切风格，但如果您找到了，请告诉我。

Answer 1

尝试使用<video id="video" crossorigin="anonymous"/>

它解决了我的问题。

希望对您有所帮助。