javascript - 使用 CORS 通过 Canvas 的 HTML5 视频截图

Question

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

无论我尝试什么，当我尝试使用 canvas 元素截取不同域甚至不同端口上的视频的屏幕截图时，我最终会得到无法在“HTMLCanvasElement”上执行“toDataURL”:可能无法导出受污染的 Canvas 。错误。

这是我的设置:

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

CDN URL(我都试过了)
http://client.myapp.com:8181/somevideo.mp4
http://cdn.myapp.com/somevideo.mp4

使用 MP4 从 CDN 发回的 header :

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，因为如果我将完全相同的视频文件复制到网络应用程序并在本地加载，屏幕截图就可以正常显示
• 遍历 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 video crossorigin/CORS 规范的微妙规范中。

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

Chrome

加载 HTML5 视频将失败如果您设置了 crossOrigin，但您的视频是从 80 以外的任何端口提供服务的 and 不使用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 ) before 加载视频.如果你做得太晚，它仍然会失败。

全部

最后，如果您要在 javascript 中设置 crossOrigin，请确保为 javascript 属性使用正确的大小写:crossOrigin(不是 crossorigin)

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