将 HTML5 视频标签分配给 webGL 纹理时出现 CORS/跨域安全异常

Posted 2023-03-04

技术标签:

【中文标题】将 HTML5 视频标签分配给 webGL 纹理时出现 CORS/跨域安全异常【英文标题】：CORS/cross domain security exception when assigning HTML5 video tag to webGL texture 【发布时间】：2012-12-21 18:57:32 【问题描述】：

我想将远程视频分配给 WebGL 中的纹理。由于视频源与文档源不同，所以我在视频源的http headers中添加了Access-Control-Allow-Origin:*。此外，我使用video.crossOrigin = ''; 为视频标签分配了匿名来源。有趣的是，跨域属性适用于图像，但不适用于视频标签。一旦将 WebGL 纹理分配给视频对象，javascript 就会抛出以下异常：

未捕获的错误：SECURITY_ERR：DOM 异常 18

这是一个重现此问题的 jsfiddle。本示例基于three.js的webgl_kinect示例： http://jsfiddle.net/ZgeTU/2/

以下是相关部分：

// CROSS-ORIGIN VIDEO SOURCE 
// REMOTE VIDEO SOURCE PROVIDES "Access-Control-Allow-Origin:*" HEADER
video.src =
  'http://kammerl.de/threejs/three.js/examples/textures/kinect.webm';
// DEFINING ANONYMOUS ORIGIN
video.crossOrigin = '';
video.play();

稍后将视频标签分配给 Three.js 纹理：

texture = new THREE.Texture( video );

显然，在 webGL 中使用 crossOrigin 视频的这个问题已经有一段时间了，但我还没有找到任何更新： http://jbuckley.ca/2012/02/cross-origin-video/

有谁知道这个问题的状态是什么？是否有任何解决方法可以访问 webGL 中的远程视频？非常感谢任何帮助！

谢谢！

【问题讨论】：

经过测试的示例和视频 loads 在 Chrome 上运行良好，如果我将其添加到 DOM，我可以查看它，尽管我没有看到任何安全错误“创建 WebGL 上下文时出错。” @Jamo - 你通过 JSFiddle 了吗？您使用的是哪个版本的 Chrome（和操作系统）？你可以通过 https 访问吗？您为此视频发送了Content-Type: text/plain 标头。你应该发送video/webm。是否有权访问该服务器所在的服务器（页面和远程视频）？ 【参考方案1】：

由于您使用的是 jquery，并且建议您进行一些客户端处理，也许您可以查看一下插件或 cors 插件的基础 (2,3)。

假设您做的事情正确并为每个浏览器添加了适当的标头 (4,5)，请拿出一个数据包分析器（如 wireshark）并检查数据包以提供更多信息。

不过，话虽如此，WebGL 的 CORS 很有可能是一项正在进行的工作。为了按照规范实现它，浏览器正在修改支持（1）。

祝你好运。

(1) 来源：https://www.khronos.org/webgl/public-mailing-list/archives/1106/msg00042.html

(2) 来源：archive.plugins.jquery.com/project/cors

(3) 来源：saltybeagle.com/2009/09/cross-origin-resource-sharing-demo/

(4) 来源：www.html5rocks.com/en/tutorials/cors/

(5) 来源：github.com/saltybeagle/cors

另请注意： www.jaanga.com/2012/04/access-cross-origin-images-from.html

【讨论】：

【参考方案2】：