javascript - 在基于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 使用，那么剩下的唯一选择就是通过代理页面加载视频。

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

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