使用CORS通过画布截取HTML5视频

Question

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

无论我尝试什么，当我尝试使用canvas元素截取不同域上的视频截图，甚至只是一个不同的端口时，我最终得到{{{ 1}}错误。

这是我的设置：

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

CDN网址（我已尝试过两种方式）
http://client.myapp.com:8181/somevideo.mp4
http://cdn.myapp.com/somevideo.mp4

标题从CDN发回MP4：

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

我有：

• 在视频元素中添加了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的所有答案，但这是针对图片而不是视频而且答案仅描述了之前的所有观点

然而，仍然是爆炸性的错误。

修改
添加了代码：

*

请帮忙。

Answer 1

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

我现在感到非常头疼。

问题在于HTML5视频crossorigin / 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