使用 CORS 通过画布的 HTML5 视频截图

Question

我在 Chrome 中获取视频屏幕截图时遇到问题，我已经用尽了所有互联网和 Stackoverflow 上的所有答案；不走运。

无论我尝试什么，当我尝试使用 canvas 元素对位于不同域甚至不同端口上的视频进行屏幕截图时，我最终都会遇到 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 错误.

这是我的设置：

网络应用网址
http://client.myapp.com/home.html

CDN 网址（我都试过了）
http://client.myapp.com:8181/somevideo.mp4
http://cdn.myapp.com/somevideo.mp4

从 CDN 与 MP4 一起发回的标头：

Accept-Ranges:bytes
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:x-ms-request-id,Server,x-ms-version,Content-Type,Last-Modified,ETag,x-ms-lease-status,x-ms-lease-state,x-ms-blob-type,Accept-Ranges,Content-Length,Date,Transfer-Encoding
Content-Length:5253832
Content-Range:bytes 48-5253879/5253880
Content-Type:video/mp4
Date:Sat, 06 Feb 2016 17:24:05 GMT
ETag:"0x8D32E3EDB17EC00"
Last-Modified:Fri, 05 Feb 2016 15:13:08 GMT
Server:Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0
x-ms-blob-type:BlockBlob
x-ms-lease-state:available
x-ms-lease-status:unlocked
x-ms-request-id:88d3aaef-0629-4316-995f-021aa0153c32
x-ms-version:2015-04-05

我有：

• 在视频元素中添加了crossOrigin="anonymous"，但这只会导致视频完全加载失败
• 甚至在不同的端口上尝试过相同的域（如上）
• 确保Access-Control-Allow-Origin 与* 一起返回（如上）
• 我不相信它是 DRM，因为如果我将完全相同的视频文件复制到 Web 应用程序并在本地加载它，屏幕截图可以正常工作
• 遍历this question 的所有答案，但这是针对图像而不是视频，并且答案仅描述了前面的所有要点

然而，仍然是该死的错误。

编辑
添加代码：

var getScreenshotDataUrl = function(video, canvas, type) {
    type = type || "image/jpeg";
    var context = canvas.getContext("2d");
    var w = video.videoWidth;
    var h = video.videoHeight;
    canvas.width = w;
    canvas.height = h;
    context.fillRect(0, 0, w, h);
    context.drawImage(video, 0, 0, w, h);
    video.crossorigin = "anonymous";// makes no difference
    return canvas.toDataURL(type);
}

请帮忙。

Answer 1

我已经回答了我自己的问题。

我现在头疼得厉害。

问题在于 HTML5 视频跨域/CORS 规范的细微差别。

我只在 Chrome 和 Edge 中进行了测试，但以下是您在撰写本文时需要了解的内容：

铬

如果您设置了crossOrigin，如果加载您的 HTML5 视频将失败，但您的视频是从 80 以外的任何端口提供的并且不使用https：

这将失败
客户http://www.myapp.com/player.html:

<video crossOrigin="anonymous" src="http://cdn.myapp.com:81/video.mp4"></video>

这会成功
客户http://www.myapp.com/player.html:

<video crossOrigin="anonymous" src="https://cdn.myapp.com:81/video.mp4"></video>

Chrome 和 Edge

getImageData() 和 toDataURL() 将被安全阻止除非：

• crossorigin 设置为 anonymous 或 use-credentials (as defined here) 在加载视频之前。如果你做得太晚，它仍然会失败。

全部

最后，如果您要在 javascript 中设置 crossOrigin，请务必为 javascript 属性使用正确的大小写：crossOrigin（不是 crossorigin）

I have written this up in a little more detail in my blog.