为webGL纹理分配HTML5视频标签时出现CORS/跨域安全异常
我想在WebGL中为一个纹理指定一个远程视频。由于视频源与文档源不同，我在视频源的http头中添加了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中访问远程视频有什么解决方法吗？任何帮助都是非常感谢的！
谢谢!
回答 3
Stack Overflow用户
发布于 2013-01-15 01:31:03
由于您使用的是jquery，并且建议进行一些客户端处理，因此您可能会考虑一下插件或cors插件的基础(2,3)。
假设您的操作是正确的，并且为每个浏览器(4,5)添加了适当的报头，那么使用诸如wireshark之类的数据包分析器，并检查这些数据包，以获得更深入的了解。
然而，话虽如此，WebGL的CORS很有可能还在进行中。为了按照规范实现它，浏览器正在修改支持(1)。
祝好运。
(1)来源：https://www.khronos.org/webgl/public-mailing-list/archives/1106/msg00042.html
(2)来源:project ve.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
Stack Overflow用户
发布于 2016-07-06 08:29:29
当我将视频属性设置为"crossOrigin“而不是”crossorigin“时，我遇到了类似的错误。一旦我降低了所有的代码，它就开始工作了。
Stack Overflow用户
发布于 2013-02-02 04:13:59
感谢您的评论。
Mozilla的Benoit Jacob在这个问题上提交了一个错误报告：https://bugzilla.mozilla.org/show_bug.cgi?id=837153
。。并创建了一个更紧凑的测试用例：http://people.mozilla.org/~bjacob/video-cors.html
https://stackoverflow.com/questions/14206244
复制相似问题