使用CORS的画布通过HTML5视频截图 [英] HTML5 video screenshot via canvas using CORS
问题描述
在Chrome中获取视频的屏幕截图时遇到了问题，并且我已经用尽了所有互联网和所有Stackoverflow的答案；
I have an issue getting screenshots of videos in Chrome, and I've exhausted all the internets and all Stackoverflow answers on it; no luck.
无论我尝试什么，当我尝试使用 canvas 元素拍摄以下内容的屏幕截图时，视频位于不同的域，甚至只是位于不同的端口上，那么我最终遇到无法在'HTMLCanvasElement'上执行'toDataURL'的情况：可能无法导出污染的画布。错误。
No matter what I try, when I try to use the canvas element to take a screenshot of a video that is on a different domain, or even just a different port, then I end up with a Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. error.
这是我的设置：
Web应用程序URL
http://client.myapp.com/home.html
CDN URL（我都尝试过）
http://client.myapp.com:8181/somevideo.mp4
http://cdn.myapp.com/somevideo.mp4
从CDN用MP4发送的标头：
Headers sent back with MP4 from CDN:
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应用并加载，则屏幕截图可以正常工作本地
- 遍历此问题的所有答案，但是这是针对不是视频的图像，答案仅描述了所有先前的观点
- Added
crossOrigin="anonymous"to the video element, but this just makes the video fail to load altogether - Tried even the same domain on a different port (as above)
- Ensured that
Access-Control-Allow-Originis coming back with*(as above) - I don't believe it is DRM as the screenshot works fine if I copy the exact same video file to the web app and load it locally
- Run through all answers to this question, but this is for images not videos anyway and the answers only describe all the previous points
但是，仍然是错误的错误。
Yet, still the blasted error.
编辑
添加代码：
Edit
Added code:
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);
}
请帮助。
推荐答案
我已经回答了我自己的问题。
I have answered my own question.
我现在头疼得厉害。
问题出在HTML5视频跨域/ CORS规范的细微差别。
The problem lies somewhere in the nuanced specification of the HTML5 video crossorigin/CORS specification.
我仅在Chrome和Edge中进行过测试，但这是撰写本文时需要了解的内容：
I only tested in Chrome and Edge, but here is what you need to know at the time of writing:
加载HTML5视频将失败如果您设置了 crossOrigin ，但是您的视频是通过 80 和 是不是，使用 https ：
Loading your HTML5 video will fail if you have crossOrigin set, but your video is being served from any port other than 80 and is not using https:
这将失败
位于 http://www.myapp.com/player的客户端。 html ：
<video crossOrigin="anonymous" src="http://cdn.myapp.com:81/video.mp4"></video>
这将成功
客户< a href = http://www.myapp.com/player.html> 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（此处定义）之前
- crossorigin is set to
anonymousoruse-credentials(as defined here) before the video is loaded. If you do this too late, it will still fail.
最后，如果要在javascript中设置 crossOrigin ，请确保对javascript属性使用正确的大小写： crossOrigin （不是 crossorigin ）
Finally, if you are going to set crossOrigin in javascript, be sure to use the correct casing for the javascript property: crossOrigin (NOT crossorigin)
这篇关于使用CORS的画布通过HTML5视频截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
