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

Question

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

Uncaught Error: SECURITY_ERR: DOM Exception 18

下面是重现此问题的示例。这个例子是基于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交叉源视频是已知的一段时间，但我还没有发现任何更新:http://jbuckley.ca/2012/02/cross-origin-video/

有人知道这个问题的现状吗?是否有任何解决方法来访问远程视频在webGL?任何帮助都非常感谢!

谢谢!

Answer 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

Answer 2

当我将视频属性设置为"crossOrigin"而不是"crossOrigin" ....时，我被阻止了类似的错误

Answer 3

感谢您的评论。

Mozilla的Benoit Jacob就这个问题提交了一个bug报告:https://bugzilla.mozilla.org/show_bug.cgi?id=837153

. .并创建了一个更紧凑的测试用例:http://people.mozilla.org/bjacob/video-cors.html