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

Posted 2023-03-05

【中文标题】使用 CORS 通过画布的 HTML5 视频截图

【英文标题】：HTML5 video screenshot via canvas using CORS

【发布时间】：2016-05-16 14:45:04

【问题描述】：

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

无论我尝试什么，当我尝试使用 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.mp4http://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);

请帮忙。

【问题讨论】：

能否请您在此处发布您的代码，而不是此处的链接。

试试看这个资源developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

@Binvention 我已经添加了代码。它适用于非 CORS。

图片标题中的 env=IS_CORS 怎么样？

【参考方案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.

【讨论】：

谢谢。我有同样的经历，在网上找不到太多的文档/答案。猜测/测试/修改一天半也收效甚微。这篇文章为我解决了。非常感谢