在基于Cordova的IOS应用程序中拍摄HTML5视频的屏幕截图

Question

我正在创建一个基于 Cordova 的 iOS 应用，并使用以下代码在特定时间段捕获 html5 视频播放器的屏幕截图：

var canvas = document.createElement('canvas');
canvas.width = 80;
canvas.height = 70;
var ctx = canvas.getContext('2d');

ctx.fillRect(0, 0, canvas.width, canvas.height); 
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

代码在浏览器中运行正常，但是在Xcode模拟器和iPad上运行时，最后一行代码无法执行：

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

如果它仅在浏览器中有效，我们将不胜感激。

Answer 1

如果视频不是从与页面相同的服务器提供的，我怀疑您可能会在此处遇到 CORS 问题。在这种情况下，浏览器会抛出一个可以在控制台中看到的安全错误。

如果是这样，你需要要么

1. 将视频文件移动到与页面相同的服务器
2. 或为外部服务器启用 CORS 使用（如果使用 file://，则将其视为不同的来源）。
3. 或使用与页面相同的服务器上的代理页面来加载外部视频

对于 2. 选项，您需要访问才能修改服务器配置。如果您无权访问并且无法让所有者重新配置它以使用 CORS，则剩下的唯一选择是通过代理页面加载视频。

在 SO 上回答这个问题有点宽泛，因为根据您使用的平台类型，有许多可能的选项。但本质上，代理页面会将 url 作为参数并开始加载它，然后将它加载的数据转发到请求数据的页面。

除了满足上面列出的选项之一之外，没有办法绕过 CORS 限制。