Question

我想将一个远程视频分配给WebGL中的纹理。由于视频源与文档源不同，因此我将Access-Control-Allow-Origin:*添加到视频源的http标头中。此外，我使用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中的远程视频？非常感谢任何帮助！

谢谢！

Answer 1

由于您使用的是jquery，并且建议使用某些客户端处理，或许您可以查看插件或cors插件的基础（2,3）。

假设您正在做正确的事情并根据每个浏览器添加标题（4,5），请找出一个数据包分析器（如wireshark）并检查数据包以便为您提供更多信息。

然而，话虽如此，很有可能CORS for WebGL正在进行中。为了根据规范实现它，浏览器正在修改支持（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就此问题提交了一份错误报告： https://bugzilla.mozilla.org/show_bug.cgi?id=837153

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

将HTML5视频标记分配给webGL纹理时的CORS /跨域安全性异常

3 个答案: