如何解决 Cordova Android 应用程序上远程视频帧抓取的污染画布？

Question

所以我有一个我们正在 Cordova 中为 Android 开发的应用程序。具体来说，用户将加载应用程序将进行实时处理的视频源。问题是，当尝试在画布元素上执行 toDataURL 时，违反 CORS 会导致画布被污染。也许我们正在处理这个错误，但简而言之，我们将视频加载到 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 标头。视频在video 标签中加载良好，播放没有问题，但我们无法将单帧转换为 base64 数据，因为以下是错误：

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

对我们做错了什么或我们可以尝试不同的地方有什么想法吗？除了 crossOrigin，我们还尝试了 Cordova Whitelist 插件：

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

我查看了许多 SO 答案，但尚未找到我的问题的确切含义，但如果你找到了，请告诉我。

Answer 1

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

它解决了我的问题。

希望对你有帮助。

Answer 2

我在加载图像时遇到了同样的问题。 这是对我有用的方法，希望对您有所帮助。

我所做的是，

1. 使用 xhr 请求下载图像并将其保存在 fileReader 中。
2. 在画布上绘制，然后转换回图像 dataURL。 在本例中，它是一个 SVG blob URL，您可以使用收到的任何内容。

function downloadImageFromCrossOrigin (blobURL) {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', blobURL, true);
                xhr.responseType = 'blob';
                xhr.onload = function () {
                    if (this.status === 200) {
                        var fileReader = new FileReader();
                        fileReader.onload = function (e) {
                            var url = e.target.result;
                            var img = new Image();
                            var imgCanvas = document.createElement('canvas');
                            var imgContext = imgCanvas.getContext('2d');
                            img.onload = function () {
                                // Make sure canvas is as big as the picture
                                imgCanvas.width = img.width;
                                imgCanvas.height = img.height;
                                // Draw image into canvas element
                                imgContext.drawImage(img, 0, 0);

                                // Get canvas contents as a data URL. Use this imgAsDataURL
                                var imgAsDataURL = imgCanvas.toDataURL('image/png');

                            };
                            img.src = url;
                        };
                        fileReader.readAsDataURL(this.response);
                    }
                    else{
                        throw new Error('Failed to load from blobURL.');
                    }
                };
                xhr.send();
            };